tba-git/shop-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(warenkorb-neu): Zeile zweistufig (Bild+Name / Stepper+Summe) fuer die 722px-Spalte, Gewaehrleistungs-Label ueber dem Summenkasten, Stapeln per Container-Query

Browse Source 
Bild label-gewaehrleistung.webp liegt in media/images (gitignored), auf Dev und Live kopiert.
This commit is contained in:
Thomas Bartelt
2026-09-18 19:55:37 +02:00
parent ae7e400645
commit 0521b4399f
1 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/intelectra_shop/themes/theme2/templates/content_shoppingcart_neu.tpl
+31 -12
View File
@@ -67,7 +67,12 @@
<div class="wk-continue"><a href="/">&larr; Weiter einkaufen</a></div>
</div>
<aside class="wk-box">
<aside class="wk-side">
<a class="wk-label" href="{$THEME_DIR}/media/images/label-gewaehrleistung.webp" target="_blank" rel="noopener" title="Gesetzliche Gew&auml;hrleistung: das ganze Label &ouml;ffnen">
<img src="{$THEME_DIR}/media/images/label-gewaehrleistung.webp" alt="Gesetzliche Gew&auml;hrleistung" />
<span>Mindestens zwei Jahre gesetzliche Gew&auml;hrleistung &middot; Details</span>
</a>
<div class="wk-box">
<div class="wk-line"><span>Zwischensumme</span><span>{$shoppingcart.shown_price_sum|number_format:"2":",":"."} &euro;</span></div>
{foreach $shoppingcart.tax_values as $taxRate => $taxData}
<div class="wk-line wk-muted"><span>{if $shoppingcartVATUsage}inkl. MwSt.{else}zzgl. MwSt.{/if} {$taxRate} %</span><span>{$taxData['vat']|number_format:"2":",":"."} &euro;</span></div>
@@ -90,6 +95,7 @@
{/if}
<button type="button" id="update_cart" class="wk-btn wk-btn-ghost">Mengen aktualisieren</button>
<div class="wk-trust wk-muted">Sichere Zahlung &middot; Versand aus Deutschland</div>
</div>
</aside>
</form>
{else}
@@ -116,13 +122,24 @@
.wk-count { font-size: 14px; font-weight: 400; color: #777; margin-left: 8px; }
.wk-muted { color: #777; font-weight: 400; }
.wk-grid { display: flex; gap: 28px; align-items: flex-start; }
.wk { container-type: inline-size; }
.wk-grid { display: flex; gap: 20px; align-items: flex-start; }
.wk-list { flex: 1 1 auto; min-width: 0; }
.wk-box { flex: 0 0 300px; position: sticky; top: 16px; background: #fafafa; border: 1px solid #e3e3e3; border-radius: 8px; padding: 18px; }
.wk-side { flex: 0 0 260px; position: sticky; top: 16px; }
.wk-box { background: #fafafa; border: 1px solid #e3e3e3; border-radius: 8px; padding: 16px; }
/* Gewaehrleistungs-Label ueber dem Kasten: Kopf des EU-Labels als Badge, Klick oeffnet das ganze Label */
.wk-label { display: block; margin-bottom: 12px; border: 1px solid #e3e3e3; border-radius: 8px; overflow: hidden; background: #fff; text-decoration: none; color: #333; }
.wk-label img { display: block; width: 100%; height: 78px; object-fit: cover; object-position: top; }
.wk-label span { display: block; font-size: 12px; padding: 7px 10px; color: #555; }
.wk-label:hover span { color: #FF6700; }
.wk-row { display: grid; grid-template-columns: 84px 1fr auto auto 28px; gap: 14px; align-items: center;
padding: 14px 0; border-bottom: 1px solid #e6e6e6; }
.wk-img img { width: 84px; height: 84px; object-fit: contain; background: #fff; border: 1px solid #eee; border-radius: 6px; display: block; }
/* Zeile zweistufig (Tom, 18.09.): oben Bild + Name/Nr, darunter Stepper + Zeilensumme.
Die Inhaltsspalte des Themes ist nur 722px breit, fuenf Spalten nebeneinander tragen da nicht. */
.wk-row { display: grid; grid-template-columns: 72px 1fr auto; grid-template-areas: "img info del" "img qty sum";
column-gap: 14px; row-gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid #e6e6e6; }
.wk-img { grid-area: img; align-self: start; } .wk-info { grid-area: info; } .wk-del { grid-area: del; }
.wk-qty { grid-area: qty; justify-self: start; } .wk-sum { grid-area: sum; }
.wk-img img { width: 72px; height: 72px; object-fit: contain; background: #fff; border: 1px solid #eee; border-radius: 6px; display: block; }
.wk-name { font-weight: 700; color: #222; text-decoration: none; }
.wk-name:hover { color: #FF6700; }
.wk-variant, .wk-nr, .wk-unit { color: #666; font-size: 13px; margin-top: 2px; }
@@ -168,13 +185,15 @@
.wk-quick-title { font-weight: 700; margin-bottom: 6px; }
.wk-quick input { width: 100%; max-width: 480px; height: 38px; border: 1px solid #cfcfcf; border-radius: 6px; padding: 0 10px; font: inherit; }
@media (max-width: 760px) {
@container (max-width: 640px) {
.wk-grid { display: block; }
.wk-box { position: static; margin-top: 20px; }
.wk-row { grid-template-columns: 64px 1fr 28px; grid-template-areas: "img info del" "img qty sum"; }
.wk-img { grid-area: img; } .wk-info { grid-area: info; } .wk-del { grid-area: del; }
.wk-qty { grid-area: qty; justify-self: start; } .wk-sum { grid-area: sum; }
.wk-img img { width: 64px; height: 64px; }
.wk-side { position: static; margin-top: 20px; }
}
@media (max-width: 560px) {
.wk-grid { display: block; }
.wk-side { position: static; margin-top: 20px; }
.wk-row { grid-template-columns: 56px 1fr auto; }
.wk-img img { width: 56px; height: 56px; }
}
</style>
<script type="text/javascript">