DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

Fix: "+"-Button der Mengensteuerung war unsichtbar, wenn die maximale Lagermenge bereits im Warenkorb war

Browse Source 
Ursache gefunden: wenn der Lagerbestand komplett im Warenkorb war, bekam
der "In den Warenkorb"-Button den kompletten langen Hinweissatz als
Text ("Maximale verfügbare Menge ist bereits im Warenkorb"). Der Button
wurde dadurch riesig (3 Zeilen) und hat die danebenliegende
Mengen-Steuerung samt "+"-Button optisch verschluckt — auf schmalen
Bildschirmen war der "+" komplett unsichtbar.

Fix: Der Button bekommt jetzt eine kurze Beschriftung ("Bereits im
Warenkorb"), der ausführliche Satz steht weiterhin im separaten
Hinweistext darunter. Zusätzlich .qty-row jetzt mit flex-wrap
abgesichert, damit ein zu langer Button-Text künftig einfach umbricht
statt die Mengen-Steuerung zu überlagern.

Verifiziert per Puppeteer auf schmalem Viewport (420px): "+" jetzt
sichtbar und klickbar, Button zeigt Kurztext, Hinweis zeigt weiterhin
den vollen Satz.
This commit is contained in:
qcigano
2026-08-02 21:06:17 +02:00
parent 0ee884364d
commit f4a48c519c
6 changed files with 25 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/ch/produkt/[slug].astro
+4 -4
View File
@@ -133,12 +133,12 @@ const felder: [string, string | undefined][] = [
)}
</Layout>
<script define:vars={{ onlyLeftTemplate: t.common.onlyXLeft("__N__"), maxInCartText: t.common.maxInCart, soldOutText: t.common.soldOut, addToCartText: t.common.addToCart }}>
window.__productStockVars = { onlyLeftTemplate, maxInCartText, soldOutText, addToCartText };
<script define:vars={{ onlyLeftTemplate: t.common.onlyXLeft("__N__"), maxInCartText: t.common.maxInCart, maxInCartShortText: t.common.maxInCartShort, soldOutText: t.common.soldOut, addToCartText: t.common.addToCart }}>
window.__productStockVars = { onlyLeftTemplate, maxInCartText, maxInCartShortText, soldOutText, addToCartText };
</script>
<script>
import { addToCart, getCart } from "../../../scripts/cart";
const { onlyLeftTemplate, maxInCartText, soldOutText, addToCartText } = (window as any).__productStockVars;
const { onlyLeftTemplate, maxInCartText, maxInCartShortText, soldOutText, addToCartText } = (window as any).__productStockVars;
const btn = document.getElementById("add-to-cart") as HTMLButtonElement | null;
const qtyInput = document.getElementById("qty") as HTMLInputElement;
const confirm = document.getElementById("add-confirm")!;
@@ -168,7 +168,7 @@ const felder: [string, string | undefined][] = [
btn.textContent = soldOutText;
} else if (max === 0) {
btn.disabled = true;
btn.textContent = maxInCartText;
btn.textContent = maxInCartShortText;
stockHint.style.display = "block";
stockHint.textContent = maxInCartText;
} else {
src/pages/en/produkt/[slug].astro
+4 -4
View File
@@ -133,12 +133,12 @@ const felder: [string, string | undefined][] = [
)}
</Layout>
<script define:vars={{ onlyLeftTemplate: t.common.onlyXLeft("__N__"), maxInCartText: t.common.maxInCart, soldOutText: t.common.soldOut, addToCartText: t.common.addToCart }}>
window.__productStockVars = { onlyLeftTemplate, maxInCartText, soldOutText, addToCartText };
<script define:vars={{ onlyLeftTemplate: t.common.onlyXLeft("__N__"), maxInCartText: t.common.maxInCart, maxInCartShortText: t.common.maxInCartShort, soldOutText: t.common.soldOut, addToCartText: t.common.addToCart }}>
window.__productStockVars = { onlyLeftTemplate, maxInCartText, maxInCartShortText, soldOutText, addToCartText };
</script>
<script>
import { addToCart, getCart } from "../../../scripts/cart";
const { onlyLeftTemplate, maxInCartText, soldOutText, addToCartText } = (window as any).__productStockVars;
const { onlyLeftTemplate, maxInCartText, maxInCartShortText, soldOutText, addToCartText } = (window as any).__productStockVars;
const btn = document.getElementById("add-to-cart") as HTMLButtonElement | null;
const qtyInput = document.getElementById("qty") as HTMLInputElement;
const confirm = document.getElementById("add-confirm")!;
@@ -168,7 +168,7 @@ const felder: [string, string | undefined][] = [
btn.textContent = soldOutText;
} else if (max === 0) {
btn.disabled = true;
btn.textContent = maxInCartText;
btn.textContent = maxInCartShortText;
stockHint.style.display = "block";
stockHint.textContent = maxInCartText;
} else {
src/pages/fr/produkt/[slug].astro
+4 -4
View File
@@ -133,12 +133,12 @@ const felder: [string, string | undefined][] = [
)}
</Layout>
<script define:vars={{ onlyLeftTemplate: t.common.onlyXLeft("__N__"), maxInCartText: t.common.maxInCart, soldOutText: t.common.soldOut, addToCartText: t.common.addToCart }}>
window.__productStockVars = { onlyLeftTemplate, maxInCartText, soldOutText, addToCartText };
<script define:vars={{ onlyLeftTemplate: t.common.onlyXLeft("__N__"), maxInCartText: t.common.maxInCart, maxInCartShortText: t.common.maxInCartShort, soldOutText: t.common.soldOut, addToCartText: t.common.addToCart }}>
window.__productStockVars = { onlyLeftTemplate, maxInCartText, maxInCartShortText, soldOutText, addToCartText };
</script>
<script>
import { addToCart, getCart } from "../../../scripts/cart";
const { onlyLeftTemplate, maxInCartText, soldOutText, addToCartText } = (window as any).__productStockVars;
const { onlyLeftTemplate, maxInCartText, maxInCartShortText, soldOutText, addToCartText } = (window as any).__productStockVars;
const btn = document.getElementById("add-to-cart") as HTMLButtonElement | null;
const qtyInput = document.getElementById("qty") as HTMLInputElement;
const confirm = document.getElementById("add-confirm")!;
@@ -168,7 +168,7 @@ const felder: [string, string | undefined][] = [
btn.textContent = soldOutText;
} else if (max === 0) {
btn.disabled = true;
btn.textContent = maxInCartText;
btn.textContent = maxInCartShortText;
stockHint.style.display = "block";
stockHint.textContent = maxInCartText;
} else {
src/pages/produkt/[slug].astro
+4 -4
View File
@@ -133,12 +133,12 @@ const felder: [string, string | undefined][] = [
)}
</Layout>
<script define:vars={{ onlyLeftTemplate: t.common.onlyXLeft("__N__"), maxInCartText: t.common.maxInCart, soldOutText: t.common.soldOut, addToCartText: t.common.addToCart }}>
window.__productStockVars = { onlyLeftTemplate, maxInCartText, soldOutText, addToCartText };
<script define:vars={{ onlyLeftTemplate: t.common.onlyXLeft("__N__"), maxInCartText: t.common.maxInCart, maxInCartShortText: t.common.maxInCartShort, soldOutText: t.common.soldOut, addToCartText: t.common.addToCart }}>
window.__productStockVars = { onlyLeftTemplate, maxInCartText, maxInCartShortText, soldOutText, addToCartText };
</script>
<script>
import { addToCart, getCart } from "../../scripts/cart";
const { onlyLeftTemplate, maxInCartText, soldOutText, addToCartText } = (window as any).__productStockVars;
const { onlyLeftTemplate, maxInCartText, maxInCartShortText, soldOutText, addToCartText } = (window as any).__productStockVars;
const btn = document.getElementById("add-to-cart") as HTMLButtonElement | null;
const qtyInput = document.getElementById("qty") as HTMLInputElement;
const confirm = document.getElementById("add-confirm")!;
@@ -168,7 +168,7 @@ const felder: [string, string | undefined][] = [
btn.textContent = soldOutText;
} else if (max === 0) {
btn.disabled = true;
btn.textContent = maxInCartText;
btn.textContent = maxInCartShortText;
stockHint.style.display = "block";
stockHint.textContent = maxInCartText;
} else {