Skip to content
Code-Schnipsel Gruppen Projekte
Commit 622f4463 erstellt von Michael Danielczok's avatar Michael Danielczok
Dateien durchsuchen

feat: article list in basket improved

Related: #1
Übergeordneter 968fc3e9
No related branches found
No related tags found
2 Merge Requests!7feat: article list in basket designed,!5feat: article list in basket designed
......@@ -22,6 +22,10 @@
<de><![CDATA[Dein Warenkorb enthält leider keine Artikel]]></de>
<en><![CDATA[Your shopping cart does not contain any items]]></en>
</locale>
<locale name="simpleCheckout.basket.btn.moreDetails">
<de><![CDATA[Produktdetails]]></de>
<en><![CDATA[Product details]]></en>
</locale>
<locale name="logged.in.guest">
<de><![CDATA[Eingeloggt als: Gast]]></de>
<en><![CDATA[Logged in as: Guest]]></en>
......
......@@ -12,7 +12,9 @@
</a>
</div>
<div class="articleList-entry__data">
<div class="articleData__title">{$Article->getAttribute('title')|escape:'html'}</div>
<div class="articleData__title">
<a href="{$Product->getUrl()}">{$Article->getAttribute('title')|escape:'html'}</a>
</div>
<div class="articleData__artNo text-muted">
<span>
......@@ -26,10 +28,11 @@
{$Article->getAttribute('quantity')} {$Article->getQuantityUnit()} x
{$Currency->format($calc.basisPrice)}
</div>
<div class="sum fw-bolder">
{$Currency->format($calc.sum)}
<div class="articleData__sum">
<span class="articleData__sumValue fw-bolder">{$Currency->format($calc.sum)}</span>
{if !empty($vatArray)}
<div class="articleData__price-vat text-muted">
<div class="articleData__vat text-muted">
{locale group="quiqqer/erp" var="article.list.articles.header.vat" Locale=$Locale}
{$Article->getAttribute('vat')}%
</div>
......@@ -37,9 +40,11 @@
</div>
</div>
{if $Article->getAttribute('description') || $Article->getCustomFields()}
<button class="articleData__btnToggleDetails btn btn-link-dark btn-sm btn-small"
{literal}onClick="(() => {this.classList.toggle('open')})();return false;"{/literal}>
Produktdetails <span class="fa fa-angle-down"></span>
{locale group="quiqqer/order-simple-checkout" var="simpleCheckout.basket.btn.moreDetails" Locale=$Locale}
<span class="fa fa-angle-down"></span>
</button>
<div class="articleData__more">
......@@ -54,7 +59,7 @@
<ul class="articleData__fields">
{foreach $Article->getCustomFields() as $field}
<li>
<span>{$field.title}:</span>
<span class="text-muted">{$field.title}:</span>
{if isset($field.custom_calc) && isset($field.custom_calc.valueText)}
<span>{$field.custom_calc.valueText}</span>
{elseif isset($field['valueText'])}
......@@ -67,9 +72,7 @@
</ul>
</div>
</div>
{/if}
</div>
</section>
......
/***********/
/* article */
/***********/
.articleList-entry {
--_gap: var(--gap, 0.5rem);
display: grid;
gap: var(--_gap, 0.5rem);
gap: var(--_gap);
grid-template-areas: "image data";
margin-bottom: var(--_gap, 0.5rem);
margin-bottom: var(--_gap);
grid-template-columns: auto 1fr;
}
.articleList-entry__image,
.articleList-entry__data {
--_bg: var(--bg, #fff);
padding: 1rem;
border-radius: 0.5rem;
background-color: var(--_bg, #fff);
background-color: var(--_bg);
}
/*********/
/* image */
/*********/
.articleList-entry__image {
display: grid;
}
/* data */
/****************/
/* product data */
/****************/
.articleData__title {
font-size: var(--qui-fs-md, 1.125rem);
}
.articleData__title > a:not(:hover, :focus) {
color: inherit;
}
.articleData__price {
display: flex;
justify-content: space-between;
......@@ -35,24 +49,32 @@
flex-grow: 1;
}
.articleData__price > .sum {
.articleData__sumValue {
font-weight: bolder;
}
.articleData__price-vat {
.articleData__vat {
font-size: 0.75rem;
text-align: right;
line-height: 1;
font-weight: normal;
}
.articleList-entry__data {
.articleData__desc {
margin-block: 0.5rem;
}
.articleData__action {
text-align: right;
.articleData__desc > .label {
font-size: var(--qui-fs-sm, 0.875rem);
}
ul.articleData__fields {
list-style: none;
padding-left: 0;
margin-block: 0;
line-height: 1.5;
}
/* toggle button */
.articleData__btnToggleDetails.btn {
padding-inline: 0;
display: block;
......@@ -64,11 +86,14 @@
margin-right: 0;
}
/* toggle button: open status */
.articleData__btnToggleDetails.open > .fa {
transform: rotate(180deg);
}
/******************/
/* hidden content */
/******************/
.articleData__more {
overflow: hidden;
display: grid;
......@@ -77,19 +102,11 @@
height: auto;
}
.open + .articleData__more {
grid-template-rows: 1fr;
}
.articleData__more > .inner {
overflow: hidden;
}
.articleData__desc {
margin-block: 0.5rem;
}
.articleData__desc > .label {
font-size: var(--qui-fs-sm, 0.875rem);
}
/* hidden content: open status */
.open + .articleData__more {
grid-template-rows: 1fr;
}
\ No newline at end of file
0% oder .
You are about to add 0 people to the discussion. Proceed with caution.
Bearbeitung dieser Nachricht zuerst beenden!
Bitte registrieren oder zum Kommentieren