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

Produktfotos: Von VanVan im Adminbereich hochgeladene Bilder werden jetzt auf Produktkarten und der Produktdetailseite angezeigt (Hauptbild + klickbare Miniaturbilder), statt immer nur den Platzhalter zu zeigen

Browse Source
This commit is contained in:
qcigano
2026-08-02 16:08:25 +02:00
parent 63dd57d529
commit 345dd736ba
6 changed files with 117 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/ch/produkt/[slug].astro
+24 -8
View File
@@ -42,14 +42,22 @@ const felder: [string, string | undefined][] = [
<div class="grid grid-2 product-detail">
<div>
<div class="img-placeholder product-hero" role="img" aria-label={`${t.common.photoSoon}: ${name}`}>
{t.common.photoSoon}<br /><span class="small">{t.product.photoNote}</span>
</div>
<div class="thumb-row">
<div class="img-placeholder thumb"></div>
<div class="img-placeholder thumb"></div>
<div class="img-placeholder thumb"></div>
</div>
{product.bilder && product.bilder.length > 0 ? (
<>
<img id="product-hero-img" class="product-photo product-hero" src={product.bilder[0]} alt={name} />
{product.bilder.length > 1 && (
<div class="thumb-row">
{product.bilder.map((bild) => (
<img class="product-photo thumb" src={bild} alt={name} data-full={bild} />
))}
</div>
)}
</>
) : (
<div class="img-placeholder product-hero" role="img" aria-label={`${t.common.photoSoon}: ${name}`}>
{t.common.photoSoon}<br /><span class="small">{t.product.photoNote}</span>
</div>
)}
</div>
<div>
@@ -118,4 +126,12 @@ const felder: [string, string | undefined][] = [
confirm.style.display = "block";
setTimeout(() => (confirm.style.display = "none"), 2500);
});
// Klick auf ein Miniaturbild zeigt es groß im Hauptbild an (mehrere Produktfotos).
const heroImg = document.getElementById("product-hero-img") as HTMLImageElement | null;
document.querySelectorAll<HTMLImageElement>(".thumb.product-photo").forEach((thumb) => {
thumb.addEventListener("click", () => {
if (heroImg && thumb.dataset.full) heroImg.src = thumb.dataset.full;
});
});
</script>
src/pages/en/produkt/[slug].astro
+24 -8
View File
@@ -42,14 +42,22 @@ const felder: [string, string | undefined][] = [
<div class="grid grid-2 product-detail">
<div>
<div class="img-placeholder product-hero" role="img" aria-label={`${t.common.photoSoon}: ${name}`}>
{t.common.photoSoon}<br /><span class="small">{t.product.photoNote}</span>
</div>
<div class="thumb-row">
<div class="img-placeholder thumb"></div>
<div class="img-placeholder thumb"></div>
<div class="img-placeholder thumb"></div>
</div>
{product.bilder && product.bilder.length > 0 ? (
<>
<img id="product-hero-img" class="product-photo product-hero" src={product.bilder[0]} alt={name} />
{product.bilder.length > 1 && (
<div class="thumb-row">
{product.bilder.map((bild) => (
<img class="product-photo thumb" src={bild} alt={name} data-full={bild} />
))}
</div>
)}
</>
) : (
<div class="img-placeholder product-hero" role="img" aria-label={`${t.common.photoSoon}: ${name}`}>
{t.common.photoSoon}<br /><span class="small">{t.product.photoNote}</span>
</div>
)}
</div>
<div>
@@ -118,4 +126,12 @@ const felder: [string, string | undefined][] = [
confirm.style.display = "block";
setTimeout(() => (confirm.style.display = "none"), 2500);
});
// Klick auf ein Miniaturbild zeigt es groß im Hauptbild an (mehrere Produktfotos).
const heroImg = document.getElementById("product-hero-img") as HTMLImageElement | null;
document.querySelectorAll<HTMLImageElement>(".thumb.product-photo").forEach((thumb) => {
thumb.addEventListener("click", () => {
if (heroImg && thumb.dataset.full) heroImg.src = thumb.dataset.full;
});
});
</script>
src/pages/fr/produkt/[slug].astro
+24 -8
View File
@@ -42,14 +42,22 @@ const felder: [string, string | undefined][] = [
<div class="grid grid-2 product-detail">
<div>
<div class="img-placeholder product-hero" role="img" aria-label={`${t.common.photoSoon}: ${name}`}>
{t.common.photoSoon}<br /><span class="small">{t.product.photoNote}</span>
</div>
<div class="thumb-row">
<div class="img-placeholder thumb"></div>
<div class="img-placeholder thumb"></div>
<div class="img-placeholder thumb"></div>
</div>
{product.bilder && product.bilder.length > 0 ? (
<>
<img id="product-hero-img" class="product-photo product-hero" src={product.bilder[0]} alt={name} />
{product.bilder.length > 1 && (
<div class="thumb-row">
{product.bilder.map((bild) => (
<img class="product-photo thumb" src={bild} alt={name} data-full={bild} />
))}
</div>
)}
</>
) : (
<div class="img-placeholder product-hero" role="img" aria-label={`${t.common.photoSoon}: ${name}`}>
{t.common.photoSoon}<br /><span class="small">{t.product.photoNote}</span>
</div>
)}
</div>
<div>
@@ -118,4 +126,12 @@ const felder: [string, string | undefined][] = [
confirm.style.display = "block";
setTimeout(() => (confirm.style.display = "none"), 2500);
});
// Klick auf ein Miniaturbild zeigt es groß im Hauptbild an (mehrere Produktfotos).
const heroImg = document.getElementById("product-hero-img") as HTMLImageElement | null;
document.querySelectorAll<HTMLImageElement>(".thumb.product-photo").forEach((thumb) => {
thumb.addEventListener("click", () => {
if (heroImg && thumb.dataset.full) heroImg.src = thumb.dataset.full;
});
});
</script>
src/pages/produkt/[slug].astro
+24 -8
View File
@@ -42,14 +42,22 @@ const felder: [string, string | undefined][] = [
<div class="grid grid-2 product-detail">
<div>
<div class="img-placeholder product-hero" role="img" aria-label={`${t.common.photoSoon}: ${name}`}>
{t.common.photoSoon}<br /><span class="small">{t.product.photoNote}</span>
</div>
<div class="thumb-row">
<div class="img-placeholder thumb"></div>
<div class="img-placeholder thumb"></div>
<div class="img-placeholder thumb"></div>
</div>
{product.bilder && product.bilder.length > 0 ? (
<>
<img id="product-hero-img" class="product-photo product-hero" src={product.bilder[0]} alt={name} />
{product.bilder.length > 1 && (
<div class="thumb-row">
{product.bilder.map((bild) => (
<img class="product-photo thumb" src={bild} alt={name} data-full={bild} />
))}
</div>
)}
</>
) : (
<div class="img-placeholder product-hero" role="img" aria-label={`${t.common.photoSoon}: ${name}`}>
{t.common.photoSoon}<br /><span class="small">{t.product.photoNote}</span>
</div>
)}
</div>
<div>
@@ -118,4 +126,12 @@ const felder: [string, string | undefined][] = [
confirm.style.display = "block";
setTimeout(() => (confirm.style.display = "none"), 2500);
});
// Klick auf ein Miniaturbild zeigt es groß im Hauptbild an (mehrere Produktfotos).
const heroImg = document.getElementById("product-hero-img") as HTMLImageElement | null;
document.querySelectorAll<HTMLImageElement>(".thumb.product-photo").forEach((thumb) => {
thumb.addEventListener("click", () => {
if (heroImg && thumb.dataset.full) heroImg.src = thumb.dataset.full;
});
});
</script>