goc_marek/ps_shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: goc_marek/ps_shop:2e1bec0e8bbde2029d1c20b508bb123e16071401
Branches Tags
goc_marek/ps_shop:main
..
compare: goc_marek/ps_shop:main
Branches Tags
goc_marek/ps_shop:main

2 Commits
2e1bec0e8b .. main

Author SHA1 Message Date
goc_marek 378baf4458 theme 2026-05-16 00:20:34 +02:00
goc_marek d55b0e2914 almost all ready 2026-05-14 01:56:02 +02:00
14 changed files with 1858 additions and 1393 deletions
Expand all files Collapse all files
.env
+1 -1
View File
@@ -15,7 +15,7 @@ PRESTASHOP_VERSION=1.7.3
# PRESTASHOP_COOKIE_NAME= # PRESTASHOP_COOKIE_NAME=
PRESTASHOP_COOKIE_KEY=def00000cecd7a19e52c6ae0ca758f54dd6e682c8fe4c657b8441974a33c6d11a0fc238a02c0f2de4a46fed7a57e2db8d6f6c4c615a937a26af5163293ae6702bc5d18f4 PRESTASHOP_COOKIE_KEY=def00000cecd7a19e52c6ae0ca758f54dd6e682c8fe4c657b8441974a33c6d11a0fc238a02c0f2de4a46fed7a57e2db8d6f6c4c615a937a26af5163293ae6702bc5d18f4
PRESTASHOP_COOKIE_IV=vfRFMV42 PRESTASHOP_COOKIE_IV=vfRFMV42
DOMAIN_COOKIE=localhost:8080 DOMAIN_COOKIE=marek.ma-al.pl
# PrestaShop DB # PrestaShop DB
PRESTASHOP_DB_DIALECT=mariadb PRESTASHOP_DB_DIALECT=mariadb
DB_USER=presta DB_USER=presta
templates/cart.templ
+53 -59
View File
@@ -8,46 +8,43 @@ import (
templ CartPage(data viewmodel.CartPageData, cssPath string, jsPath string) { templ CartPage(data viewmodel.CartPageData, cssPath string, jsPath string) {
@Layout("Cart", cssPath, jsPath, data.Menu, data.Locale, data.Cart.TotalItems) { @Layout("Cart", cssPath, jsPath, data.Menu, data.Locale, data.Cart.TotalItems) {
<main class="min-h-screen overflow-hidden bg-[radial-gradient(circle_at_top,_rgba(245,158,11,0.22),_transparent_34%),radial-gradient(circle_at_bottom_left,_rgba(120,53,15,0.22),_transparent_36%),linear-gradient(180deg,#0c0a09,#1c1917)]"> <main class="min-h-screen bg-[#fdfbf7]">
<div class="pointer-events-none absolute inset-x-0 top-0 h-72 bg-[linear-gradient(145deg,rgba(251,191,36,0.12),transparent_58%)]"></div> <div class="site-container flex flex-col gap-8 py-6 sm:py-8 lg:py-10">
<div class="mx-auto flex w-full max-w-[104rem] flex-col gap-10 px-6 py-10 lg:px-8"> <header class="border-b border-stone-200 pb-6">
<header class="relative overflow-hidden rounded-[2.2rem] border border-amber-500/20 bg-[linear-gradient(135deg,rgba(28,25,23,0.96),rgba(120,53,15,0.34))] p-8 shadow-[0_32px_120px_rgba(41,24,10,0.48)] lg:p-10"> <div class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
<div class="absolute -right-14 top-[-3.5rem] h-44 w-44 rounded-full bg-amber-300/10 blur-3xl"></div> <div class="max-w-3xl">
<div class="absolute bottom-[-4rem] left-[-2rem] h-40 w-40 rounded-full bg-orange-500/10 blur-3xl"></div> <p class="text-[0.72rem] font-semibold uppercase tracking-[0.26em] text-stone-400">Cart overview</p>
<div class="relative flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between"> <h1 class="mt-4 text-3xl font-medium text-stone-800 sm:text-[2.5rem]">Everything ready for checkout.</h1>
<div class="max-w-2xl"> <p class="mt-4 max-w-2xl text-sm leading-7 text-stone-500">Review quantities, adjust line items, and confirm the final order state before checkout continues in PrestaShop.</p>
<p class="text-xs uppercase tracking-[0.38em] text-amber-300/80">Cart overview</p>
<h1 class="mt-4 font-serif text-4xl text-stone-50 lg:text-5xl">Everything ready for checkout.</h1>
<p class="mt-4 max-w-xl text-sm leading-7 text-stone-300 lg:text-base">Review quantities, adjust variants, and keep the final order state visible before handing off checkout to PrestaShop.</p>
</div> </div>
<div class="grid gap-3 sm:grid-cols-2 lg:min-w-[20rem]"> <div class="grid gap-3 sm:grid-cols-2 lg:min-w-[20rem]">
<div class="rounded-[1.4rem] border border-white/10 bg-white/5 px-5 py-4 backdrop-blur"> <div class="border border-stone-200 bg-white px-5 py-4 shadow-[0_12px_30px_rgba(20,33,61,0.05)]">
<p class="text-[0.68rem] uppercase tracking-[0.28em] text-stone-500">Line items</p> <p class="text-[0.68rem] uppercase tracking-[0.28em] text-stone-500">Line items</p>
<p class="mt-2 text-3xl font-semibold text-stone-50">{ fmt.Sprintf("%d", len(data.Cart.Items)) }</p> <p class="mt-2 text-3xl font-semibold text-stone-900">{ fmt.Sprintf("%d", len(data.Cart.Items)) }</p>
</div> </div>
<div class="rounded-[1.4rem] border border-amber-400/20 bg-amber-300/10 px-5 py-4 backdrop-blur"> <div class="border border-stone-200 bg-[#fff7e7] px-5 py-4 shadow-[0_12px_30px_rgba(20,33,61,0.05)]">
<p class="text-[0.68rem] uppercase tracking-[0.28em] text-amber-100/80">Units total</p> <p class="text-[0.68rem] uppercase tracking-[0.28em] text-stone-500">Units total</p>
<p class="mt-2 text-3xl font-semibold text-stone-50">{ fmt.Sprintf("%d", data.Cart.TotalItems) }</p> <p class="mt-2 text-3xl font-semibold text-stone-900">{ fmt.Sprintf("%d", data.Cart.TotalItems) }</p>
</div> </div>
</div> </div>
</div> </div>
<div class="relative mt-8 flex flex-wrap items-center gap-3 text-sm text-stone-300"> <div class="mt-6 flex flex-wrap items-center gap-3 text-sm text-stone-500">
if data.Customer != nil { if data.Customer != nil {
<span class="rounded-full border border-white/10 bg-black/15 px-4 py-2">{ fmt.Sprintf("%s %s", data.Customer.FirstName, data.Customer.LastName) }</span> <span class="border border-stone-200 bg-white px-4 py-2">{ fmt.Sprintf("%s %s", data.Customer.FirstName, data.Customer.LastName) }</span>
} else { } else {
<span class="rounded-full border border-white/10 bg-black/15 px-4 py-2">Guest session</span> <span class="border border-stone-200 bg-white px-4 py-2">Guest session</span>
} }
<span class="rounded-full border border-white/10 bg-black/15 px-4 py-2">{ "Subtotal " + moneyWithCurrency(data.Cart.SubtotalTaxIncl, cartCurrencySign(data), cartCurrencyCode(data)) }</span> <span class="border border-stone-200 bg-white px-4 py-2">{ "Subtotal " + moneyWithCurrency(data.Cart.SubtotalTaxIncl, cartCurrencySign(data), cartCurrencyCode(data)) }</span>
</div> </div>
</header> </header>
<section class="grid gap-8 xl:grid-cols-[minmax(0,1.55fr)_24rem]"> <section class="grid gap-8 xl:grid-cols-[minmax(0,1.55fr)_24rem]">
<div class="rounded-[2rem] border border-stone-800 bg-stone-900/72 p-5 shadow-[0_24px_80px_rgba(0,0,0,0.35)] lg:p-6"> <div class="border border-stone-200 bg-white p-5 shadow-[0_18px_42px_rgba(20,33,61,0.06)] lg:p-6">
if len(data.Cart.Items) == 0 { if len(data.Cart.Items) == 0 {
<div class="rounded-[1.75rem] border border-dashed border-amber-400/30 bg-[linear-gradient(180deg,rgba(245,158,11,0.08),rgba(28,25,23,0.32))] p-12 text-center"> <div class="border border-dashed border-stone-300 bg-[#fcfbf8] p-12 text-center">
<p class="text-sm uppercase tracking-[0.28em] text-amber-300">Empty</p> <p class="text-sm uppercase tracking-[0.28em] text-stone-400">Empty</p>
<p class="mt-4 text-3xl font-semibold text-stone-50">Your cart is empty.</p> <p class="mt-4 text-3xl font-semibold text-stone-900">Your cart is empty.</p>
<p class="mx-auto mt-3 max-w-md text-sm leading-7 text-stone-300">Browse categories or return to a product page to add items and build a full order before checkout.</p> <p class="mx-auto mt-3 max-w-md text-sm leading-7 text-stone-500">Browse categories or return to a product page to add items and build a full order before checkout.</p>
</div> </div>
} else { } else {
<div class="mb-4 hidden grid-cols-[minmax(0,1fr)_11rem] gap-4 px-4 text-[0.68rem] uppercase tracking-[0.28em] text-stone-500 md:grid"> <div class="mb-4 hidden grid-cols-[minmax(0,1fr)_11rem] gap-4 px-4 text-[0.68rem] uppercase tracking-[0.28em] text-stone-500 md:grid">
@@ -56,51 +53,48 @@ templ CartPage(data viewmodel.CartPageData, cssPath string, jsPath string) {
</div> </div>
<div class="space-y-4"> <div class="space-y-4">
for _, item := range data.Cart.Items { for _, item := range data.Cart.Items {
<article class="group overflow-hidden rounded-[1.7rem] border border-stone-800 bg-[linear-gradient(180deg,rgba(41,37,36,0.88),rgba(28,25,23,0.96))] p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] transition duration-300 hover:border-amber-400/30 hover:bg-[linear-gradient(180deg,rgba(120,53,15,0.22),rgba(28,25,23,0.98))] md:p-6"> <article class="border border-stone-200 bg-[#fffdfa] p-5 transition hover:border-amber-400/60 md:p-6">
<div class="flex flex-col gap-5 md:flex-row md:items-start md:justify-between"> <div class="flex flex-col gap-5 md:flex-row md:items-start md:justify-between">
if item.ImageURL != "" { if item.ImageURL != "" {
<div class="overflow-hidden rounded-[1.35rem] border border-stone-800 bg-stone-950/70 shadow-[0_16px_40px_rgba(0,0,0,0.24)] md:w-32 md:shrink-0"> <div class="flex overflow-hidden border border-stone-200 bg-white md:w-32 md:shrink-0 md:items-center md:justify-center">
<img class="block h-32 w-full object-cover" src={ item.ImageURL } alt={ item.Name }/> <img class="block h-32 w-full object-contain" src={ item.ImageURL } alt={ item.Name }/>
</div> </div>
} }
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2"> <div class="flex flex-wrap items-center gap-2">
<p class="text-[0.68rem] uppercase tracking-[0.3em] text-amber-300">Product</p> <p class="text-[0.68rem] uppercase tracking-[0.3em] text-stone-400">Product</p>
if cartItemAttributeLabel(item) != "" { if cartItemAttributeLabel(item) != "" {
<span class="rounded-full border border-amber-300/20 bg-amber-300/10 px-2.5 py-1 text-[0.65rem] uppercase tracking-[0.16em] text-amber-100/80">{ cartItemAttributeLabel(item) }</span> <span class="border border-amber-200 bg-[#fff7e7] px-2.5 py-1 text-[0.65rem] uppercase tracking-[0.16em] text-amber-700">{ cartItemAttributeLabel(item) }</span>
} }
</div> </div>
if item.URL != "" { if item.URL != "" {
<a class="mt-3 block truncate text-2xl font-semibold text-stone-50 underline-offset-4 transition group-hover:text-amber-100 hover:underline" href={ item.URL }>{ item.Name }</a> <a class="mt-3 block truncate text-2xl font-semibold text-stone-900 underline-offset-4 transition hover:text-amber-600 hover:underline" href={ item.URL }>{ item.Name }</a>
} else { } else {
<h2 class="mt-3 text-2xl font-semibold text-stone-50">{ item.Name }</h2> <h2 class="mt-3 text-2xl font-semibold text-stone-900">{ item.Name }</h2>
} }
<div class="mt-4 flex flex-wrap gap-2 text-xs text-stone-400"> <div class="mt-4 flex flex-wrap gap-2 text-xs text-stone-500">
<span class="rounded-full border border-white/10 bg-black/20 px-3 py-1.5">{ fmt.Sprintf("Qty %d", item.Quantity) }</span> <span class="border border-stone-200 bg-white px-3 py-1.5">{ fmt.Sprintf("Qty %d", item.Quantity) }</span>
<span class="rounded-full border border-white/10 bg-black/20 px-3 py-1.5">{ "Net " + moneyWithCurrency(item.UnitPrice, item.CurrencySign, item.CurrencyCode) }</span> <span class="border border-stone-200 bg-white px-3 py-1.5">{ "Net " + moneyWithCurrency(item.UnitPrice, item.CurrencySign, item.CurrencyCode) }</span>
<span class="rounded-full border border-white/10 bg-black/20 px-3 py-1.5">{ taxLabel(item.TaxRate) }</span> <span class="border border-stone-200 bg-white px-3 py-1.5">{ taxLabel(item.TaxRate) }</span>
</div> </div>
if cartItemAttributeLabel(item) != "" {
<p class="mt-3 text-sm text-stone-300">{ cartItemAttributeLabel(item) }</p>
}
</div> </div>
<div class="rounded-[1.25rem] border border-stone-800 bg-stone-950/70 px-4 py-4 text-left md:min-w-[11rem] md:text-right"> <div class="border border-stone-200 bg-white px-4 py-4 text-left md:min-w-[11rem] md:text-right">
<p class="text-[0.68rem] uppercase tracking-[0.24em] text-stone-500">Line total</p> <p class="text-[0.68rem] uppercase tracking-[0.24em] text-stone-500">Line total</p>
<p class="mt-2 text-2xl font-semibold text-stone-50">{ moneyWithCurrency(item.LineTotalTaxIncl, item.CurrencySign, item.CurrencyCode) }</p> <p class="mt-2 text-2xl font-semibold text-stone-900">{ moneyWithCurrency(item.LineTotalTaxIncl, item.CurrencySign, item.CurrencyCode) }</p>
<p class="mt-1 text-xs uppercase tracking-[0.2em] text-stone-500">{ conversionRateLabel(item.ConversionRate, item.CurrencyCode) }</p> <p class="mt-1 text-xs uppercase tracking-[0.2em] text-stone-500">{ conversionRateLabel(item.ConversionRate, item.CurrencyCode) }</p>
</div> </div>
</div> </div>
<div class="mt-6 flex flex-col gap-3 border-t border-stone-800 pt-5 md:flex-row md:items-center md:justify-between"> <div class="mt-6 flex flex-col gap-3 border-t border-stone-200 pt-5 md:flex-row md:items-center md:justify-between">
<form class="flex flex-wrap items-center gap-3" method="post" action={ localizedCartPath(data.Locale) }> <form class="flex flex-wrap items-center gap-3" method="post" action={ localizedCartPath(data.Locale) }>
<input type="hidden" name="action" value="update"/> <input type="hidden" name="action" value="update"/>
<input type="hidden" name="id_product" value={ fmt.Sprintf("%d", item.ProductID) }/> <input type="hidden" name="id_product" value={ fmt.Sprintf("%d", item.ProductID) }/>
<input type="hidden" name="id_product_attribute" value={ fmt.Sprintf("%d", item.ProductAttributeID) }/> <input type="hidden" name="id_product_attribute" value={ fmt.Sprintf("%d", item.ProductAttributeID) }/>
<input type="hidden" name="id_customization" value={ fmt.Sprintf("%d", item.CustomizationID) }/> <input type="hidden" name="id_customization" value={ fmt.Sprintf("%d", item.CustomizationID) }/>
<label class="text-[0.75rem] uppercase tracking-[0.24em] text-stone-400" for={ fmt.Sprintf("qty-%d-%d", item.ProductID, item.ProductAttributeID) }>Quantity</label> <label class="text-[0.75rem] uppercase tracking-[0.24em] text-stone-400" for={ fmt.Sprintf("qty-%d-%d", item.ProductID, item.ProductAttributeID) }>Quantity</label>
<div class="flex items-center overflow-hidden rounded-full border border-stone-700 bg-stone-950"> <div class="flex items-center border border-stone-300 bg-white">
<input class="w-20 bg-transparent px-4 py-2.5 text-center text-sm text-stone-100 outline-none ring-0" id={ fmt.Sprintf("qty-%d-%d", item.ProductID, item.ProductAttributeID) } type="number" min="1" name="qty" value={ fmt.Sprintf("%d", item.Quantity) }/> <input class="w-20 bg-transparent px-4 py-2.5 text-center text-sm text-stone-900 outline-none ring-0" id={ fmt.Sprintf("qty-%d-%d", item.ProductID, item.ProductAttributeID) } type="number" min="1" name="qty" value={ fmt.Sprintf("%d", item.Quantity) }/>
</div> </div>
<button class="rounded-full border border-amber-300/40 bg-amber-300/10 px-4 py-2.5 text-xs font-semibold uppercase tracking-[0.22em] text-amber-100 transition hover:bg-amber-300 hover:text-stone-950" type="submit"> <button class="border border-amber-500 bg-amber-500 px-4 py-2.5 text-xs font-semibold uppercase tracking-[0.22em] text-white transition hover:bg-amber-600" type="submit">
Update line Update line
</button> </button>
</form> </form>
@@ -109,7 +103,7 @@ templ CartPage(data viewmodel.CartPageData, cssPath string, jsPath string) {
<input type="hidden" name="id_product" value={ fmt.Sprintf("%d", item.ProductID) }/> <input type="hidden" name="id_product" value={ fmt.Sprintf("%d", item.ProductID) }/>
<input type="hidden" name="id_product_attribute" value={ fmt.Sprintf("%d", item.ProductAttributeID) }/> <input type="hidden" name="id_product_attribute" value={ fmt.Sprintf("%d", item.ProductAttributeID) }/>
<input type="hidden" name="id_customization" value={ fmt.Sprintf("%d", item.CustomizationID) }/> <input type="hidden" name="id_customization" value={ fmt.Sprintf("%d", item.CustomizationID) }/>
<button class="rounded-full border border-stone-700 bg-stone-950 px-4 py-2.5 text-xs font-semibold uppercase tracking-[0.22em] text-stone-200 transition hover:border-rose-300/30 hover:bg-rose-300 hover:text-stone-950" type="submit"> <button class="border border-stone-300 bg-white px-4 py-2.5 text-xs font-semibold uppercase tracking-[0.22em] text-stone-700 transition hover:border-rose-300 hover:bg-rose-50 hover:text-rose-700" type="submit">
Remove Remove
</button> </button>
</form> </form>
@@ -120,32 +114,32 @@ templ CartPage(data viewmodel.CartPageData, cssPath string, jsPath string) {
} }
</div> </div>
<aside class="xl:sticky xl:top-8 xl:self-start"> <aside class="xl:sticky xl:top-28 xl:self-start">
<div class="overflow-hidden rounded-[2rem] border border-amber-500/20 bg-[linear-gradient(180deg,rgba(245,158,11,0.12),rgba(28,25,23,0.92)_34%,rgba(28,25,23,0.98))] p-8 shadow-[0_24px_80px_rgba(41,24,10,0.4)]"> <div class="border border-stone-200 bg-white p-8 shadow-[0_18px_42px_rgba(20,33,61,0.06)]">
<p class="text-xs uppercase tracking-[0.3em] text-amber-200">Summary</p> <p class="text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-stone-400">Summary</p>
<p class="mt-3 text-sm leading-7 text-stone-300">A compact snapshot of the current order before checkout moves to the native Presta flow.</p> <p class="mt-3 text-sm leading-7 text-stone-500">A compact snapshot of the current order before checkout moves to the native PrestaShop flow.</p>
<div class="mt-8 space-y-3"> <div class="mt-8 space-y-3">
<div class="flex items-center justify-between rounded-2xl border border-white/10 bg-black/15 px-4 py-3 text-sm text-stone-200"> <div class="flex items-center justify-between border border-stone-200 bg-[#fcfbf8] px-4 py-3 text-sm text-stone-700">
<span>Total items</span> <span>Total items</span>
<span class="font-semibold text-stone-50">{ fmt.Sprintf("%d", data.Cart.TotalItems) }</span> <span class="font-semibold text-stone-900">{ fmt.Sprintf("%d", data.Cart.TotalItems) }</span>
</div> </div>
<div class="flex items-center justify-between rounded-2xl border border-white/10 bg-black/15 px-4 py-3 text-sm text-stone-200"> <div class="flex items-center justify-between border border-stone-200 bg-[#fcfbf8] px-4 py-3 text-sm text-stone-700">
<span>Unique lines</span> <span>Unique lines</span>
<span class="font-semibold text-stone-50">{ fmt.Sprintf("%d", len(data.Cart.Items)) }</span> <span class="font-semibold text-stone-900">{ fmt.Sprintf("%d", len(data.Cart.Items)) }</span>
</div> </div>
<div class="flex items-center justify-between rounded-2xl border border-white/10 bg-black/15 px-4 py-3 text-sm text-stone-200"> <div class="flex items-center justify-between border border-stone-200 bg-[#fcfbf8] px-4 py-3 text-sm text-stone-700">
<span>Subtotal net</span> <span>Subtotal net</span>
<span class="font-semibold text-stone-50">{ moneyWithCurrency(data.Cart.Subtotal, cartCurrencySign(data), cartCurrencyCode(data)) }</span> <span class="font-semibold text-stone-900">{ moneyWithCurrency(data.Cart.Subtotal, cartCurrencySign(data), cartCurrencyCode(data)) }</span>
</div> </div>
<div class="flex items-center justify-between rounded-[1.4rem] border border-amber-300/20 bg-amber-300/10 px-5 py-4 text-lg font-semibold text-stone-50"> <div class="flex items-center justify-between border border-amber-200 bg-[#fff7e7] px-5 py-4 text-lg font-semibold text-stone-900">
<span>Subtotal gross</span> <span>Subtotal gross</span>
<span>{ moneyWithCurrency(data.Cart.SubtotalTaxIncl, cartCurrencySign(data), cartCurrencyCode(data)) }</span> <span>{ moneyWithCurrency(data.Cart.SubtotalTaxIncl, cartCurrencySign(data), cartCurrencyCode(data)) }</span>
</div> </div>
</div> </div>
<a class="mt-8 inline-flex w-full items-center justify-center rounded-full bg-amber-300 px-5 py-3.5 text-sm font-semibold uppercase tracking-[0.22em] text-stone-950 transition hover:bg-amber-200" href={ data.ShopBaseURL + "/order" }> <a class="mt-8 inline-flex w-full items-center justify-center bg-amber-500 px-5 py-3.5 text-sm font-semibold uppercase tracking-[0.22em] text-white transition hover:bg-amber-600" href={ data.ShopBaseURL + "/order" }>
Checkout in PrestaShop Checkout in PrestaShop
</a> </a>
<a class="mt-3 inline-flex w-full items-center justify-center rounded-full border border-white/10 px-5 py-3 text-xs font-semibold uppercase tracking-[0.24em] text-stone-200 transition hover:border-amber-300/40 hover:text-stone-50" href="/"> <a class="mt-3 inline-flex w-full items-center justify-center border border-stone-300 px-5 py-3 text-xs font-semibold uppercase tracking-[0.24em] text-stone-700 transition hover:border-amber-500 hover:text-amber-600" href="/">
Continue browsing Continue browsing
</a> </a>
</div> </div>
templates/cart_templ.go
+99 -122
View File
@@ -47,45 +47,45 @@ func CartPage(data viewmodel.CartPageData, cssPath string, jsPath string) templ.
}() }()
} }
ctx = templ.InitializeContext(ctx) ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<main class=\"min-h-screen overflow-hidden bg-[radial-gradient(circle_at_top,_rgba(245,158,11,0.22),_transparent_34%),radial-gradient(circle_at_bottom_left,_rgba(120,53,15,0.22),_transparent_36%),linear-gradient(180deg,#0c0a09,#1c1917)]\"><div class=\"pointer-events-none absolute inset-x-0 top-0 h-72 bg-[linear-gradient(145deg,rgba(251,191,36,0.12),transparent_58%)]\"></div><div class=\"mx-auto flex w-full max-w-[104rem] flex-col gap-10 px-6 py-10 lg:px-8\"><header class=\"relative overflow-hidden rounded-[2.2rem] border border-amber-500/20 bg-[linear-gradient(135deg,rgba(28,25,23,0.96),rgba(120,53,15,0.34))] p-8 shadow-[0_32px_120px_rgba(41,24,10,0.48)] lg:p-10\"><div class=\"absolute -right-14 top-[-3.5rem] h-44 w-44 rounded-full bg-amber-300/10 blur-3xl\"></div><div class=\"absolute bottom-[-4rem] left-[-2rem] h-40 w-40 rounded-full bg-orange-500/10 blur-3xl\"></div><div class=\"relative flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between\"><div class=\"max-w-2xl\"><p class=\"text-xs uppercase tracking-[0.38em] text-amber-300/80\">Cart overview</p><h1 class=\"mt-4 font-serif text-4xl text-stone-50 lg:text-5xl\">Everything ready for checkout.</h1><p class=\"mt-4 max-w-xl text-sm leading-7 text-stone-300 lg:text-base\">Review quantities, adjust variants, and keep the final order state visible before handing off checkout to PrestaShop.</p></div><div class=\"grid gap-3 sm:grid-cols-2 lg:min-w-[20rem]\"><div class=\"rounded-[1.4rem] border border-white/10 bg-white/5 px-5 py-4 backdrop-blur\"><p class=\"text-[0.68rem] uppercase tracking-[0.28em] text-stone-500\">Line items</p><p class=\"mt-2 text-3xl font-semibold text-stone-50\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<main class=\"min-h-screen bg-[#fdfbf7]\"><div class=\"site-container flex flex-col gap-8 py-6 sm:py-8 lg:py-10\"><header class=\"border-b border-stone-200 pb-6\"><div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\"><div class=\"max-w-3xl\"><p class=\"text-[0.72rem] font-semibold uppercase tracking-[0.26em] text-stone-400\">Cart overview</p><h1 class=\"mt-4 text-3xl font-medium text-stone-800 sm:text-[2.5rem]\">Everything ready for checkout.</h1><p class=\"mt-4 max-w-2xl text-sm leading-7 text-stone-500\">Review quantities, adjust line items, and confirm the final order state before checkout continues in PrestaShop.</p></div><div class=\"grid gap-3 sm:grid-cols-2 lg:min-w-[20rem]\"><div class=\"border border-stone-200 bg-white px-5 py-4 shadow-[0_12px_30px_rgba(20,33,61,0.05)]\"><p class=\"text-[0.68rem] uppercase tracking-[0.28em] text-stone-500\">Line items</p><p class=\"mt-2 text-3xl font-semibold text-stone-900\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var3 string var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", len(data.Cart.Items))) templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", len(data.Cart.Items)))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 26, Col: 102} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 23, Col: 103}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</p></div><div class=\"rounded-[1.4rem] border border-amber-400/20 bg-amber-300/10 px-5 py-4 backdrop-blur\"><p class=\"text-[0.68rem] uppercase tracking-[0.28em] text-amber-100/80\">Units total</p><p class=\"mt-2 text-3xl font-semibold text-stone-50\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</p></div><div class=\"border border-stone-200 bg-[#fff7e7] px-5 py-4 shadow-[0_12px_30px_rgba(20,33,61,0.05)]\"><p class=\"text-[0.68rem] uppercase tracking-[0.28em] text-stone-500\">Units total</p><p class=\"mt-2 text-3xl font-semibold text-stone-900\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var4 string var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", data.Cart.TotalItems)) templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", data.Cart.TotalItems))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 30, Col: 102} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 27, Col: 103}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</p></div></div></div><div class=\"relative mt-8 flex flex-wrap items-center gap-3 text-sm text-stone-300\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</p></div></div></div><div class=\"mt-6 flex flex-wrap items-center gap-3 text-sm text-stone-500\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
if data.Customer != nil { if data.Customer != nil {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<span class=\"rounded-full border border-white/10 bg-black/15 px-4 py-2\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<span class=\"border border-stone-200 bg-white px-4 py-2\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var5 string var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%s %s", data.Customer.FirstName, data.Customer.LastName)) templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%s %s", data.Customer.FirstName, data.Customer.LastName))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 36, Col: 150} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 33, Col: 135}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -96,30 +96,30 @@ func CartPage(data viewmodel.CartPageData, cssPath string, jsPath string) templ.
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} else { } else {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<span class=\"rounded-full border border-white/10 bg-black/15 px-4 py-2\">Guest session</span> ") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<span class=\"border border-stone-200 bg-white px-4 py-2\">Guest session</span> ")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<span class=\"rounded-full border border-white/10 bg-black/15 px-4 py-2\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<span class=\"border border-stone-200 bg-white px-4 py-2\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var6 string var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs("Subtotal " + moneyWithCurrency(data.Cart.SubtotalTaxIncl, cartCurrencySign(data), cartCurrencyCode(data))) templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs("Subtotal " + moneyWithCurrency(data.Cart.SubtotalTaxIncl, cartCurrencySign(data), cartCurrencyCode(data)))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 40, Col: 186} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 37, Col: 171}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</span></div></header><section class=\"grid gap-8 xl:grid-cols-[minmax(0,1.55fr)_24rem]\"><div class=\"rounded-[2rem] border border-stone-800 bg-stone-900/72 p-5 shadow-[0_24px_80px_rgba(0,0,0,0.35)] lg:p-6\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</span></div></header><section class=\"grid gap-8 xl:grid-cols-[minmax(0,1.55fr)_24rem]\"><div class=\"border border-stone-200 bg-white p-5 shadow-[0_18px_42px_rgba(20,33,61,0.06)] lg:p-6\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
if len(data.Cart.Items) == 0 { if len(data.Cart.Items) == 0 {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<div class=\"rounded-[1.75rem] border border-dashed border-amber-400/30 bg-[linear-gradient(180deg,rgba(245,158,11,0.08),rgba(28,25,23,0.32))] p-12 text-center\"><p class=\"text-sm uppercase tracking-[0.28em] text-amber-300\">Empty</p><p class=\"mt-4 text-3xl font-semibold text-stone-50\">Your cart is empty.</p><p class=\"mx-auto mt-3 max-w-md text-sm leading-7 text-stone-300\">Browse categories or return to a product page to add items and build a full order before checkout.</p></div>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<div class=\"border border-dashed border-stone-300 bg-[#fcfbf8] p-12 text-center\"><p class=\"text-sm uppercase tracking-[0.28em] text-stone-400\">Empty</p><p class=\"mt-4 text-3xl font-semibold text-stone-900\">Your cart is empty.</p><p class=\"mx-auto mt-3 max-w-md text-sm leading-7 text-stone-500\">Browse categories or return to a product page to add items and build a full order before checkout.</p></div>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -129,19 +129,19 @@ func CartPage(data viewmodel.CartPageData, cssPath string, jsPath string) templ.
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
for _, item := range data.Cart.Items { for _, item := range data.Cart.Items {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<article class=\"group overflow-hidden rounded-[1.7rem] border border-stone-800 bg-[linear-gradient(180deg,rgba(41,37,36,0.88),rgba(28,25,23,0.96))] p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] transition duration-300 hover:border-amber-400/30 hover:bg-[linear-gradient(180deg,rgba(120,53,15,0.22),rgba(28,25,23,0.98))] md:p-6\"><div class=\"flex flex-col gap-5 md:flex-row md:items-start md:justify-between\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<article class=\"border border-stone-200 bg-[#fffdfa] p-5 transition hover:border-amber-400/60 md:p-6\"><div class=\"flex flex-col gap-5 md:flex-row md:items-start md:justify-between\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
if item.ImageURL != "" { if item.ImageURL != "" {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<div class=\"overflow-hidden rounded-[1.35rem] border border-stone-800 bg-stone-950/70 shadow-[0_16px_40px_rgba(0,0,0,0.24)] md:w-32 md:shrink-0\"><img class=\"block h-32 w-full object-cover\" src=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<div class=\"flex overflow-hidden border border-stone-200 bg-white md:w-32 md:shrink-0 md:items-center md:justify-center\"><img class=\"block h-32 w-full object-contain\" src=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var7 string var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(item.ImageURL) templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(item.ImageURL)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 63, Col: 76} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 60, Col: 78}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -154,7 +154,7 @@ func CartPage(data viewmodel.CartPageData, cssPath string, jsPath string) templ.
var templ_7745c5c3_Var8 string var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(item.Name) templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(item.Name)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 63, Col: 94} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 60, Col: 96}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -165,19 +165,19 @@ func CartPage(data viewmodel.CartPageData, cssPath string, jsPath string) templ.
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<div class=\"min-w-0 flex-1\"><div class=\"flex flex-wrap items-center gap-2\"><p class=\"text-[0.68rem] uppercase tracking-[0.3em] text-amber-300\">Product</p>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<div class=\"min-w-0 flex-1\"><div class=\"flex flex-wrap items-center gap-2\"><p class=\"text-[0.68rem] uppercase tracking-[0.3em] text-stone-400\">Product</p>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
if cartItemAttributeLabel(item) != "" { if cartItemAttributeLabel(item) != "" {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<span class=\"rounded-full border border-amber-300/20 bg-amber-300/10 px-2.5 py-1 text-[0.65rem] uppercase tracking-[0.16em] text-amber-100/80\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<span class=\"border border-amber-200 bg-[#fff7e7] px-2.5 py-1 text-[0.65rem] uppercase tracking-[0.16em] text-amber-700\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var9 string var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(cartItemAttributeLabel(item)) templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(cartItemAttributeLabel(item))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 70, Col: 187} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 67, Col: 165}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -193,14 +193,14 @@ func CartPage(data viewmodel.CartPageData, cssPath string, jsPath string) templ.
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
if item.URL != "" { if item.URL != "" {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<a class=\"mt-3 block truncate text-2xl font-semibold text-stone-50 underline-offset-4 transition group-hover:text-amber-100 hover:underline\" href=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<a class=\"mt-3 block truncate text-2xl font-semibold text-stone-900 underline-offset-4 transition hover:text-amber-600 hover:underline\" href=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var10 templ.SafeURL var templ_7745c5c3_Var10 templ.SafeURL
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL) templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 74, Col: 169} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 71, Col: 164}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -213,7 +213,7 @@ func CartPage(data viewmodel.CartPageData, cssPath string, jsPath string) templ.
var templ_7745c5c3_Var11 string var templ_7745c5c3_Var11 string
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(item.Name) templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(item.Name)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 74, Col: 183} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 71, Col: 178}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -224,14 +224,14 @@ func CartPage(data viewmodel.CartPageData, cssPath string, jsPath string) templ.
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} else { } else {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<h2 class=\"mt-3 text-2xl font-semibold text-stone-50\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<h2 class=\"mt-3 text-2xl font-semibold text-stone-900\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var12 string var templ_7745c5c3_Var12 string
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(item.Name) templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(item.Name)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 76, Col: 78} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 73, Col: 79}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -242,313 +242,290 @@ func CartPage(data viewmodel.CartPageData, cssPath string, jsPath string) templ.
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "<div class=\"mt-4 flex flex-wrap gap-2 text-xs text-stone-400\"><span class=\"rounded-full border border-white/10 bg-black/20 px-3 py-1.5\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "<div class=\"mt-4 flex flex-wrap gap-2 text-xs text-stone-500\"><span class=\"border border-stone-200 bg-white px-3 py-1.5\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var13 string var templ_7745c5c3_Var13 string
templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("Qty %d", item.Quantity)) templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("Qty %d", item.Quantity))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 79, Col: 125} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 76, Col: 110}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</span> <span class=\"rounded-full border border-white/10 bg-black/20 px-3 py-1.5\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</span> <span class=\"border border-stone-200 bg-white px-3 py-1.5\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var14 string var templ_7745c5c3_Var14 string
templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs("Net " + moneyWithCurrency(item.UnitPrice, item.CurrencySign, item.CurrencyCode)) templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs("Net " + moneyWithCurrency(item.UnitPrice, item.CurrencySign, item.CurrencyCode))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 80, Col: 169} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 77, Col: 154}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</span> <span class=\"rounded-full border border-white/10 bg-black/20 px-3 py-1.5\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</span> <span class=\"border border-stone-200 bg-white px-3 py-1.5\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var15 string var templ_7745c5c3_Var15 string
templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(taxLabel(item.TaxRate)) templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(taxLabel(item.TaxRate))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 81, Col: 111} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 78, Col: 96}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "</span></div>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "</span></div></div><div class=\"border border-stone-200 bg-white px-4 py-4 text-left md:min-w-[11rem] md:text-right\"><p class=\"text-[0.68rem] uppercase tracking-[0.24em] text-stone-500\">Line total</p><p class=\"mt-2 text-2xl font-semibold text-stone-900\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if cartItemAttributeLabel(item) != "" {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "<p class=\"mt-3 text-sm text-stone-300\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var16 string var templ_7745c5c3_Var16 string
templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(cartItemAttributeLabel(item)) templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(moneyWithCurrency(item.LineTotalTaxIncl, item.CurrencySign, item.CurrencyCode))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 84, Col: 82} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 83, Col: 146}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</p>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</p><p class=\"mt-1 text-xs uppercase tracking-[0.2em] text-stone-500\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "</div><div class=\"rounded-[1.25rem] border border-stone-800 bg-stone-950/70 px-4 py-4 text-left md:min-w-[11rem] md:text-right\"><p class=\"text-[0.68rem] uppercase tracking-[0.24em] text-stone-500\">Line total</p><p class=\"mt-2 text-2xl font-semibold text-stone-50\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var17 string var templ_7745c5c3_Var17 string
templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(moneyWithCurrency(item.LineTotalTaxIncl, item.CurrencySign, item.CurrencyCode)) templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(conversionRateLabel(item.ConversionRate, item.CurrencyCode))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 89, Col: 145} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 84, Col: 139}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "</p><p class=\"mt-1 text-xs uppercase tracking-[0.2em] text-stone-500\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</p></div></div><div class=\"mt-6 flex flex-col gap-3 border-t border-stone-200 pt-5 md:flex-row md:items-center md:justify-between\"><form class=\"flex flex-wrap items-center gap-3\" method=\"post\" action=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var18 string var templ_7745c5c3_Var18 templ.SafeURL
templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(conversionRateLabel(item.ConversionRate, item.CurrencyCode)) templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinURLErrs(localizedCartPath(data.Locale))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 90, Col: 139} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 88, Col: 112}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "</p></div></div><div class=\"mt-6 flex flex-col gap-3 border-t border-stone-800 pt-5 md:flex-row md:items-center md:justify-between\"><form class=\"flex flex-wrap items-center gap-3\" method=\"post\" action=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "\"><input type=\"hidden\" name=\"action\" value=\"update\"> <input type=\"hidden\" name=\"id_product\" value=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var19 templ.SafeURL var templ_7745c5c3_Var19 string
templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinURLErrs(localizedCartPath(data.Locale)) templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", item.ProductID))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 94, Col: 112} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 90, Col: 92}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "\"><input type=\"hidden\" name=\"action\" value=\"update\"> <input type=\"hidden\" name=\"id_product\" value=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "\"> <input type=\"hidden\" name=\"id_product_attribute\" value=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var20 string var templ_7745c5c3_Var20 string
templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", item.ProductID)) templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", item.ProductAttributeID))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 96, Col: 92} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 91, Col: 111}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "\"> <input type=\"hidden\" name=\"id_product_attribute\" value=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "\"> <input type=\"hidden\" name=\"id_customization\" value=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var21 string var templ_7745c5c3_Var21 string
templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", item.ProductAttributeID)) templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", item.CustomizationID))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 97, Col: 111} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 92, Col: 104}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "\"> <input type=\"hidden\" name=\"id_customization\" value=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "\"> <label class=\"text-[0.75rem] uppercase tracking-[0.24em] text-stone-400\" for=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var22 string var templ_7745c5c3_Var22 string
templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", item.CustomizationID)) templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("qty-%d-%d", item.ProductID, item.ProductAttributeID))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 98, Col: 104} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 93, Col: 156}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "\"> <label class=\"text-[0.75rem] uppercase tracking-[0.24em] text-stone-400\" for=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "\">Quantity</label><div class=\"flex items-center border border-stone-300 bg-white\"><input class=\"w-20 bg-transparent px-4 py-2.5 text-center text-sm text-stone-900 outline-none ring-0\" id=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var23 string var templ_7745c5c3_Var23 string
templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("qty-%d-%d", item.ProductID, item.ProductAttributeID)) templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("qty-%d-%d", item.ProductID, item.ProductAttributeID))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 99, Col: 156} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 95, Col: 185}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "\">Quantity</label><div class=\"flex items-center overflow-hidden rounded-full border border-stone-700 bg-stone-950\"><input class=\"w-20 bg-transparent px-4 py-2.5 text-center text-sm text-stone-100 outline-none ring-0\" id=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "\" type=\"number\" min=\"1\" name=\"qty\" value=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var24 string var templ_7745c5c3_Var24 string
templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("qty-%d-%d", item.ProductID, item.ProductAttributeID)) templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", item.Quantity))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 101, Col: 185} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 95, Col: 261}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "\" type=\"number\" min=\"1\" name=\"qty\" value=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "\"></div><button class=\"border border-amber-500 bg-amber-500 px-4 py-2.5 text-xs font-semibold uppercase tracking-[0.22em] text-white transition hover:bg-amber-600\" type=\"submit\">Update line</button></form><form method=\"post\" action=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var25 string var templ_7745c5c3_Var25 templ.SafeURL
templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", item.Quantity)) templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinURLErrs(localizedCartPath(data.Locale))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 101, Col: 261} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 101, Col: 70}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "\"></div><button class=\"rounded-full border border-amber-300/40 bg-amber-300/10 px-4 py-2.5 text-xs font-semibold uppercase tracking-[0.22em] text-amber-100 transition hover:bg-amber-300 hover:text-stone-950\" type=\"submit\">Update line</button></form><form method=\"post\" action=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "\"><input type=\"hidden\" name=\"action\" value=\"delete\"> <input type=\"hidden\" name=\"id_product\" value=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var26 templ.SafeURL var templ_7745c5c3_Var26 string
templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinURLErrs(localizedCartPath(data.Locale)) templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", item.ProductID))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 107, Col: 70} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 103, Col: 92}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "\"><input type=\"hidden\" name=\"action\" value=\"delete\"> <input type=\"hidden\" name=\"id_product\" value=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "\"> <input type=\"hidden\" name=\"id_product_attribute\" value=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var27 string var templ_7745c5c3_Var27 string
templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", item.ProductID)) templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", item.ProductAttributeID))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 109, Col: 92} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 104, Col: 111}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "\"> <input type=\"hidden\" name=\"id_product_attribute\" value=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "\"> <input type=\"hidden\" name=\"id_customization\" value=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var28 string var templ_7745c5c3_Var28 string
templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", item.ProductAttributeID)) templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", item.CustomizationID))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 110, Col: 111} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 105, Col: 104}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "\"> <input type=\"hidden\" name=\"id_customization\" value=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "\"> <button class=\"border border-stone-300 bg-white px-4 py-2.5 text-xs font-semibold uppercase tracking-[0.22em] text-stone-700 transition hover:border-rose-300 hover:bg-rose-50 hover:text-rose-700\" type=\"submit\">Remove</button></form></div></article>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "</div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "</div><aside class=\"xl:sticky xl:top-28 xl:self-start\"><div class=\"border border-stone-200 bg-white p-8 shadow-[0_18px_42px_rgba(20,33,61,0.06)]\"><p class=\"text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-stone-400\">Summary</p><p class=\"mt-3 text-sm leading-7 text-stone-500\">A compact snapshot of the current order before checkout moves to the native PrestaShop flow.</p><div class=\"mt-8 space-y-3\"><div class=\"flex items-center justify-between border border-stone-200 bg-[#fcfbf8] px-4 py-3 text-sm text-stone-700\"><span>Total items</span> <span class=\"font-semibold text-stone-900\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var29 string var templ_7745c5c3_Var29 string
templ_7745c5c3_Var29, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", item.CustomizationID)) templ_7745c5c3_Var29, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", data.Cart.TotalItems))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 111, Col: 104} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 124, Col: 93}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var29)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var29))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "\"> <button class=\"rounded-full border border-stone-700 bg-stone-950 px-4 py-2.5 text-xs font-semibold uppercase tracking-[0.22em] text-stone-200 transition hover:border-rose-300/30 hover:bg-rose-300 hover:text-stone-950\" type=\"submit\">Remove</button></form></div></article>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "</span></div><div class=\"flex items-center justify-between border border-stone-200 bg-[#fcfbf8] px-4 py-3 text-sm text-stone-700\"><span>Unique lines</span> <span class=\"font-semibold text-stone-900\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "</div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, "</div><aside class=\"xl:sticky xl:top-8 xl:self-start\"><div class=\"overflow-hidden rounded-[2rem] border border-amber-500/20 bg-[linear-gradient(180deg,rgba(245,158,11,0.12),rgba(28,25,23,0.92)_34%,rgba(28,25,23,0.98))] p-8 shadow-[0_24px_80px_rgba(41,24,10,0.4)]\"><p class=\"text-xs uppercase tracking-[0.3em] text-amber-200\">Summary</p><p class=\"mt-3 text-sm leading-7 text-stone-300\">A compact snapshot of the current order before checkout moves to the native Presta flow.</p><div class=\"mt-8 space-y-3\"><div class=\"flex items-center justify-between rounded-2xl border border-white/10 bg-black/15 px-4 py-3 text-sm text-stone-200\"><span>Total items</span> <span class=\"font-semibold text-stone-50\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var30 string var templ_7745c5c3_Var30 string
templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", data.Cart.TotalItems)) templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", len(data.Cart.Items)))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 130, Col: 92} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 128, Col: 93}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 46, "</span></div><div class=\"flex items-center justify-between rounded-2xl border border-white/10 bg-black/15 px-4 py-3 text-sm text-stone-200\"><span>Unique lines</span> <span class=\"font-semibold text-stone-50\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "</span></div><div class=\"flex items-center justify-between border border-stone-200 bg-[#fcfbf8] px-4 py-3 text-sm text-stone-700\"><span>Subtotal net</span> <span class=\"font-semibold text-stone-900\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var31 string var templ_7745c5c3_Var31 string
templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", len(data.Cart.Items))) templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.JoinStringErrs(moneyWithCurrency(data.Cart.Subtotal, cartCurrencySign(data), cartCurrencyCode(data)))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 134, Col: 92} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 132, Col: 139}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var31)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var31))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 47, "</span></div><div class=\"flex items-center justify-between rounded-2xl border border-white/10 bg-black/15 px-4 py-3 text-sm text-stone-200\"><span>Subtotal net</span> <span class=\"font-semibold text-stone-50\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, "</span></div><div class=\"flex items-center justify-between border border-amber-200 bg-[#fff7e7] px-5 py-4 text-lg font-semibold text-stone-900\"><span>Subtotal gross</span> <span>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var32 string var templ_7745c5c3_Var32 string
templ_7745c5c3_Var32, templ_7745c5c3_Err = templ.JoinStringErrs(moneyWithCurrency(data.Cart.Subtotal, cartCurrencySign(data), cartCurrencyCode(data))) templ_7745c5c3_Var32, templ_7745c5c3_Err = templ.JoinStringErrs(moneyWithCurrency(data.Cart.SubtotalTaxIncl, cartCurrencySign(data), cartCurrencyCode(data)))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 138, Col: 138} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 136, Col: 109}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var32)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var32))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 48, "</span></div><div class=\"flex items-center justify-between rounded-[1.4rem] border border-amber-300/20 bg-amber-300/10 px-5 py-4 text-lg font-semibold text-stone-50\"><span>Subtotal gross</span> <span>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 46, "</span></div></div><a class=\"mt-8 inline-flex w-full items-center justify-center bg-amber-500 px-5 py-3.5 text-sm font-semibold uppercase tracking-[0.22em] text-white transition hover:bg-amber-600\" href=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var33 string var templ_7745c5c3_Var33 templ.SafeURL
templ_7745c5c3_Var33, templ_7745c5c3_Err = templ.JoinStringErrs(moneyWithCurrency(data.Cart.SubtotalTaxIncl, cartCurrencySign(data), cartCurrencyCode(data))) templ_7745c5c3_Var33, templ_7745c5c3_Err = templ.JoinURLErrs(data.ShopBaseURL + "/order")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 142, Col: 109} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 139, Col: 220}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var33)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var33))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 49, "</span></div></div><a class=\"mt-8 inline-flex w-full items-center justify-center rounded-full bg-amber-300 px-5 py-3.5 text-sm font-semibold uppercase tracking-[0.22em] text-stone-950 transition hover:bg-amber-200\" href=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 47, "\">Checkout in PrestaShop</a> <a class=\"mt-3 inline-flex w-full items-center justify-center border border-stone-300 px-5 py-3 text-xs font-semibold uppercase tracking-[0.24em] text-stone-700 transition hover:border-amber-500 hover:text-amber-600\" href=\"/\">Continue browsing</a></div></aside></section></div></main>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var34 templ.SafeURL
templ_7745c5c3_Var34, templ_7745c5c3_Err = templ.JoinURLErrs(data.ShopBaseURL + "/order")
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/cart.templ`, Line: 145, Col: 237}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var34))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 50, "\">Checkout in PrestaShop</a> <a class=\"mt-3 inline-flex w-full items-center justify-center rounded-full border border-white/10 px-5 py-3 text-xs font-semibold uppercase tracking-[0.24em] text-stone-200 transition hover:border-amber-300/40 hover:text-stone-50\" href=\"/\">Continue browsing</a></div></aside></section></div></main>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templates/category.templ
+88 -36
View File
@@ -8,61 +8,113 @@ import (
templ CategoryPage(data viewmodel.CategoryPageData, cssPath string, jsPath string) { templ CategoryPage(data viewmodel.CategoryPageData, cssPath string, jsPath string) {
@Layout(data.Category.Name, cssPath, jsPath, data.Menu, data.Locale, layoutCartItems(data.CartSummary)) { @Layout(data.Category.Name, cssPath, jsPath, data.Menu, data.Locale, layoutCartItems(data.CartSummary)) {
<main class="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(34,197,94,0.18),_transparent_35%),linear-gradient(180deg,#0b1020,#111827)]"> <main class="min-h-screen bg-[#fdfbf7]">
<div class="mx-auto flex w-full max-w-[104rem] flex-col gap-10 px-6 py-10 lg:px-8"> <div class="site-container flex flex-col gap-8 py-6 sm:py-8 lg:py-10">
<header class="rounded-[2rem] border border-emerald-500/20 bg-white/5 p-8 backdrop-blur"> <nav class="rounded-sm bg-[#eceae7] px-4 py-3 text-[0.82rem] text-stone-500 sm:px-5">
<p class="text-xs uppercase tracking-[0.32em] text-emerald-300">Category</p> <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
<h1 class="mt-4 font-serif text-4xl text-white">{ data.Category.Name }</h1> <a class="transition hover:text-amber-600" href={ data.ShopBaseURL }>9b-plus</a>
<div class="mt-4 flex items-center justify-between gap-6 text-sm text-slate-300"> <span>/</span>
<p>{ fmt.Sprintf("Products %d-%d of %d", categoryPageStart(data.Pagination), categoryPageEnd(data.Pagination, len(data.Category.Products)), data.Pagination.TotalItems) }</p> <span>Category</span>
if data.Customer != nil { <span>/</span>
<p>{ fmt.Sprintf("%s %s", data.Customer.FirstName, data.Customer.LastName) }</p> <span class="text-stone-700">{ data.Category.Name }</span>
} else {
<p>Guest session</p>
}
</div> </div>
</nav>
<header class="border-b border-stone-200 pb-6">
<div class="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
<div class="max-w-3xl">
<p class="text-[0.72rem] font-semibold uppercase tracking-[0.26em] text-stone-400">Category</p>
<h1 class="mt-4 text-3xl font-medium uppercase tracking-[0.06em] text-stone-800 sm:text-[2.1rem]">{ data.Category.Name }</h1>
if data.Category.Description != "" { if data.Category.Description != "" {
<div class="prose prose-invert mt-6 max-w-none text-slate-300"> <div class="category-description mt-5 max-w-2xl text-sm leading-7 text-stone-500">
@templ.Raw(data.Category.Description) @templ.Raw(data.Category.Description)
</div> </div>
} }
</div>
if data.Customer != nil {
<div class="text-sm text-stone-500 lg:pt-8">
{ fmt.Sprintf("%s %s", data.Customer.FirstName, data.Customer.LastName) }
</div>
}
</div>
</header> </header>
<section class="grid gap-5 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"> <section class="flex flex-col gap-4 border-y border-stone-200 py-4">
for _, product := range data.Category.Products { <div class="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
<article class="group rounded-[1.75rem] border border-white/10 bg-slate-900/70 p-6 shadow-[0_24px_80px_rgba(0,0,0,0.35)] transition hover:-translate-y-1 hover:border-emerald-400/40"> <div class="flex items-center gap-4">
if product.ImageURL != "" { <button class="inline-flex h-11 w-11 items-center justify-center bg-amber-500 text-xl text-white shadow-[0_8px_18px_rgba(245,158,11,0.28)] transition hover:bg-amber-600" type="button" aria-label="Filters">
<a class="mb-5 block overflow-hidden rounded-[1.25rem] border border-white/10 bg-slate-950/70 shadow-[0_16px_40px_rgba(0,0,0,0.24)]" href={ product.URL }> ≡
<img class="block h-64 w-full object-cover transition duration-500 group-hover:scale-[1.03]" src={ product.ImageURL } alt={ product.Name }/> </button>
<p class="text-sm text-stone-500">
{ fmt.Sprintf("Showing %d-%d of %d products", categoryPageStart(data.Pagination), categoryPageEnd(data.Pagination, len(data.Category.Products)), data.Pagination.TotalItems) }
</p>
</div>
<div class="flex flex-wrap items-center gap-4 sm:justify-end">
if data.Category.Description != "" {
<a class="inline-flex min-h-11 items-center justify-center bg-amber-500 px-6 text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-white shadow-[0_8px_18px_rgba(245,158,11,0.22)] transition hover:bg-amber-600" href="#category-description">
More
</a> </a>
} }
<p class="text-xs uppercase tracking-[0.28em] text-emerald-300">Product</p> <label class="flex min-w-[13rem] flex-col gap-1 text-[0.64rem] font-semibold uppercase tracking-[0.18em] text-stone-400">
<h2 class="mt-3 text-2xl font-semibold text-white">{ product.Name }</h2> <span>Sort by</span>
<p class="mt-4 text-sm leading-7 text-slate-300">{ truncatedPlainTextHTML(product.ShortDescription, 220) }</p> <select class="border-0 border-b border-amber-300 bg-transparent px-0 py-1 text-sm font-medium normal-case tracking-normal text-stone-700 focus:border-amber-500 focus:outline-none focus:ring-0">
<div class="mt-8 flex items-center justify-between gap-4"> <option>Most popular</option>
<div> <option>Price: low to high</option>
<p class="text-2xl font-semibold text-white">{ moneyWithCurrency(product.PriceTaxIncl, product.CurrencySign, product.CurrencyCode) }</p> <option>Price: high to low</option>
<p class="mt-1 text-xs uppercase tracking-[0.2em] text-slate-400">{ taxLabel(product.TaxRate) } · { conversionRateLabel(product.ConversionRate, product.CurrencyCode) }</p> </select>
</label>
</div> </div>
<a class="rounded-full border border-emerald-400/40 px-4 py-2 text-xs font-semibold uppercase tracking-[0.22em] text-emerald-200 transition hover:bg-emerald-300 hover:text-slate-950" href={ product.URL }> </div>
View Product </section>
<section class="grid gap-x-6 gap-y-12 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
for _, product := range data.Category.Products {
<article class="group flex h-full flex-col items-center text-center">
<a class="flex h-full w-full flex-col items-center rounded-sm px-3 pb-4 pt-2 transition hover:-translate-y-1" href={ product.URL }>
if product.ImageURL != "" {
<div class="flex h-[20rem] w-full items-center justify-center overflow-hidden bg-white">
<img class="max-h-[15.5rem] w-auto max-w-[82%] object-contain transition duration-500 group-hover:scale-[1.04]" src={ product.ImageURL } alt={ product.Name }/>
</div>
} else {
<div class="flex h-[20rem] w-full items-center justify-center bg-stone-100 text-5xl font-semibold text-stone-300">
{ productInitial(product.Name) }
</div>
}
<h2 class="mt-6 text-[1.02rem] font-medium leading-6 text-stone-800">{ product.Name }</h2>
if product.ShortDescription != "" {
<p class="mt-3 max-w-[17rem] text-[0.92rem] leading-6 text-stone-400">{ truncatedPlainTextHTML(product.ShortDescription, 90) }</p>
} else if product.EAN13 != "" {
<p class="mt-3 text-[0.92rem] leading-6 text-stone-400">EAN { product.EAN13 }</p>
} else {
<p class="mt-3 text-[0.92rem] leading-6 text-stone-400">{ taxLabel(product.TaxRate) }</p>
}
<div class="mt-5 flex items-baseline gap-2 text-stone-900">
<p class="text-[2rem] font-semibold leading-none">{ moneyWithCurrency(product.PriceTaxIncl, product.CurrencySign, product.CurrencyCode) }</p>
</div>
<p class="mt-3 text-[0.72rem] uppercase tracking-[0.18em] text-stone-400">{ conversionRateLabel(product.ConversionRate, product.CurrencyCode) }</p>
</a> </a>
</div>
</article> </article>
} }
</section> </section>
if data.Pagination.TotalPages > 1 {
<nav class="flex flex-col items-center justify-between gap-4 rounded-[1.75rem] border border-white/10 bg-slate-950/50 px-6 py-5 text-sm text-slate-300 md:flex-row"> if data.Category.Description != "" {
<div> <section class="rounded-sm border border-stone-200 bg-white px-5 py-6 shadow-[0_12px_30px_rgba(20,33,61,0.05)]" id="category-description">
<p class="text-xs uppercase tracking-[0.24em] text-emerald-300">Page</p> <p class="text-[0.7rem] font-semibold uppercase tracking-[0.22em] text-stone-400">More about this category</p>
<p class="mt-1">{ fmt.Sprintf("%d of %d", data.Pagination.Page, data.Pagination.TotalPages) }</p> <div class="category-description mt-4 max-w-none text-sm leading-7 text-stone-600">
@templ.Raw(data.Category.Description)
</div> </div>
</section>
}
if data.Pagination.TotalPages > 1 {
<nav class="flex flex-col items-center justify-between gap-4 border-t border-stone-200 pt-6 text-sm text-stone-500 md:flex-row">
<p>{ fmt.Sprintf("Page %d of %d", data.Pagination.Page, data.Pagination.TotalPages) }</p>
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
if data.Pagination.PrevURL != "" { if data.Pagination.PrevURL != "" {
<a class="rounded-full border border-white/10 px-4 py-2 font-semibold uppercase tracking-[0.2em] text-slate-200 transition hover:border-emerald-400/40 hover:text-white" href={ data.Pagination.PrevURL }>Previous</a> <a class="inline-flex min-h-11 items-center justify-center border border-stone-300 px-5 font-semibold uppercase tracking-[0.18em] text-stone-700 transition hover:border-amber-500 hover:text-amber-600" href={ data.Pagination.PrevURL }>Previous</a>
} }
if data.Pagination.NextURL != "" { if data.Pagination.NextURL != "" {
<a class="rounded-full border border-emerald-400/40 px-4 py-2 font-semibold uppercase tracking-[0.2em] text-emerald-200 transition hover:bg-emerald-300 hover:text-slate-950" href={ data.Pagination.NextURL }>Next</a> <a class="inline-flex min-h-11 items-center justify-center bg-amber-500 px-5 font-semibold uppercase tracking-[0.18em] text-white transition hover:bg-amber-600" href={ data.Pagination.NextURL }>Next</a>
} }
</div> </div>
</nav> </nav>
templates/category_templ.go
+184 -101
View File
@@ -47,56 +47,59 @@ func CategoryPage(data viewmodel.CategoryPageData, cssPath string, jsPath string
}() }()
} }
ctx = templ.InitializeContext(ctx) ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<main class=\"min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(34,197,94,0.18),_transparent_35%),linear-gradient(180deg,#0b1020,#111827)]\"><div class=\"mx-auto flex w-full max-w-[104rem] flex-col gap-10 px-6 py-10 lg:px-8\"><header class=\"rounded-[2rem] border border-emerald-500/20 bg-white/5 p-8 backdrop-blur\"><p class=\"text-xs uppercase tracking-[0.32em] text-emerald-300\">Category</p><h1 class=\"mt-4 font-serif text-4xl text-white\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<main class=\"min-h-screen bg-[#fdfbf7]\"><div class=\"site-container flex flex-col gap-8 py-6 sm:py-8 lg:py-10\"><nav class=\"rounded-sm bg-[#eceae7] px-4 py-3 text-[0.82rem] text-stone-500 sm:px-5\"><div class=\"flex flex-wrap items-center gap-x-2 gap-y-1\"><a class=\"transition hover:text-amber-600\" href=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var3 string var templ_7745c5c3_Var3 templ.SafeURL
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(data.Category.Name) templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinURLErrs(data.ShopBaseURL)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 15, Col: 73} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 15, Col: 72}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</h1><div class=\"mt-4 flex items-center justify-between gap-6 text-sm text-slate-300\"><p>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\">9b-plus</a> <span>/</span> <span>Category</span> <span>/</span> <span class=\"text-stone-700\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var4 string var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("Products %d-%d of %d", categoryPageStart(data.Pagination), categoryPageEnd(data.Pagination, len(data.Category.Products)), data.Pagination.TotalItems)) templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(data.Category.Name)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 17, Col: 173} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 19, Col: 55}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</p>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</span></div></nav><header class=\"border-b border-stone-200 pb-6\"><div class=\"flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between\"><div class=\"max-w-3xl\"><p class=\"text-[0.72rem] font-semibold uppercase tracking-[0.26em] text-stone-400\">Category</p><h1 class=\"mt-4 text-3xl font-medium uppercase tracking-[0.06em] text-stone-800 sm:text-[2.1rem]\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if data.Customer != nil {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<p>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var5 string var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%s %s", data.Customer.FirstName, data.Customer.LastName)) templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(data.Category.Name)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 19, Col: 81} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 27, Col: 125}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</p>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</h1>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} else { if data.Category.Description != "" {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<p>Guest session</p>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<div class=\"category-description mt-5 max-w-2xl text-sm leading-7 text-stone-500\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.Raw(data.Category.Description).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</div>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -105,12 +108,17 @@ func CategoryPage(data viewmodel.CategoryPageData, cssPath string, jsPath string
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
if data.Category.Description != "" { if data.Customer != nil {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"prose prose-invert mt-6 max-w-none text-slate-300\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"text-sm text-stone-500 lg:pt-8\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templ.Raw(data.Category.Description).Render(ctx, templ_7745c5c3_Buffer) var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%s %s", data.Customer.FirstName, data.Customer.LastName))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 36, Col: 79}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -119,209 +127,284 @@ func CategoryPage(data viewmodel.CategoryPageData, cssPath string, jsPath string
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</header><section class=\"grid gap-5 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</div></header><section class=\"flex flex-col gap-4 border-y border-stone-200 py-4\"><div class=\"flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between\"><div class=\"flex items-center gap-4\"><button class=\"inline-flex h-11 w-11 items-center justify-center bg-amber-500 text-xl text-white shadow-[0_8px_18px_rgba(245,158,11,0.28)] transition hover:bg-amber-600\" type=\"button\" aria-label=\"Filters\">≡</button><p class=\"text-sm text-stone-500\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
for _, product := range data.Category.Products {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<article class=\"group rounded-[1.75rem] border border-white/10 bg-slate-900/70 p-6 shadow-[0_24px_80px_rgba(0,0,0,0.35)] transition hover:-translate-y-1 hover:border-emerald-400/40\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if product.ImageURL != "" {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<a class=\"mb-5 block overflow-hidden rounded-[1.25rem] border border-white/10 bg-slate-950/70 shadow-[0_16px_40px_rgba(0,0,0,0.24)]\" href=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var6 templ.SafeURL
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinURLErrs(product.URL)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 35, Col: 159}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\"><img class=\"block h-64 w-full object-cover transition duration-500 group-hover:scale-[1.03]\" src=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var7 string var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(product.ImageURL) templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("Showing %d-%d of %d products", categoryPageStart(data.Pagination), categoryPageEnd(data.Pagination, len(data.Category.Products)), data.Pagination.TotalItems))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 36, Col: 124} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 49, Col: 180}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "\" alt=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</p></div><div class=\"flex flex-wrap items-center gap-4 sm:justify-end\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var8 string if data.Category.Description != "" {
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(product.Name) templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<a class=\"inline-flex min-h-11 items-center justify-center bg-amber-500 px-6 text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-white shadow-[0_8px_18px_rgba(245,158,11,0.22)] transition hover:bg-amber-600\" href=\"#category-description\">More</a> ")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 36, Col: 145} return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<label class=\"flex min-w-[13rem] flex-col gap-1 text-[0.64rem] font-semibold uppercase tracking-[0.18em] text-stone-400\"><span>Sort by</span> <select class=\"border-0 border-b border-amber-300 bg-transparent px-0 py-1 text-sm font-medium normal-case tracking-normal text-stone-700 focus:border-amber-500 focus:outline-none focus:ring-0\"><option>Most popular</option> <option>Price: low to high</option> <option>Price: high to low</option></select></label></div></div></section><section class=\"grid gap-x-6 gap-y-12 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
for _, product := range data.Category.Products {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "<article class=\"group flex h-full flex-col items-center text-center\"><a class=\"flex h-full w-full flex-col items-center rounded-sm px-3 pb-4 pt-2 transition hover:-translate-y-1\" href=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var8 templ.SafeURL
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinURLErrs(product.URL)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 73, Col: 135}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "\"></a>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} if product.ImageURL != "" {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<p class=\"text-xs uppercase tracking-[0.28em] text-emerald-300\">Product</p><h2 class=\"mt-3 text-2xl font-semibold text-white\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<div class=\"flex h-[20rem] w-full items-center justify-center overflow-hidden bg-white\"><img class=\"max-h-[15.5rem] w-auto max-w-[82%] object-contain transition duration-500 group-hover:scale-[1.04]\" src=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var9 string var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(product.Name) templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(product.ImageURL)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 40, Col: 72} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 76, Col: 144}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</h2><p class=\"mt-4 text-sm leading-7 text-slate-300\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "\" alt=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var10 string var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(truncatedPlainTextHTML(product.ShortDescription, 220)) templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(product.Name)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 41, Col: 111} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 76, Col: 165}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</p><div class=\"mt-8 flex items-center justify-between gap-4\"><div><p class=\"text-2xl font-semibold text-white\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\"></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
} else {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<div class=\"flex h-[20rem] w-full items-center justify-center bg-stone-100 text-5xl font-semibold text-stone-300\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var11 string var templ_7745c5c3_Var11 string
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(moneyWithCurrency(product.PriceTaxIncl, product.CurrencySign, product.CurrencyCode)) templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(productInitial(product.Name))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 44, Col: 139} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 80, Col: 40}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</p><p class=\"mt-1 text-xs uppercase tracking-[0.2em] text-slate-400\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<h2 class=\"mt-6 text-[1.02rem] font-medium leading-6 text-stone-800\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var12 string var templ_7745c5c3_Var12 string
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(taxLabel(product.TaxRate)) templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(product.Name)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 45, Col: 102} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 83, Col: 91}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, " · ") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</h2>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if product.ShortDescription != "" {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "<p class=\"mt-3 max-w-[17rem] text-[0.92rem] leading-6 text-stone-400\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var13 string var templ_7745c5c3_Var13 string
templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(conversionRateLabel(product.ConversionRate, product.CurrencyCode)) templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(truncatedPlainTextHTML(product.ShortDescription, 90))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 45, Col: 175} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 85, Col: 133}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</p></div><a class=\"rounded-full border border-emerald-400/40 px-4 py-2 text-xs font-semibold uppercase tracking-[0.22em] text-emerald-200 transition hover:bg-emerald-300 hover:text-slate-950\" href=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</p>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var14 templ.SafeURL } else if product.EAN13 != "" {
templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinURLErrs(product.URL) templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<p class=\"mt-3 text-[0.92rem] leading-6 text-stone-400\">EAN ")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 47, Col: 209} return templ_7745c5c3_Err
}
var templ_7745c5c3_Var14 string
templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(product.EAN13)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 87, Col: 84}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\">View Product</a></div></article>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</p>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} } else {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</section>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "<p class=\"mt-3 text-[0.92rem] leading-6 text-stone-400\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if data.Pagination.TotalPages > 1 {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "<nav class=\"flex flex-col items-center justify-between gap-4 rounded-[1.75rem] border border-white/10 bg-slate-950/50 px-6 py-5 text-sm text-slate-300 md:flex-row\"><div><p class=\"text-xs uppercase tracking-[0.24em] text-emerald-300\">Page</p><p class=\"mt-1\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var15 string var templ_7745c5c3_Var15 string
templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d of %d", data.Pagination.Page, data.Pagination.TotalPages)) templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(taxLabel(product.TaxRate))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 58, Col: 98} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 89, Col: 92}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</p></div><div class=\"flex items-center gap-3\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</p>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
if data.Pagination.PrevURL != "" { }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "<a class=\"rounded-full border border-white/10 px-4 py-2 font-semibold uppercase tracking-[0.2em] text-slate-200 transition hover:border-emerald-400/40 hover:text-white\" href=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "<div class=\"mt-5 flex items-baseline gap-2 text-stone-900\"><p class=\"text-[2rem] font-semibold leading-none\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var16 templ.SafeURL var templ_7745c5c3_Var16 string
templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinURLErrs(data.Pagination.PrevURL) templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(moneyWithCurrency(product.PriceTaxIncl, product.CurrencySign, product.CurrencyCode))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 62, Col: 207} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 92, Col: 144}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "\">Previous</a> ") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "</p></div><p class=\"mt-3 text-[0.72rem] uppercase tracking-[0.18em] text-stone-400\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} var templ_7745c5c3_Var17 string
if data.Pagination.NextURL != "" { templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(conversionRateLabel(product.ConversionRate, product.CurrencyCode))
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "<a class=\"rounded-full border border-emerald-400/40 px-4 py-2 font-semibold uppercase tracking-[0.2em] text-emerald-200 transition hover:bg-emerald-300 hover:text-slate-950\" href=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 94, Col: 149}
}
var templ_7745c5c3_Var17 templ.SafeURL
templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinURLErrs(data.Pagination.NextURL)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 65, Col: 212}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "\">Next</a>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "</p></a></article>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "</div></nav>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "</section>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if data.Category.Description != "" {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "<section class=\"rounded-sm border border-stone-200 bg-white px-5 py-6 shadow-[0_12px_30px_rgba(20,33,61,0.05)]\" id=\"category-description\"><p class=\"text-[0.7rem] font-semibold uppercase tracking-[0.22em] text-stone-400\">More about this category</p><div class=\"category-description mt-4 max-w-none text-sm leading-7 text-stone-600\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.Raw(data.Category.Description).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "</div></section>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "</div></main>") if data.Pagination.TotalPages > 1 {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "<nav class=\"flex flex-col items-center justify-between gap-4 border-t border-stone-200 pt-6 text-sm text-stone-500 md:flex-row\"><p>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var18 string
templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("Page %d of %d", data.Pagination.Page, data.Pagination.TotalPages))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 111, Col: 89}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "</p><div class=\"flex items-center gap-3\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if data.Pagination.PrevURL != "" {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "<a class=\"inline-flex min-h-11 items-center justify-center border border-stone-300 px-5 font-semibold uppercase tracking-[0.18em] text-stone-700 transition hover:border-amber-500 hover:text-amber-600\" href=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var19 templ.SafeURL
templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinURLErrs(data.Pagination.PrevURL)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 114, Col: 239}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "\">Previous</a> ")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
if data.Pagination.NextURL != "" {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "<a class=\"inline-flex min-h-11 items-center justify-center bg-amber-500 px-5 font-semibold uppercase tracking-[0.18em] text-white transition hover:bg-amber-600\" href=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var20 templ.SafeURL
templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinURLErrs(data.Pagination.NextURL)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/category.templ`, Line: 117, Col: 199}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "\">Next</a>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "</div></nav>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "</div></main>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templates/layout.templ
+7 -2
View File
@@ -9,7 +9,12 @@ templ Layout(title string, cssPath string, jsPath string, menu []pscatalog.MenuI
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>{ title }</title> <title>{ title }</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css"/>
<link rel="stylesheet" href={ cssPath }/> <link rel="stylesheet" href={ cssPath }/>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js" defer></script>
<script type="module" src={ jsPath } defer></script> <script type="module" src={ jsPath } defer></script>
</head> </head>
<body class="min-h-screen text-stone-900 antialiased"> <body class="min-h-screen text-stone-900 antialiased">
@@ -21,9 +26,9 @@ templ Layout(title string, cssPath string, jsPath string, menu []pscatalog.MenuI
<span class="text-base">✉</span> <span class="text-base">✉</span>
<span>info@9b-plus.com</span> <span>info@9b-plus.com</span>
</a> </a>
<a class="inline-flex items-center gap-2 transition hover:text-amber-600" href="tel:+420533312341"> <a class="inline-flex items-center gap-2 transition hover:text-amber-600" href="tel:+48221532426">
<span class="text-base">☎</span> <span class="text-base">☎</span>
<span>+420 533 312 341</span> <span>+48 221 532 426</span>
</a> </a>
</div> </div>
if hasHeaderLocale(locale) { if hasHeaderLocale(locale) {
templates/layout_helpers.go
+3 -3
View File
@@ -18,14 +18,14 @@ func menuListClass(depth int) string {
if depth == 0 { if depth == 0 {
return "flex min-w-0 flex-col gap-2 text-sm" return "flex min-w-0 flex-col gap-2 text-sm"
} }
return "mt-2 space-y-2 border-l border-stone-200 pl-4 text-sm" return "mt-2 space-y-2 border-l border-stone-200/80 pl-4 text-sm"
} }
func menuLinkClass(depth int) string { func menuLinkClass(depth int) string {
if depth == 0 { if depth == 0 {
return "inline-flex items-center gap-2 px-2 py-2 text-[1.02rem] font-medium text-stone-900 transition hover:text-amber-600" return "flex items-center justify-between gap-3 rounded-[1.1rem] border border-stone-200/80 bg-stone-50/90 px-4 py-3 text-[1rem] font-medium text-stone-900 shadow-[0_10px_24px_rgba(20,33,61,0.05)] transition hover:border-amber-300/60 hover:bg-white hover:text-amber-700"
} }
return "inline-flex items-center gap-2 text-stone-700 transition hover:text-amber-600" return "inline-flex items-center gap-2 py-1 text-stone-700 transition hover:text-amber-600"
} }
func menuItemClass(depth int, hasChildren bool) string { func menuItemClass(depth int, hasChildren bool) string {
templates/layout_templ.go
+37 -37
View File
@@ -57,33 +57,33 @@ func Layout(title string, cssPath string, jsPath string, menu []pscatalog.MenuIt
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</title><link rel=\"stylesheet\" href=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</title><link rel=\"preconnect\" href=\"https://fonts.googleapis.com\"><link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin=\"anonymous\"><link href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\"><link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css\"><link rel=\"stylesheet\" href=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var4 templ.SafeURL var templ_7745c5c3_Var4 templ.SafeURL
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinURLErrs(cssPath) templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinURLErrs(cssPath)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 12, Col: 40} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 16, Col: 40}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\"><script type=\"module\" src=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\"><script src=\"https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js\" defer></script><script type=\"module\" src=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var5 string var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(jsPath) templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(jsPath)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 13, Col: 37} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 18, Col: 37}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\" defer></script></head><body class=\"min-h-screen text-stone-900 antialiased\"><header class=\"site-header\"><div class=\"utility-bar\"><div class=\"site-container flex flex-wrap items-center justify-between gap-3 py-3 text-[0.92rem] text-stone-700\"><div class=\"flex flex-wrap items-center gap-x-6 gap-y-2\"><a class=\"inline-flex items-center gap-2 transition hover:text-amber-600\" href=\"mailto:info@9b-plus.com\"><span class=\"text-base\">✉</span> <span>info@9b-plus.com</span></a> <a class=\"inline-flex items-center gap-2 transition hover:text-amber-600\" href=\"tel:+420533312341\"><span class=\"text-base\">☎</span> <span>+420 533 312 341</span></a></div>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\" defer></script></head><body class=\"min-h-screen text-stone-900 antialiased\"><header class=\"site-header\"><div class=\"utility-bar\"><div class=\"site-container flex flex-wrap items-center justify-between gap-3 py-3 text-[0.92rem] text-stone-700\"><div class=\"flex flex-wrap items-center gap-x-6 gap-y-2\"><a class=\"inline-flex items-center gap-2 transition hover:text-amber-600\" href=\"mailto:info@9b-plus.com\"><span class=\"text-base\">✉</span> <span>info@9b-plus.com</span></a> <a class=\"inline-flex items-center gap-2 transition hover:text-amber-600\" href=\"tel:+48221532426\"><span class=\"text-base\">☎</span> <span>+48 221 532 426</span></a></div>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -138,7 +138,7 @@ func Layout(title string, cssPath string, jsPath string, menu []pscatalog.MenuIt
var templ_7745c5c3_Var6 templ.SafeURL var templ_7745c5c3_Var6 templ.SafeURL
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinURLErrs(localizedCartPath(locale)) templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinURLErrs(localizedCartPath(locale))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 60, Col: 68} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 65, Col: 68}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -156,7 +156,7 @@ func Layout(title string, cssPath string, jsPath string, menu []pscatalog.MenuIt
var templ_7745c5c3_Var7 string var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(cartItems) templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(cartItems)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 63, Col: 205} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 68, Col: 205}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -212,7 +212,7 @@ func LocalePicker(title string, current pscatalog.LocaleOption, options []pscata
var templ_7745c5c3_Var9 string var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(current.Label) templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(current.Label)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 80, Col: 20} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 85, Col: 20}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -222,7 +222,7 @@ func LocalePicker(title string, current pscatalog.LocaleOption, options []pscata
var templ_7745c5c3_Var10 string var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(title) templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(title)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 82, Col: 12} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 87, Col: 12}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -241,7 +241,7 @@ func LocalePicker(title string, current pscatalog.LocaleOption, options []pscata
var templ_7745c5c3_Var11 string var templ_7745c5c3_Var11 string
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(current.Code) templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(current.Code)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 86, Col: 52} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 91, Col: 52}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -264,7 +264,7 @@ func LocalePicker(title string, current pscatalog.LocaleOption, options []pscata
var templ_7745c5c3_Var12 string var templ_7745c5c3_Var12 string
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(title) templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(title)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 92, Col: 43} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 97, Col: 43}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -305,7 +305,7 @@ func LocalePicker(title string, current pscatalog.LocaleOption, options []pscata
var templ_7745c5c3_Var15 templ.SafeURL var templ_7745c5c3_Var15 templ.SafeURL
templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinURLErrs(option.URL) templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinURLErrs(option.URL)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 97, Col: 73} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 102, Col: 73}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -318,7 +318,7 @@ func LocalePicker(title string, current pscatalog.LocaleOption, options []pscata
var templ_7745c5c3_Var16 string var templ_7745c5c3_Var16 string
templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(option.Label) templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(option.Label)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 98, Col: 29} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 103, Col: 29}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -336,7 +336,7 @@ func LocalePicker(title string, current pscatalog.LocaleOption, options []pscata
var templ_7745c5c3_Var17 string var templ_7745c5c3_Var17 string
templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(option.Meta) templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(option.Meta)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 100, Col: 62} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 105, Col: 62}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -354,7 +354,7 @@ func LocalePicker(title string, current pscatalog.LocaleOption, options []pscata
var templ_7745c5c3_Var18 string var templ_7745c5c3_Var18 string
templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(option.Code) templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(option.Code)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 102, Col: 62} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 107, Col: 62}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -395,7 +395,7 @@ func LocalePicker(title string, current pscatalog.LocaleOption, options []pscata
var templ_7745c5c3_Var21 string var templ_7745c5c3_Var21 string
templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(option.Label) templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(option.Label)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 107, Col: 29} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 112, Col: 29}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -413,7 +413,7 @@ func LocalePicker(title string, current pscatalog.LocaleOption, options []pscata
var templ_7745c5c3_Var22 string var templ_7745c5c3_Var22 string
templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(option.Meta) templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(option.Meta)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 109, Col: 62} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 114, Col: 62}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -538,7 +538,7 @@ func MenuTree(items []pscatalog.MenuItem, depth int) templ.Component {
var templ_7745c5c3_Var30 templ.SafeURL var templ_7745c5c3_Var30 templ.SafeURL
templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL) templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 125, Col: 53} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 130, Col: 53}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -551,7 +551,7 @@ func MenuTree(items []pscatalog.MenuItem, depth int) templ.Component {
var templ_7745c5c3_Var31 string var templ_7745c5c3_Var31 string
templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.JoinStringErrs(item.Name) templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.JoinStringErrs(item.Name)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 126, Col: 16} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 131, Col: 16}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var31)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var31))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -668,7 +668,7 @@ func MegaMenuBar(items []pscatalog.MenuItem) templ.Component {
var templ_7745c5c3_Var37 templ.SafeURL var templ_7745c5c3_Var37 templ.SafeURL
templ_7745c5c3_Var37, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL) templ_7745c5c3_Var37, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 147, Col: 22} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 152, Col: 22}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var37)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var37))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -681,7 +681,7 @@ func MegaMenuBar(items []pscatalog.MenuItem) templ.Component {
var templ_7745c5c3_Var38 string var templ_7745c5c3_Var38 string
templ_7745c5c3_Var38, templ_7745c5c3_Err = templ.JoinStringErrs("Open " + item.Name + " submenu") templ_7745c5c3_Var38, templ_7745c5c3_Err = templ.JoinStringErrs("Open " + item.Name + " submenu")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 148, Col: 52} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 153, Col: 52}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var38)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var38))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -694,7 +694,7 @@ func MegaMenuBar(items []pscatalog.MenuItem) templ.Component {
var templ_7745c5c3_Var39 string var templ_7745c5c3_Var39 string
templ_7745c5c3_Var39, templ_7745c5c3_Err = templ.JoinStringErrs(menuPanelID(item.ID)) templ_7745c5c3_Var39, templ_7745c5c3_Err = templ.JoinStringErrs(menuPanelID(item.ID))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 150, Col: 43} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 155, Col: 43}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var39)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var39))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -707,7 +707,7 @@ func MegaMenuBar(items []pscatalog.MenuItem) templ.Component {
var templ_7745c5c3_Var40 string var templ_7745c5c3_Var40 string
templ_7745c5c3_Var40, templ_7745c5c3_Err = templ.JoinStringErrs(menuPanelID(item.ID)) templ_7745c5c3_Var40, templ_7745c5c3_Err = templ.JoinStringErrs(menuPanelID(item.ID))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 152, Col: 46} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 157, Col: 46}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var40)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var40))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -720,7 +720,7 @@ func MegaMenuBar(items []pscatalog.MenuItem) templ.Component {
var templ_7745c5c3_Var41 string var templ_7745c5c3_Var41 string
templ_7745c5c3_Var41, templ_7745c5c3_Err = templ.JoinStringErrs(item.Name) templ_7745c5c3_Var41, templ_7745c5c3_Err = templ.JoinStringErrs(item.Name)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 152, Col: 60} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 157, Col: 60}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var41)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var41))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -733,7 +733,7 @@ func MegaMenuBar(items []pscatalog.MenuItem) templ.Component {
var templ_7745c5c3_Var42 string var templ_7745c5c3_Var42 string
templ_7745c5c3_Var42, templ_7745c5c3_Err = templ.JoinStringErrs("Open " + item.Name + " submenu") templ_7745c5c3_Var42, templ_7745c5c3_Err = templ.JoinStringErrs("Open " + item.Name + " submenu")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 156, Col: 52} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 161, Col: 52}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var42)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var42))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -746,7 +746,7 @@ func MegaMenuBar(items []pscatalog.MenuItem) templ.Component {
var templ_7745c5c3_Var43 string var templ_7745c5c3_Var43 string
templ_7745c5c3_Var43, templ_7745c5c3_Err = templ.JoinStringErrs(menuPanelID(item.ID)) templ_7745c5c3_Var43, templ_7745c5c3_Err = templ.JoinStringErrs(menuPanelID(item.ID))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 158, Col: 43} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 163, Col: 43}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var43)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var43))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -759,7 +759,7 @@ func MegaMenuBar(items []pscatalog.MenuItem) templ.Component {
var templ_7745c5c3_Var44 string var templ_7745c5c3_Var44 string
templ_7745c5c3_Var44, templ_7745c5c3_Err = templ.JoinStringErrs(menuPanelID(item.ID)) templ_7745c5c3_Var44, templ_7745c5c3_Err = templ.JoinStringErrs(menuPanelID(item.ID))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 160, Col: 46} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 165, Col: 46}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var44)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var44))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -795,7 +795,7 @@ func MegaMenuBar(items []pscatalog.MenuItem) templ.Component {
var templ_7745c5c3_Var47 templ.SafeURL var templ_7745c5c3_Var47 templ.SafeURL
templ_7745c5c3_Var47, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL) templ_7745c5c3_Var47, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 165, Col: 55} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 170, Col: 55}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var47)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var47))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -808,7 +808,7 @@ func MegaMenuBar(items []pscatalog.MenuItem) templ.Component {
var templ_7745c5c3_Var48 string var templ_7745c5c3_Var48 string
templ_7745c5c3_Var48, templ_7745c5c3_Err = templ.JoinStringErrs(item.Name) templ_7745c5c3_Var48, templ_7745c5c3_Err = templ.JoinStringErrs(item.Name)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 165, Col: 69} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 170, Col: 69}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var48)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var48))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -866,7 +866,7 @@ func MegaMenu(id int64, href string, label string, columns []pscatalog.MenuItem)
var templ_7745c5c3_Var50 string var templ_7745c5c3_Var50 string
templ_7745c5c3_Var50, templ_7745c5c3_Err = templ.JoinStringErrs(menuPanelID(id)) templ_7745c5c3_Var50, templ_7745c5c3_Err = templ.JoinStringErrs(menuPanelID(id))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 176, Col: 51} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 181, Col: 51}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var50)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var50))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -884,7 +884,7 @@ func MegaMenu(id int64, href string, label string, columns []pscatalog.MenuItem)
var templ_7745c5c3_Var51 templ.SafeURL var templ_7745c5c3_Var51 templ.SafeURL
templ_7745c5c3_Var51, templ_7745c5c3_Err = templ.JoinURLErrs(column.URL) templ_7745c5c3_Var51, templ_7745c5c3_Err = templ.JoinURLErrs(column.URL)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 180, Col: 52} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 185, Col: 52}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var51)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var51))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -897,7 +897,7 @@ func MegaMenu(id int64, href string, label string, columns []pscatalog.MenuItem)
var templ_7745c5c3_Var52 string var templ_7745c5c3_Var52 string
templ_7745c5c3_Var52, templ_7745c5c3_Err = templ.JoinStringErrs(column.Name) templ_7745c5c3_Var52, templ_7745c5c3_Err = templ.JoinStringErrs(column.Name)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 180, Col: 68} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 185, Col: 68}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var52)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var52))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -920,7 +920,7 @@ func MegaMenu(id int64, href string, label string, columns []pscatalog.MenuItem)
var templ_7745c5c3_Var53 templ.SafeURL var templ_7745c5c3_Var53 templ.SafeURL
templ_7745c5c3_Var53, templ_7745c5c3_Err = templ.JoinURLErrs(child.URL) templ_7745c5c3_Var53, templ_7745c5c3_Err = templ.JoinURLErrs(child.URL)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 185, Col: 52} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 190, Col: 52}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var53)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var53))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -933,7 +933,7 @@ func MegaMenu(id int64, href string, label string, columns []pscatalog.MenuItem)
var templ_7745c5c3_Var54 string var templ_7745c5c3_Var54 string
templ_7745c5c3_Var54, templ_7745c5c3_Err = templ.JoinStringErrs(child.Name) templ_7745c5c3_Var54, templ_7745c5c3_Err = templ.JoinStringErrs(child.Name)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 185, Col: 67} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 190, Col: 67}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var54)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var54))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -956,7 +956,7 @@ func MegaMenu(id int64, href string, label string, columns []pscatalog.MenuItem)
var templ_7745c5c3_Var55 templ.SafeURL var templ_7745c5c3_Var55 templ.SafeURL
templ_7745c5c3_Var55, templ_7745c5c3_Err = templ.JoinURLErrs(column.URL) templ_7745c5c3_Var55, templ_7745c5c3_Err = templ.JoinURLErrs(column.URL)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 190, Col: 50} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 195, Col: 50}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var55)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var55))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -979,7 +979,7 @@ func MegaMenu(id int64, href string, label string, columns []pscatalog.MenuItem)
var templ_7745c5c3_Var56 templ.SafeURL var templ_7745c5c3_Var56 templ.SafeURL
templ_7745c5c3_Var56, templ_7745c5c3_Err = templ.JoinURLErrs(href) templ_7745c5c3_Var56, templ_7745c5c3_Err = templ.JoinURLErrs(href)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 195, Col: 46} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 200, Col: 46}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var56)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var56))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -992,7 +992,7 @@ func MegaMenu(id int64, href string, label string, columns []pscatalog.MenuItem)
var templ_7745c5c3_Var57 string var templ_7745c5c3_Var57 string
templ_7745c5c3_Var57, templ_7745c5c3_Err = templ.JoinStringErrs(label) templ_7745c5c3_Var57, templ_7745c5c3_Err = templ.JoinStringErrs(label)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 195, Col: 56} return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layout.templ`, Line: 200, Col: 56}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var57)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var57))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
templates/product.templ
+143 -100
View File
@@ -8,11 +8,29 @@ import (
templ ProductPage(data viewmodel.ProductPageData, cssPath string, jsPath string) { templ ProductPage(data viewmodel.ProductPageData, cssPath string, jsPath string) {
@Layout(data.Product.Name, cssPath, jsPath, data.Menu, data.Locale, layoutCartItems(data.CartSummary)) { @Layout(data.Product.Name, cssPath, jsPath, data.Menu, data.Locale, layoutCartItems(data.CartSummary)) {
<main class="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(245,158,11,0.28),_transparent_40%),linear-gradient(180deg,#0c0a09,#1c1917)]"> <main class="min-h-screen bg-[#fdfbf7]">
<div class="mx-auto flex w-full max-w-[104rem] flex-col gap-12 px-6 py-10 lg:px-8"> <div class="site-container flex flex-col gap-8 py-6 sm:py-8 lg:py-10">
<header class="flex items-center justify-between border-b border-stone-800 pb-6"> <nav class="rounded-sm bg-[#eceae7] px-4 py-3 text-[0.82rem] text-stone-500 sm:px-5">
<a class="text-sm uppercase tracking-[0.32em] text-amber-300" href={ data.ShopBaseURL }>Prestashop Proxy</a> <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
<div class="text-right text-sm text-stone-400"> <a class="transition hover:text-amber-600" href={ data.ShopBaseURL }>9b-plus</a>
if data.CategoryURL != "" && data.Product.CategoryName != "" {
<span>/</span>
<a class="transition hover:text-amber-600" href={ data.CategoryURL }>{ data.Product.CategoryName }</a>
}
<span>/</span>
<span class="text-stone-700">{ data.Product.Name }</span>
</div>
</nav>
<header class="flex flex-col gap-4 border-b border-stone-200 pb-6 lg:flex-row lg:items-end lg:justify-between">
<div>
<p class="text-[0.72rem] font-semibold uppercase tracking-[0.26em] text-stone-400">Product</p>
<h1 class="mt-4 text-3xl font-medium text-stone-800 sm:text-[2.6rem]">{ data.Product.Name }</h1>
if data.Product.CategoryName != "" {
<p class="mt-3 text-sm text-stone-500">{ data.Product.CategoryName }</p>
}
</div>
<div class="text-sm text-stone-500 lg:text-right">
if data.Customer != nil { if data.Customer != nil {
<p>{ fmt.Sprintf("%s %s", data.Customer.FirstName, data.Customer.LastName) }</p> <p>{ fmt.Sprintf("%s %s", data.Customer.FirstName, data.Customer.LastName) }</p>
} else { } else {
@@ -24,57 +42,68 @@ templ ProductPage(data viewmodel.ProductPageData, cssPath string, jsPath string)
</div> </div>
</header> </header>
<section class="grid gap-8 lg:grid-cols-[1fr_1fr]"> <section class="grid gap-8 xl:grid-cols-[minmax(0,1.2fr)_25rem]">
<div class="rounded-3xl border border-stone-800 bg-stone-900/70 p-8 shadow-2xl shadow-amber-950/20"> <div class="rounded-sm border border-stone-200 bg-white p-4 shadow-[0_18px_42px_rgba(20,33,61,0.06)] sm:p-6 lg:p-8">
<p class="text-xs uppercase tracking-[0.28em] text-stone-500">Product</p>
if data.Product.ImageURL != "" {
<button class="mt-5 block w-full overflow-hidden rounded-[2rem] border border-stone-800 bg-stone-950/60 text-left shadow-[0_24px_60px_rgba(0,0,0,0.28)]" type="button" data-gallery-open>
<img class="block h-80 w-full object-cover md:h-[28rem]" src={ data.Product.ImageURL } alt={ data.Product.Name } data-product-main-image="" data-default-image={ data.Product.ImageURL }/>
</button>
}
if len(data.Product.GalleryImages) > 1 { if len(data.Product.GalleryImages) > 1 {
<div class="mt-4 rounded-[1.6rem] border border-stone-800 bg-stone-950/55 p-3" data-product-thumb-carousel> <div class="splide" aria-label="Product gallery" data-product-gallery-main>
<div class="flex items-center gap-3"> <div class="splide__track">
<button class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-stone-700 bg-stone-950/80 text-lg text-stone-100 transition hover:border-amber-400/40 hover:text-amber-200" type="button" aria-label="Previous thumbnails" data-product-thumb-prev> <ul class="splide__list">
for i, image := range data.Product.GalleryImages {
if image.URL != "" {
<li class="splide__slide">
<button class="flex min-h-[16rem] w-full items-center justify-center overflow-hidden bg-white text-left sm:min-h-[22rem] lg:min-h-[30rem]" type="button" data-gallery-open="" data-gallery-index={ fmt.Sprintf("%d", i) }>
<img class="max-h-[20rem] w-auto max-w-full object-contain sm:max-h-[28rem] lg:max-h-[34rem]" src={ image.URL } alt={ data.Product.Name } data-product-gallery-image="" data-image-url={ image.URL } data-default-image={ data.Product.ImageURL }/>
</button>
</li>
}
}
</ul>
</div>
</div>
<div class="mt-6 flex items-center gap-3">
<button class="hidden h-11 w-11 shrink-0 items-center justify-center border border-stone-300 bg-white text-lg text-stone-700 transition hover:border-amber-500 hover:text-amber-600 sm:inline-flex" type="button" aria-label="Previous thumbnails" data-product-thumb-prev>
‹ ‹
</button> </button>
<div class="min-w-0 flex-1 overflow-hidden" data-product-thumb-viewport> <div class="min-w-0 flex-1">
<div class="flex gap-3" data-product-thumb-track> <div class="splide" aria-label="Product gallery thumbnails" data-product-gallery-thumbs>
for i, image := range data.Product.GalleryImages { <div class="splide__track">
<ul class="splide__list">
for _, image := range data.Product.GalleryImages {
if image.ThumbURL != "" && image.URL != "" { if image.ThumbURL != "" && image.URL != "" {
<button class="group/thumb shrink-0 overflow-hidden rounded-[1.1rem] border border-stone-800 bg-stone-950/80 transition hover:border-amber-400/40" type="button" data-product-thumb-index={ fmt.Sprintf("%d", i) } data-product-thumb-large={ image.URL } data-product-thumb-large-fallback={ image.URL } data-product-thumb-alt={ data.Product.Name } data-gallery-open=""> <li class="splide__slide border border-stone-200 bg-white">
<img class="block h-20 w-24 object-cover transition duration-300 group-hover/thumb:scale-[1.03]" src={ image.ThumbURL } alt={ data.Product.Name }/> <img class="block h-16 w-16 object-cover sm:h-20 sm:w-20 lg:h-24 lg:w-24" src={ image.ThumbURL } alt={ data.Product.Name }/>
</button> </li>
} }
} }
</ul>
</div> </div>
</div> </div>
<button class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-stone-700 bg-stone-950/80 text-lg text-stone-100 transition hover:border-amber-400/40 hover:text-amber-200" type="button" aria-label="Next thumbnails" data-product-thumb-next> </div>
<button class="hidden h-11 w-11 shrink-0 items-center justify-center border border-stone-300 bg-white text-lg text-stone-700 transition hover:border-amber-500 hover:text-amber-600 sm:inline-flex" type="button" aria-label="Next thumbnails" data-product-thumb-next>
› ›
</button> </button>
</div> </div>
</div> } else if data.Product.ImageURL != "" {
<button class="flex min-h-[16rem] w-full items-center justify-center overflow-hidden bg-white text-left sm:min-h-[22rem] lg:min-h-[30rem]" type="button" data-gallery-open data-gallery-index="0">
<img class="max-h-[20rem] w-auto max-w-full object-contain sm:max-h-[28rem] lg:max-h-[34rem]" src={ data.Product.ImageURL } alt={ data.Product.Name } data-product-main-image="" data-default-image={ data.Product.ImageURL }/>
</button>
} }
if data.CategoryURL != "" && data.Product.CategoryName != "" {
<a class="mt-4 inline-flex text-sm uppercase tracking-[0.24em] text-amber-300 underline underline-offset-4" href={ data.CategoryURL }>{ data.Product.CategoryName }</a>
}
<h1 class="mt-4 font-serif text-4xl text-stone-50">{ data.Product.Name }</h1>
</div> </div>
<aside class="flex flex-col justify-between rounded-3xl border border-amber-500/30 bg-amber-400/10 p-8"> <aside class="rounded-sm border border-stone-200 bg-white p-6 shadow-[0_18px_42px_rgba(20,33,61,0.06)] sm:p-8 xl:sticky xl:top-28 xl:self-start">
<div> <div class="border-b border-stone-200 pb-5">
<p class="text-xs uppercase tracking-[0.28em] text-amber-200">Price</p> <p class="text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-stone-400">Price</p>
<p class="mt-4 text-5xl font-semibold text-stone-50" data-product-price-gross="" data-default-price-gross={ moneyWithCurrency(data.Product.PriceTaxIncl, data.Product.CurrencySign, data.Product.CurrencyCode) }>{ moneyWithCurrency(data.Product.PriceTaxIncl, data.Product.CurrencySign, data.Product.CurrencyCode) }</p> <p class="mt-4 text-4xl font-semibold text-stone-900" data-product-price-gross="" data-default-price-gross={ moneyWithCurrency(data.Product.PriceTaxIncl, data.Product.CurrencySign, data.Product.CurrencyCode) }>{ moneyWithCurrency(data.Product.PriceTaxIncl, data.Product.CurrencySign, data.Product.CurrencyCode) }</p>
<p class="mt-2 text-sm text-stone-300">Including VAT { fmt.Sprintf("%.0f%%", data.Product.TaxRate) }</p> <p class="mt-2 text-sm text-stone-500">Including VAT { fmt.Sprintf("%.0f%%", data.Product.TaxRate) }</p>
<p class="mt-2 text-sm text-stone-300" data-product-price-net="" data-default-price-net={ "Net " + moneyWithCurrency(data.Product.Price, data.Product.CurrencySign, data.Product.CurrencyCode) }>Net { moneyWithCurrency(data.Product.Price, data.Product.CurrencySign, data.Product.CurrencyCode) }</p> <p class="mt-2 text-sm text-stone-500" data-product-price-net="" data-default-price-net={ "Net " + moneyWithCurrency(data.Product.Price, data.Product.CurrencySign, data.Product.CurrencyCode) }>Net { moneyWithCurrency(data.Product.Price, data.Product.CurrencySign, data.Product.CurrencyCode) }</p>
<p class="mt-2 text-sm text-stone-300">{ conversionRateLabel(data.Product.ConversionRate, data.Product.CurrencyCode) }</p> <p class="mt-2 text-sm text-stone-500">{ conversionRateLabel(data.Product.ConversionRate, data.Product.CurrencyCode) }</p>
</div> </div>
<form class="mt-10 flex flex-col gap-4" method="post" action={ localizedCartPath(data.Locale) }> <form class="mt-6 flex flex-col gap-4" method="post" action={ localizedCartPath(data.Locale) }>
<input type="hidden" name="action" value="add"/> <input type="hidden" name="action" value="add"/>
<input type="hidden" name="id_product" value={ fmt.Sprintf("%d", data.Product.ID) }/> <input type="hidden" name="id_product" value={ fmt.Sprintf("%d", data.Product.ID) }/>
if len(data.Product.Combinations) > 0 { if len(data.Product.Combinations) > 0 {
<input type="hidden" name="id_product_attribute" value={ fmt.Sprintf("%d", data.Product.DefaultAttribute) } data-variant-combination/> <input type="hidden" name="id_product_attribute" value={ fmt.Sprintf("%d", data.Product.DefaultAttribute) } data-variant-combination/>
<div class="rounded-[1.5rem] border border-stone-200 bg-stone-50 p-5 text-stone-950 shadow-[0_18px_40px_rgba(0,0,0,0.12)]"> <div class="rounded-sm border border-stone-200 bg-[#fcfbf8] p-5 text-stone-950">
<div class="hidden" aria-hidden="true"> <div class="hidden" aria-hidden="true">
for _, combination := range data.Product.Combinations { for _, combination := range data.Product.Combinations {
<span <span
@@ -84,7 +113,7 @@ templ ProductPage(data viewmodel.ProductPageData, cssPath string, jsPath string)
data-price-net={ "Net " + moneyWithCurrency(combination.Price, data.Product.CurrencySign, data.Product.CurrencyCode) }></span> data-price-net={ "Net " + moneyWithCurrency(combination.Price, data.Product.CurrencySign, data.Product.CurrencyCode) }></span>
} }
</div> </div>
<div class="rounded-[1.25rem] border border-stone-200 bg-stone-100 px-4 py-3"> <div class="border border-stone-200 bg-white px-4 py-3">
<p class="text-[0.72rem] font-medium uppercase tracking-[0.18em] text-stone-500">Current selection</p> <p class="text-[0.72rem] font-medium uppercase tracking-[0.18em] text-stone-500">Current selection</p>
<p class="mt-2 text-base font-medium text-stone-900" data-variant-selection-summary>Choose product options</p> <p class="mt-2 text-base font-medium text-stone-900" data-variant-selection-summary>Choose product options</p>
</div> </div>
@@ -97,11 +126,11 @@ templ ProductPage(data viewmodel.ProductPageData, cssPath string, jsPath string)
</div> </div>
if group.GroupType == "select" { if group.GroupType == "select" {
<div class="relative" data-variant-group={ group.Key } data-variant-select=""> <div class="relative" data-variant-group={ group.Key } data-variant-select="">
<button class="flex w-full items-center justify-between gap-4 border-b border-stone-900/80 px-0 py-2 text-left text-lg text-stone-900 transition hover:text-stone-700" type="button" data-variant-select-trigger="" aria-expanded="false"> <button class="flex w-full items-center justify-between gap-4 border-b border-stone-300 px-0 py-2 text-left text-lg text-stone-900 transition hover:text-stone-700" type="button" data-variant-select-trigger="" aria-expanded="false">
<span data-variant-select-value="">{ selectedVariantOptionValue(group.Options) }</span> <span data-variant-select-value="">{ selectedVariantOptionValue(group.Options) }</span>
<span class="text-base text-stone-700">▼</span> <span class="text-base text-stone-700">▼</span>
</button> </button>
<div class="absolute left-0 right-0 top-full z-20 mt-3 hidden rounded-[1.5rem] border border-stone-200 bg-white p-2 shadow-[0_24px_60px_rgba(0,0,0,0.18)]" data-variant-select-menu=""> <div class="absolute left-0 right-0 top-full z-20 mt-3 hidden border border-stone-200 bg-white p-2 shadow-[0_24px_60px_rgba(0,0,0,0.12)]" data-variant-select-menu="">
for _, option := range group.Options { for _, option := range group.Options {
<button class={ variantSelectOptionClass(option.Selected) } type="button" data-variant-option="" data-variant-presentation="select" data-combination-ids={ option.CombinationIDs } data-selected={ fmt.Sprintf("%t", option.Selected) }> <button class={ variantSelectOptionClass(option.Selected) } type="button" data-variant-option="" data-variant-presentation="select" data-combination-ids={ option.CombinationIDs } data-selected={ fmt.Sprintf("%t", option.Selected) }>
{ option.Value } { option.Value }
@@ -133,132 +162,146 @@ templ ProductPage(data viewmodel.ProductPageData, cssPath string, jsPath string)
</div> </div>
} }
</div> </div>
<p class="mt-5 text-base text-stone-700">Selected combination will be added directly to the PrestaShop cart.</p> <p class="mt-5 text-sm leading-7 text-stone-600">Selected combination will be added directly to the PrestaShop cart.</p>
</div> </div>
} }
<input type="hidden" name="qty" value="1"/> <input type="hidden" name="qty" value="1"/>
<button class="rounded-full bg-amber-300 px-5 py-3 text-sm font-semibold uppercase tracking-[0.2em] text-stone-950 transition hover:bg-amber-200" type="submit"> <button class="min-h-12 bg-amber-500 px-5 py-3 text-sm font-semibold uppercase tracking-[0.2em] text-white transition hover:bg-amber-600" type="submit">
Add to cart Add to cart
</button> </button>
<a class="text-sm text-stone-300 underline underline-offset-4" href={ data.ShopBaseURL + "/login" }>Account and login remain on PrestaShop</a> <a class="text-sm text-stone-500 underline underline-offset-4" href={ data.ShopBaseURL + "/login" }>Account and login remain on PrestaShop</a>
</form> </form>
</aside> </aside>
</section> </section>
if data.Product.ShortDescription != "" { if data.Product.ShortDescription != "" {
<section class="rounded-3xl border border-stone-800 bg-stone-900/70 p-8 shadow-2xl shadow-amber-950/10"> <section class="rounded-sm border border-stone-200 bg-white p-6 shadow-[0_12px_30px_rgba(20,33,61,0.05)] sm:p-8">
<div class="flex flex-col gap-2 border-b border-stone-800 pb-5"> <div class="flex flex-col gap-2 border-b border-stone-200 pb-5">
<p class="text-xs uppercase tracking-[0.28em] text-amber-300">Summary</p> <p class="text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-stone-400">Summary</p>
<h2 class="font-serif text-3xl text-stone-50">At a glance</h2> <h2 class="text-2xl font-medium text-stone-800">At a glance</h2>
</div> </div>
<p class="mt-8 max-w-none text-lg leading-8 text-stone-300">{ plainTextHTML(data.Product.ShortDescription) }</p> <p class="mt-6 max-w-none text-lg leading-8 text-stone-600">{ plainTextHTML(data.Product.ShortDescription) }</p>
</section> </section>
} }
if data.Product.Description != "" { if data.Product.Description != "" {
<section class="rounded-3xl border border-stone-800 bg-stone-900/70 p-8 shadow-2xl shadow-amber-950/10"> <section class="rounded-sm border border-stone-200 bg-white p-6 shadow-[0_12px_30px_rgba(20,33,61,0.05)] sm:p-8">
<div class="flex flex-col gap-2 border-b border-stone-800 pb-5"> <div class="flex flex-col gap-2 border-b border-stone-200 pb-5">
<p class="text-xs uppercase tracking-[0.28em] text-amber-300">Description</p> <p class="text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-stone-400">Description</p>
<h2 class="font-serif text-3xl text-stone-50">About this product</h2> <h2 class="text-2xl font-medium text-stone-800">About this product</h2>
</div> </div>
<div class="prose prose-invert mt-8 max-w-none text-stone-300"> <div class="category-description mt-6 max-w-none text-sm leading-7 text-stone-600">
@templ.Raw(data.Product.Description) @templ.Raw(data.Product.Description)
</div> </div>
</section> </section>
} }
if len(data.Product.Features) > 0 { if len(data.Product.Features) > 0 {
<section class="rounded-3xl border border-stone-800 bg-stone-900/70 p-8 shadow-2xl shadow-amber-950/10"> <section class="rounded-sm border border-stone-200 bg-white p-6 shadow-[0_12px_30px_rgba(20,33,61,0.05)] sm:p-8">
<div class="flex flex-col gap-2 border-b border-stone-800 pb-5"> <div class="flex flex-col gap-2 border-b border-stone-200 pb-5">
<p class="text-xs uppercase tracking-[0.28em] text-amber-300">Features</p> <p class="text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-stone-400">Features</p>
<h2 class="font-serif text-3xl text-stone-50">Product details</h2> <h2 class="text-2xl font-medium text-stone-800">Product details</h2>
</div> </div>
<div class="mt-6 grid gap-3 md:grid-cols-2"> <div class="mt-6 grid gap-3 md:grid-cols-2">
for _, feature := range data.Product.Features { for _, feature := range data.Product.Features {
<div class="rounded-[1.5rem] border border-stone-800 bg-stone-950/60 px-5 py-4"> <div class="border border-stone-200 bg-[#fcfbf8] px-5 py-4">
<p class="text-[0.7rem] uppercase tracking-[0.24em] text-stone-500">{ feature.Name }</p> <p class="text-[0.7rem] uppercase tracking-[0.24em] text-stone-500">{ feature.Name }</p>
<p class="mt-2 text-sm leading-7 text-stone-200">{ plainTextHTML(feature.Value) }</p> <p class="mt-2 text-sm leading-7 text-stone-700">{ plainTextHTML(feature.Value) }</p>
</div> </div>
} }
</div> </div>
</section> </section>
} }
if len(data.Product.Accessories) > 0 { if len(data.Product.Accessories) > 0 {
<section class="rounded-3xl border border-stone-800 bg-stone-900/70 p-8 shadow-2xl shadow-amber-950/10"> <section class="rounded-sm border border-stone-200 bg-white p-6 shadow-[0_12px_30px_rgba(20,33,61,0.05)] sm:p-8">
<div class="flex flex-col gap-2 border-b border-stone-800 pb-5"> <div class="flex flex-col gap-2 border-b border-stone-200 pb-5">
<p class="text-xs uppercase tracking-[0.28em] text-amber-300">Related products</p> <p class="text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-stone-400">Related products</p>
<h2 class="font-serif text-3xl text-stone-50">Accessories</h2> <h2 class="text-2xl font-medium text-stone-800">Accessories</h2>
</div> </div>
<div class="mt-6 grid gap-5 md:grid-cols-2 xl:grid-cols-3"> <div class="mt-8 grid gap-x-6 gap-y-10 md:grid-cols-2 xl:grid-cols-3">
for _, product := range data.Product.Accessories { for _, product := range data.Product.Accessories {
<article class="group rounded-[1.75rem] border border-stone-800 bg-stone-950/55 p-5 shadow-[0_24px_80px_rgba(0,0,0,0.28)] transition hover:-translate-y-1 hover:border-amber-400/40"> <article class="group flex h-full flex-col items-center text-center">
<a class="flex h-full w-full flex-col items-center px-3 pb-4 pt-2 transition hover:-translate-y-1" href={ product.URL }>
if product.ImageURL != "" { if product.ImageURL != "" {
<a class="mb-5 block overflow-hidden rounded-[1.25rem] border border-stone-800 bg-stone-950/80 shadow-[0_16px_40px_rgba(0,0,0,0.24)]" href={ product.URL }> <div class="flex h-[16rem] w-full items-center justify-center overflow-hidden bg-white">
<img class="block h-56 w-full object-cover transition duration-500 group-hover:scale-[1.03]" src={ product.ImageURL } alt={ product.Name }/> <img class="max-h-[12rem] w-auto max-w-[82%] object-contain transition duration-500 group-hover:scale-[1.04]" src={ product.ImageURL } alt={ product.Name }/>
</a> </div>
} }
<p class="text-xs uppercase tracking-[0.28em] text-amber-300">Accessory</p> <h3 class="mt-5 text-[1.02rem] font-medium leading-6 text-stone-800">{ product.Name }</h3>
<h3 class="mt-3 text-2xl font-semibold text-stone-50">{ product.Name }</h3> <p class="mt-3 max-w-[17rem] text-[0.92rem] leading-6 text-stone-400">{ truncatedPlainTextHTML(product.ShortDescription, 90) }</p>
<p class="mt-4 text-sm leading-7 text-stone-300">{ truncatedPlainTextHTML(product.ShortDescription, 180) }</p> <p class="mt-5 text-[1.5rem] font-semibold leading-none text-stone-900">{ moneyWithCurrency(product.PriceTaxIncl, product.CurrencySign, product.CurrencyCode) }</p>
<div class="mt-8 flex items-center justify-between gap-4"> <p class="mt-3 text-[0.72rem] uppercase tracking-[0.18em] text-stone-400">{ conversionRateLabel(product.ConversionRate, product.CurrencyCode) }</p>
<div>
<p class="text-2xl font-semibold text-stone-50">{ moneyWithCurrency(product.PriceTaxIncl, product.CurrencySign, product.CurrencyCode) }</p>
<p class="mt-1 text-xs uppercase tracking-[0.2em] text-stone-500">{ taxLabel(product.TaxRate) } · { conversionRateLabel(product.ConversionRate, product.CurrencyCode) }</p>
</div>
<a class="rounded-full border border-amber-400/40 px-4 py-2 text-xs font-semibold uppercase tracking-[0.22em] text-amber-200 transition hover:bg-amber-300 hover:text-stone-950" href={ product.URL }>
View Product
</a> </a>
</div>
</article> </article>
} }
</div> </div>
</section> </section>
} }
if len(data.Product.GalleryImages) > 0 { if len(data.Product.GalleryImages) > 0 {
<div class="fixed inset-0 z-[70] hidden bg-black/80 px-4 py-6 backdrop-blur-sm" aria-hidden="true" data-gallery-modal> <div class="fixed inset-0 z-[70] hidden bg-black/55 px-3 py-3 backdrop-blur-sm sm:px-4 sm:py-6" aria-hidden="true" data-gallery-modal>
<div class="mx-auto flex h-full w-full max-w-[104rem] flex-col rounded-[2rem] border border-stone-800 bg-[linear-gradient(180deg,rgba(28,25,23,0.98),rgba(12,10,9,0.98))] p-4 shadow-[0_32px_120px_rgba(0,0,0,0.55)] md:p-6"> <div class="mx-auto flex h-full max-h-full w-full max-w-[104rem] flex-col overflow-hidden border border-stone-200 bg-white p-3 shadow-[0_32px_120px_rgba(0,0,0,0.28)] sm:p-4 md:p-6">
<div class="flex items-center justify-between gap-4 border-b border-stone-800 pb-4"> <div class="flex flex-wrap items-center justify-between gap-3 border-b border-stone-200 pb-4">
<div> <div>
<p class="text-xs uppercase tracking-[0.26em] text-amber-300">Gallery</p> <p class="text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-stone-400">Gallery</p>
<p class="mt-1 text-lg font-semibold text-stone-50">{ data.Product.Name }</p> <p class="mt-1 line-clamp-2 text-base font-semibold text-stone-900 sm:text-lg">{ data.Product.Name }</p>
</div> </div>
<button class="rounded-full border border-stone-700 px-4 py-2 text-xs font-semibold uppercase tracking-[0.22em] text-stone-200 transition hover:border-amber-400/40 hover:text-stone-50" type="button" data-gallery-close> <button class="border border-stone-300 px-4 py-2 text-xs font-semibold uppercase tracking-[0.22em] text-stone-700 transition hover:border-amber-500 hover:text-amber-600" type="button" data-gallery-close>
Close Close
</button> </button>
</div> </div>
<div class="mt-5 flex min-h-0 flex-1 flex-col gap-5 lg:flex-row"> <div class="mt-4 flex min-h-0 flex-1 flex-col gap-4 lg:mt-5">
<div class="relative flex min-h-0 flex-1 items-center justify-center overflow-hidden rounded-[1.75rem] border border-stone-800 bg-stone-950/70"> <div class="relative flex min-h-[16rem] flex-1 items-center justify-center overflow-hidden border border-stone-200 bg-[#fcfbf8] sm:min-h-[22rem]">
<img class="max-h-full w-full object-contain" src={ data.Product.GalleryImages[0].URL } alt={ data.Product.Name } data-gallery-main/>
if len(data.Product.GalleryImages) > 1 { if len(data.Product.GalleryImages) > 1 {
<button class="absolute left-4 top-1/2 inline-flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full border border-stone-700 bg-stone-950/75 text-lg text-stone-100 transition hover:border-amber-400/40 hover:text-amber-200" type="button" aria-label="Previous image" data-gallery-prev> <div class="splide w-full" aria-label="Expanded product gallery" data-gallery-main-splide>
<div class="splide__track">
<ul class="splide__list">
for _, image := range data.Product.GalleryImages {
if image.URL != "" {
<li class="splide__slide">
<div class="flex min-h-[16rem] w-full items-center justify-center sm:min-h-[22rem]">
<img class="max-h-[65vh] w-auto max-w-full object-contain" src={ image.URL } alt={ data.Product.Name } data-gallery-image="" data-image-url={ image.URL }/>
</div>
</li>
}
}
</ul>
</div>
</div>
<button class="absolute left-2 top-1/2 inline-flex h-10 w-10 -translate-y-1/2 items-center justify-center border border-stone-300 bg-white text-lg text-stone-700 transition hover:border-amber-500 hover:text-amber-600 sm:left-4 sm:h-11 sm:w-11" type="button" aria-label="Previous image" data-gallery-prev>
‹ ‹
</button> </button>
<button class="absolute right-4 top-1/2 inline-flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full border border-stone-700 bg-stone-950/75 text-lg text-stone-100 transition hover:border-amber-400/40 hover:text-amber-200" type="button" aria-label="Next image" data-gallery-next> <button class="absolute right-2 top-1/2 inline-flex h-10 w-10 -translate-y-1/2 items-center justify-center border border-stone-300 bg-white text-lg text-stone-700 transition hover:border-amber-500 hover:text-amber-600 sm:right-4 sm:h-11 sm:w-11" type="button" aria-label="Next image" data-gallery-next>
› ›
</button> </button>
} else {
<img class="max-h-[65vh] w-auto max-w-full object-contain" src={ data.Product.GalleryImages[0].URL } alt={ data.Product.Name } data-gallery-main/>
} }
</div> </div>
<div class="rounded-[1.6rem] border border-stone-800 bg-stone-950/55 p-3 lg:w-44" data-gallery-thumb-carousel> if len(data.Product.GalleryImages) > 1 {
<div class="flex items-center gap-3 lg:h-full lg:flex-col"> <div class="flex items-center gap-3">
<button class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-stone-700 bg-stone-950/80 text-lg text-stone-100 transition hover:border-amber-400/40 hover:text-amber-200" type="button" aria-label="Previous gallery thumbnails" data-gallery-thumb-prev> <button class="hidden h-11 w-11 shrink-0 items-center justify-center border border-stone-300 bg-white text-lg text-stone-700 transition hover:border-amber-500 hover:text-amber-600 sm:inline-flex" type="button" aria-label="Previous gallery thumbnails" data-gallery-thumb-prev>
‹ ‹
</button> </button>
<div class="min-w-0 flex-1 overflow-hidden lg:w-full" data-gallery-thumb-viewport> <div class="min-w-0 flex-1">
<div class="flex gap-3 lg:flex-col" data-gallery-thumb-track> <div class="splide" aria-label="Expanded gallery thumbnails" data-gallery-thumb-splide>
<div class="splide__track">
<ul class="splide__list">
for _, image := range data.Product.GalleryImages { for _, image := range data.Product.GalleryImages {
if image.ThumbURL != "" && image.URL != "" { if image.ThumbURL != "" && image.URL != "" {
<button class="shrink-0 overflow-hidden rounded-[1.1rem] border border-stone-800 bg-stone-950/80 transition hover:border-amber-400/40" type="button" data-gallery-thumb={ image.URL } data-gallery-alt={ data.Product.Name }> <li class="splide__slide border border-stone-200 bg-white">
<img class="block h-20 w-24 object-cover lg:h-24 lg:w-full" src={ image.ThumbURL } alt={ data.Product.Name }/> <img class="block h-16 w-16 object-cover sm:h-20 sm:w-20 lg:h-24 lg:w-24" src={ image.ThumbURL } alt={ data.Product.Name }/>
</button> </li>
} }
} }
</ul>
</div> </div>
</div> </div>
<button class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-stone-700 bg-stone-950/80 text-lg text-stone-100 transition hover:border-amber-400/40 hover:text-amber-200" type="button" aria-label="Next gallery thumbnails" data-gallery-thumb-next> </div>
<button class="hidden h-11 w-11 shrink-0 items-center justify-center border border-stone-300 bg-white text-lg text-stone-700 transition hover:border-amber-500 hover:text-amber-600 sm:inline-flex" type="button" aria-label="Next gallery thumbnails" data-gallery-thumb-next>
› ›
</button> </button>
</div> </div>
</div> }
</div> </div>
</div> </div>
</div> </div>
templates/product_templ.go
+552 -474
View File
File diff suppressed because it is too large Load Diff
web/dist/app.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
web/dist/app.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
web/src/app.css
+111 -25
View File
@@ -9,14 +9,13 @@
body { body {
font-family: font-family:
"IBM Plex Sans", "Poppins",
"Avenir Next", "Avenir Next",
"Segoe UI", "Segoe UI",
sans-serif; sans-serif;
background: background:
radial-gradient(circle at top left, rgba(241, 196, 110, 0.24), transparent 28%), radial-gradient(circle at top left, rgba(245, 158, 11, 0.12), transparent 24%),
radial-gradient(circle at top right, rgba(157, 217, 210, 0.16), transparent 34%), linear-gradient(180deg, #fffdfa 0%, #faf7f1 100%);
linear-gradient(180deg, #fbfaf6 0%, #f5efe3 55%, #f7f3ea 100%);
@apply text-stone-900; @apply text-stone-900;
} }
@@ -24,9 +23,10 @@
h2, h2,
h3 { h3 {
font-family: font-family:
"Cormorant Garamond", "Poppins",
"IBM Plex Sans", "Avenir Next",
serif; "Segoe UI",
sans-serif;
} }
} }
@@ -36,16 +36,15 @@
} }
.site-header { .site-header {
@apply sticky top-0 z-40 backdrop-blur; @apply sticky top-0 z-40 bg-white/95 backdrop-blur;
} }
.utility-bar { .utility-bar {
background: linear-gradient(90deg, rgba(20, 33, 61, 0.98), rgba(37, 58, 89, 0.94)); @apply border-b border-stone-200 bg-white text-stone-700;
@apply border-b border-white/10 text-stone-100;
} }
.header-locale { .header-locale {
@apply flex w-full flex-wrap items-center justify-start gap-2 text-sm text-stone-100 sm:w-auto sm:justify-end; @apply flex w-full flex-wrap items-center justify-start gap-2 text-sm text-stone-700 sm:w-auto sm:justify-end;
} }
.locale-picker { .locale-picker {
@@ -53,11 +52,11 @@
} }
.locale-picker__summary { .locale-picker__summary {
@apply flex w-full cursor-pointer list-none items-center justify-between gap-2 rounded-full border border-white/0 px-3 py-1.5 text-stone-100 transition hover:border-white/20 hover:bg-white/10 hover:text-white sm:w-auto sm:justify-start; @apply flex w-full cursor-pointer list-none items-center justify-between gap-2 rounded-full border border-stone-200 px-3 py-1.5 text-stone-700 transition hover:border-stone-300 hover:bg-stone-50 hover:text-stone-900 sm:w-auto sm:justify-start;
} }
.locale-picker[open] .locale-picker__summary { .locale-picker[open] .locale-picker__summary {
@apply border-white/20 bg-white/10 text-white; @apply border-stone-300 bg-stone-50 text-stone-900;
} }
.locale-picker__summary::-webkit-details-marker { .locale-picker__summary::-webkit-details-marker {
@@ -71,7 +70,7 @@
.locale-picker__code, .locale-picker__code,
.locale-picker__item-meta, .locale-picker__item-meta,
.locale-picker__chevron { .locale-picker__chevron {
@apply text-[0.74rem] uppercase tracking-[0.16em] text-stone-300/80; @apply text-[0.74rem] uppercase tracking-[0.16em] text-stone-400;
} }
.locale-picker__panel { .locale-picker__panel {
@@ -91,16 +90,15 @@
} }
.main-nav { .main-nav {
background: rgba(255, 251, 245, 0.82); @apply border-b border-stone-200 bg-white shadow-[0_8px_24px_rgba(20,33,61,0.05)];
@apply border-b border-white/60 shadow-[0_10px_30px_rgba(20,33,61,0.08)];
} }
.header-bar { .header-bar {
@apply flex flex-wrap items-center gap-4 py-4 sm:gap-5 sm:py-5 lg:flex-nowrap; @apply flex flex-wrap items-center gap-3 py-3 sm:gap-5 sm:py-5 lg:flex-nowrap;
} }
.brand-mark { .brand-mark {
@apply inline-flex items-end gap-0.5 text-4xl font-black leading-none tracking-tight text-black transition-transform duration-300 hover:-translate-y-0.5 sm:text-5xl; @apply inline-flex items-end gap-0.5 text-4xl font-black leading-none tracking-tight text-black transition-transform duration-300 hover:-translate-y-0.5 sm:text-[3.2rem];
} }
.brand-mark__accent { .brand-mark__accent {
@@ -108,11 +106,11 @@
} }
.menu-toggle { .menu-toggle {
@apply inline-flex h-11 items-center justify-center rounded-full border border-stone-300/70 bg-white/80 px-5 text-xs font-semibold uppercase tracking-[0.28em] text-stone-900 transition hover:border-amber-500 hover:text-amber-600; @apply inline-flex h-11 items-center justify-center border border-stone-300 bg-white px-5 text-[0.68rem] font-semibold uppercase tracking-[0.28em] text-stone-900 shadow-[0_8px_18px_rgba(20,33,61,0.05)] transition hover:border-amber-500 hover:text-amber-600;
} }
.menu-panel { .menu-panel {
@apply order-last w-full rounded-3xl border border-white/70 bg-white/95 p-4 shadow-[0_16px_34px_rgba(20,33,61,0.12)] backdrop-blur lg:order-none lg:rounded-none lg:border-0 lg:bg-transparent lg:p-0 lg:shadow-none; @apply order-last mt-2 w-full rounded-[1.75rem] border border-stone-200 bg-white p-4 shadow-[0_16px_34px_rgba(20,33,61,0.08)] backdrop-blur lg:order-none lg:mt-0 lg:rounded-none lg:border-0 lg:bg-transparent lg:p-0 lg:shadow-none;
} }
.desktop-nav { .desktop-nav {
@@ -120,7 +118,7 @@
} }
.desktop-nav__link { .desktop-nav__link {
@apply inline-flex items-center py-4 text-[1.04rem] font-medium text-stone-800 transition hover:text-amber-600; @apply inline-flex items-center py-4 text-[1rem] font-medium text-stone-800 transition hover:text-amber-600;
} }
.desktop-nav__toggle { .desktop-nav__toggle {
@@ -133,8 +131,8 @@
} }
.mega-menu { .mega-menu {
background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(252, 248, 240, 0.98)); background: linear-gradient(180deg, rgba(255, 253, 250, 0.98), rgba(250, 247, 241, 0.98));
@apply absolute inset-x-0 top-full z-50 border-t border-white/70 shadow-[0_28px_60px_rgba(20,33,61,0.16)] backdrop-blur; @apply absolute inset-x-0 top-full z-50 border-t border-stone-200 shadow-[0_24px_54px_rgba(20,33,61,0.1)] backdrop-blur;
} }
.mega-menu__grid { .mega-menu__grid {
@@ -158,11 +156,60 @@
} }
.header-actions { .header-actions {
@apply ml-0 flex items-center gap-4 text-2xl text-stone-900 lg:ml-auto; @apply order-2 ml-auto flex items-center gap-2 text-2xl text-stone-900 lg:ml-auto lg:gap-3;
} }
.nav-icon { .nav-icon {
@apply flex h-11 w-11 items-center justify-center rounded-full bg-white/70 text-[1.35rem] shadow-[0_10px_24px_rgba(20,33,61,0.08)] transition hover:-translate-y-0.5 hover:text-amber-600; @apply flex h-11 w-11 items-center justify-center rounded-full border border-transparent bg-white text-[1.2rem] shadow-[0_8px_18px_rgba(20,33,61,0.05)] transition hover:-translate-y-0.5 hover:border-stone-200 hover:text-amber-600 sm:text-[1.35rem];
}
[data-product-gallery-main] .splide__track,
[data-gallery-main-splide] .splide__track {
@apply overflow-hidden;
}
[data-product-gallery-thumbs] .splide__slide,
[data-gallery-thumb-splide] .splide__slide {
@apply cursor-pointer opacity-70 transition;
}
[data-product-gallery-thumbs] .splide__slide.is-active,
[data-gallery-thumb-splide] .splide__slide.is-active {
@apply border-amber-500 opacity-100;
}
[data-product-gallery-thumbs] .splide__slide img,
[data-gallery-thumb-splide] .splide__slide img {
@apply block h-full w-full;
}
.category-description {
@apply max-w-none;
}
.category-description p:first-child {
@apply mt-0;
}
.category-description p:last-child {
@apply mb-0;
}
.category-description p + p {
@apply mt-4;
}
.category-description ul,
.category-description ol {
@apply my-4 pl-5;
}
.category-description li + li {
@apply mt-2;
}
.category-description a {
@apply text-amber-600 underline underline-offset-4;
} }
@media (max-width: 1023px) { @media (max-width: 1023px) {
@@ -170,6 +217,45 @@
.mega-menu { .mega-menu {
display: none; display: none;
} }
.utility-bar .site-container {
@apply gap-2 py-2.5;
}
.utility-bar a[href^="mailto:"] {
@apply hidden;
}
.header-locale {
@apply grid w-full grid-cols-2 gap-2;
}
.locale-picker,
.locale-picker__summary {
@apply w-full;
}
.brand-mark {
@apply text-[2.2rem];
}
.header-bar {
@apply gap-y-3;
}
.menu-panel {
@apply max-h-[70vh] overflow-y-auto p-3;
}
}
@media (max-width: 639px) {
.header-actions .nav-icon:first-child {
display: none;
}
.menu-toggle {
@apply px-4;
}
} }
button[type='submit'] { button[type='submit'] {
web/src/app.js
+302 -155
View File
@@ -107,85 +107,221 @@ if (cartButton) {
}); });
} }
const productMainImage = document.querySelector("[data-product-main-image]"); const attachSwipeNavigation = (element, onPrev, onNext, options = {}) => {
const defaultProductImage = productMainImage?.dataset.defaultImage || productMainImage?.getAttribute("src") || ""; if (!element) {
const productThumbCarousel = document.querySelector("[data-product-thumb-carousel]");
const productThumbViewport = productThumbCarousel?.querySelector("[data-product-thumb-viewport]");
const productThumbTrack = productThumbCarousel?.querySelector("[data-product-thumb-track]");
const productThumbPrev = productThumbCarousel?.querySelector("[data-product-thumb-prev]");
const productThumbNext = productThumbCarousel?.querySelector("[data-product-thumb-next]");
const productThumbs = [...document.querySelectorAll("[data-product-thumb-index]")];
if (productMainImage && productThumbCarousel && productThumbViewport && productThumbTrack && productThumbs.length > 0) {
let activeProductThumbIndex = 0;
const updateProductThumbState = () => {
productThumbs.forEach((thumb, index) => {
if (index === activeProductThumbIndex) {
thumb.classList.remove("border-stone-800");
thumb.classList.add("border-amber-400/60", "ring-1", "ring-amber-300/40");
thumb.setAttribute("aria-current", "true");
return; return;
} }
thumb.classList.remove("border-amber-400/60", "ring-1", "ring-amber-300/40");
thumb.classList.add("border-stone-800"); const threshold = options.threshold ?? 48;
thumb.removeAttribute("aria-current"); const getAxis = () => (typeof options.axis === "function" ? options.axis() : options.axis ?? "x");
const allowMouse = options.allowMouse ?? true;
const suppressClickAfterSwipe = options.suppressClickAfterSwipe ?? false;
let pointerId = null;
let startX = 0;
let startY = 0;
let deltaX = 0;
let deltaY = 0;
let moved = false;
let swallowClick = false;
const reset = () => {
pointerId = null;
startX = 0;
startY = 0;
deltaX = 0;
deltaY = 0;
moved = false;
};
element.addEventListener("pointerdown", (event) => {
if (!allowMouse && event.pointerType === "mouse") {
return;
}
if (event.pointerType === "mouse" && event.button !== 0) {
return;
}
pointerId = event.pointerId;
startX = event.clientX;
startY = event.clientY;
deltaX = 0;
deltaY = 0;
moved = false;
}); });
};
const scrollProductThumbIntoView = (index) => { element.addEventListener("pointermove", (event) => {
const thumb = productThumbs[index]; if (event.pointerId !== pointerId) {
thumb?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
};
const showProductThumb = (index) => {
const normalizedIndex = (index + productThumbs.length) % productThumbs.length;
const thumb = productThumbs[normalizedIndex];
const nextSrc = thumb?.dataset.productThumbLarge || thumb?.dataset.productThumbLargeFallback || "";
if (!thumb || !nextSrc) {
return; return;
} }
activeProductThumbIndex = normalizedIndex; deltaX = event.clientX - startX;
productMainImage.setAttribute("src", nextSrc); deltaY = event.clientY - startY;
if (thumb.dataset.productThumbAlt) { if (Math.abs(deltaX) > 6 || Math.abs(deltaY) > 6) {
productMainImage.setAttribute("alt", thumb.dataset.productThumbAlt); moved = true;
} }
updateProductThumbState(); });
scrollProductThumbIntoView(normalizedIndex);
const finish = (event) => {
if (event.pointerId !== pointerId) {
return;
}
const axis = getAxis();
const primaryDelta = axis === "y" ? deltaY : deltaX;
const crossDelta = axis === "y" ? deltaX : deltaY;
if (moved && Math.abs(primaryDelta) >= threshold && Math.abs(primaryDelta) > Math.abs(crossDelta)) {
swallowClick = suppressClickAfterSwipe;
if (primaryDelta > 0) {
onPrev();
} else {
onNext();
}
}
reset();
}; };
const stepProductThumbs = (direction) => { element.addEventListener("pointerup", finish);
showProductThumb(activeProductThumbIndex + direction); element.addEventListener("pointercancel", reset);
element.addEventListener("pointerleave", (event) => {
if (event.pointerId === pointerId && event.pointerType !== "touch") {
finish(event);
}
});
if (suppressClickAfterSwipe) {
element.addEventListener(
"click",
(event) => {
if (!swallowClick) {
return;
}
swallowClick = false;
event.preventDefault();
event.stopPropagation();
},
true,
);
}
};
const attachDragScroll = (element, options = {}) => {
if (!element) {
return;
}
const getAxis = () => (typeof options.axis === "function" ? options.axis() : options.axis ?? "x");
let pointerId = null;
let startPosition = 0;
let startScroll = 0;
let dragging = false;
element.addEventListener("pointerdown", (event) => {
if (event.pointerType === "mouse" && event.button !== 0) {
return;
}
const axis = getAxis();
pointerId = event.pointerId;
startPosition = axis === "y" ? event.clientY : event.clientX;
startScroll = axis === "y" ? element.scrollTop : element.scrollLeft;
dragging = true;
element.setPointerCapture?.(event.pointerId);
});
element.addEventListener("pointermove", (event) => {
if (!dragging || event.pointerId !== pointerId) {
return;
}
const axis = getAxis();
const currentPosition = axis === "y" ? event.clientY : event.clientX;
const delta = currentPosition - startPosition;
if (axis === "y") {
element.scrollTop = startScroll - delta;
} else {
element.scrollLeft = startScroll - delta;
}
});
const stopDragging = (event) => {
if (event.pointerId !== pointerId) {
return;
}
dragging = false;
pointerId = null;
}; };
element.addEventListener("pointerup", stopDragging);
element.addEventListener("pointercancel", stopDragging);
};
const SplideCtor = window.Splide;
const productMainImage = document.querySelector("[data-product-main-image]");
const productGalleryRoot = document.querySelector("[data-product-gallery-main]");
const productGalleryThumbRoot = document.querySelector("[data-product-gallery-thumbs]");
const productThumbPrev = document.querySelector("[data-product-thumb-prev]");
const productThumbNext = document.querySelector("[data-product-thumb-next]");
const productGalleryImages = [...document.querySelectorAll("[data-product-gallery-image]")];
const defaultProductImage = productMainImage?.dataset.defaultImage
|| productGalleryImages[0]?.dataset.imageUrl
|| productMainImage?.getAttribute("src")
|| "";
let productMainSplide = null;
let productThumbSplide = null;
let galleryMainSplide = null;
let galleryThumbSplide = null;
const findImageIndex = (nodes, url) => nodes.findIndex((node) => (node.dataset.imageUrl || node.getAttribute("src") || "") === url);
if (SplideCtor && productGalleryRoot && productGalleryThumbRoot && productGalleryImages.length > 1) {
productMainSplide = new SplideCtor(productGalleryRoot, {
type: "slide",
arrows: false,
pagination: false,
rewind: true,
drag: true,
speed: 520,
});
productThumbSplide = new SplideCtor(productGalleryThumbRoot, {
fixedWidth: 64,
fixedHeight: 64,
gap: 12,
rewind: true,
pagination: false,
arrows: false,
isNavigation: true,
focus: "center",
dragMinThreshold: {
mouse: 4,
touch: 8,
},
breakpoints: {
640: {
fixedWidth: 64,
fixedHeight: 64,
},
1024: {
fixedWidth: 80,
fixedHeight: 80,
},
1280: {
fixedWidth: 96,
fixedHeight: 96,
},
},
});
productMainSplide.sync(productThumbSplide);
productMainSplide.mount();
productThumbSplide.mount();
productThumbPrev?.addEventListener("click", () => { productThumbPrev?.addEventListener("click", () => {
stepProductThumbs(-1); productMainSplide.go("<");
}); });
productThumbNext?.addEventListener("click", () => { productThumbNext?.addEventListener("click", () => {
stepProductThumbs(1); productMainSplide.go(">");
}); });
productThumbs.forEach((thumb, index) => {
thumb.addEventListener("click", () => {
showProductThumb(index);
});
});
const initialIndex = productThumbs.findIndex((thumb) => thumb.dataset.productThumbLarge === productMainImage.getAttribute("src"));
showProductThumb(initialIndex >= 0 ? initialIndex : 0);
productThumbViewport.addEventListener(
"wheel",
(event) => {
if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) {
return;
}
event.preventDefault();
productThumbViewport.scrollBy({ left: event.deltaY, behavior: "smooth" });
},
{ passive: false },
);
} }
const variantPicker = document.querySelector("[data-variant-picker]"); const variantPicker = document.querySelector("[data-variant-picker]");
@@ -390,25 +526,15 @@ if (variantPicker && variantCombinationInput) {
const combinationID = String(matched[0]); const combinationID = String(matched[0]);
variantCombinationInput.value = combinationID; variantCombinationInput.value = combinationID;
const combinationData = combinationImageByID.get(combinationID); const combinationData = combinationImageByID.get(combinationID);
if (productMainImage) {
const nextImage = combinationData?.imageLarge || defaultProductImage; const nextImage = combinationData?.imageLarge || defaultProductImage;
if (nextImage) { if (nextImage) {
if (productMainSplide && productGalleryImages.length > 0) {
const matchingIndex = findImageIndex(productGalleryImages, nextImage);
if (matchingIndex >= 0) {
productMainSplide.go(matchingIndex);
}
} else if (productMainImage) {
productMainImage.setAttribute("src", nextImage); productMainImage.setAttribute("src", nextImage);
const matchingThumbIndex = productThumbs.findIndex((thumb) => thumb.dataset.productThumbLarge === nextImage);
if (matchingThumbIndex >= 0) {
productThumbs.forEach((thumb, index) => {
if (index === matchingThumbIndex) {
thumb.classList.remove("border-stone-800");
thumb.classList.add("border-amber-400/60", "ring-1", "ring-amber-300/40");
thumb.setAttribute("aria-current", "true");
} else {
thumb.classList.remove("border-amber-400/60", "ring-1", "ring-amber-300/40");
thumb.classList.add("border-stone-800");
thumb.removeAttribute("aria-current");
}
});
productThumbs[matchingThumbIndex]?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
}
} }
} }
if (productPriceGross) { if (productPriceGross) {
@@ -504,25 +630,99 @@ const galleryModal = document.querySelector("[data-gallery-modal]");
const galleryMain = galleryModal?.querySelector("[data-gallery-main]"); const galleryMain = galleryModal?.querySelector("[data-gallery-main]");
const galleryOpeners = [...document.querySelectorAll("[data-gallery-open]")]; const galleryOpeners = [...document.querySelectorAll("[data-gallery-open]")];
const galleryClosers = [...document.querySelectorAll("[data-gallery-close]")]; const galleryClosers = [...document.querySelectorAll("[data-gallery-close]")];
const galleryThumbs = [...document.querySelectorAll("[data-gallery-thumb]")]; const galleryMainRoot = galleryModal?.querySelector("[data-gallery-main-splide]");
const galleryThumbRoot = galleryModal?.querySelector("[data-gallery-thumb-splide]");
const galleryImages = [...document.querySelectorAll("[data-gallery-image]")];
const galleryPrev = galleryModal?.querySelector("[data-gallery-prev]"); const galleryPrev = galleryModal?.querySelector("[data-gallery-prev]");
const galleryNext = galleryModal?.querySelector("[data-gallery-next]"); const galleryNext = galleryModal?.querySelector("[data-gallery-next]");
const galleryThumbViewport = galleryModal?.querySelector("[data-gallery-thumb-viewport]");
const galleryThumbPrev = galleryModal?.querySelector("[data-gallery-thumb-prev]"); const galleryThumbPrev = galleryModal?.querySelector("[data-gallery-thumb-prev]");
const galleryThumbNext = galleryModal?.querySelector("[data-gallery-thumb-next]"); const galleryThumbNext = galleryModal?.querySelector("[data-gallery-thumb-next]");
if (galleryModal && galleryMain && galleryOpeners.length > 0) { if (SplideCtor && galleryMainRoot && galleryThumbRoot && galleryImages.length > 1) {
let activeIndex = 0; galleryMainSplide = new SplideCtor(galleryMainRoot, {
type: "slide",
arrows: false,
pagination: false,
rewind: true,
drag: true,
speed: 520,
});
galleryThumbSplide = new SplideCtor(galleryThumbRoot, {
fixedWidth: 64,
fixedHeight: 64,
gap: 12,
rewind: true,
pagination: false,
arrows: false,
isNavigation: true,
focus: "center",
dragMinThreshold: {
mouse: 4,
touch: 8,
},
breakpoints: {
640: {
fixedWidth: 64,
fixedHeight: 64,
},
1024: {
fixedWidth: 80,
fixedHeight: 80,
},
1280: {
fixedWidth: 96,
fixedHeight: 96,
},
},
});
galleryMainSplide.sync(galleryThumbSplide);
galleryMainSplide.mount();
galleryThumbSplide.mount();
}
if (galleryModal && (galleryMain || galleryMainSplide) && galleryOpeners.length > 0) {
let wheelLocked = false; let wheelLocked = false;
const openGallery = () => { const currentProductImageURL = () => {
const productMainImage = document.querySelector("[data-product-main-image]"); if (productMainSplide && productGalleryImages.length > 0) {
const currentMainSrc = productMainImage?.getAttribute("src") || ""; return productGalleryImages[productMainSplide.index]?.dataset.imageUrl || defaultProductImage;
if (currentMainSrc) {
const matchingIndex = galleryThumbs.findIndex((thumb) => thumb.dataset.galleryThumb === currentMainSrc);
if (matchingIndex >= 0) {
showGalleryImage(matchingIndex);
} }
return productMainImage?.getAttribute("src") || defaultProductImage;
};
const showGalleryImage = (index) => {
if (galleryMainSplide && galleryImages.length > 0) {
const normalizedIndex = (index + galleryImages.length) % galleryImages.length;
galleryMainSplide.go(normalizedIndex);
return;
}
if (!galleryMain) {
return;
}
const nextImage = galleryImages[index];
const nextSrc = nextImage?.dataset.imageUrl || "";
if (!nextSrc) {
return;
}
galleryMain.setAttribute("src", nextSrc);
};
const stepGallery = (direction) => {
if (galleryMainSplide) {
galleryMainSplide.go(direction > 0 ? ">" : "<");
return;
}
showGalleryImage(0);
};
const openGallery = (index) => {
const nextIndex = Number.isInteger(index) ? index : findImageIndex(galleryImages, currentProductImageURL());
if (nextIndex >= 0) {
showGalleryImage(nextIndex);
} }
galleryModal.classList.remove("hidden"); galleryModal.classList.remove("hidden");
galleryModal.setAttribute("aria-hidden", "false"); galleryModal.setAttribute("aria-hidden", "false");
@@ -535,61 +735,17 @@ if (galleryModal && galleryMain && galleryOpeners.length > 0) {
document.body.style.overflow = ""; document.body.style.overflow = "";
}; };
const setActiveThumb = (activeThumb) => {
galleryThumbs.forEach((thumb) => {
thumb.classList.remove("border-amber-400/60");
thumb.classList.add("border-stone-800");
});
if (activeThumb) {
activeThumb.classList.remove("border-stone-800");
activeThumb.classList.add("border-amber-400/60");
activeThumb.scrollIntoView({ block: "nearest", inline: "nearest" });
}
};
const showGalleryImage = (index) => {
if (galleryThumbs.length === 0) return;
const normalizedIndex = (index + galleryThumbs.length) % galleryThumbs.length;
const thumb = galleryThumbs[normalizedIndex];
const nextSrc = thumb.dataset.galleryThumb;
const nextAlt = thumb.dataset.galleryAlt || galleryMain.getAttribute("alt") || "";
if (!nextSrc) return;
activeIndex = normalizedIndex;
galleryMain.setAttribute("src", nextSrc);
galleryMain.setAttribute("alt", nextAlt);
setActiveThumb(thumb);
};
const stepGallery = (direction) => {
if (galleryThumbs.length <= 1) return;
showGalleryImage(activeIndex + direction);
};
galleryThumbPrev?.addEventListener("click", () => {
stepGallery(-1);
});
galleryThumbNext?.addEventListener("click", () => {
stepGallery(1);
});
galleryOpeners.forEach((trigger) => { galleryOpeners.forEach((trigger) => {
trigger.addEventListener("click", openGallery); trigger.addEventListener("click", () => {
const index = Number.parseInt(trigger.dataset.galleryIndex || "", 10);
openGallery(Number.isInteger(index) ? index : undefined);
});
}); });
galleryClosers.forEach((trigger) => { galleryClosers.forEach((trigger) => {
trigger.addEventListener("click", closeGallery); trigger.addEventListener("click", closeGallery);
}); });
galleryThumbs.forEach((thumb, index) => {
if (index === 0) {
showGalleryImage(0);
}
thumb.addEventListener("click", () => {
showGalleryImage(index);
});
});
galleryPrev?.addEventListener("click", () => { galleryPrev?.addEventListener("click", () => {
stepGallery(-1); stepGallery(-1);
}); });
@@ -598,22 +754,13 @@ if (galleryModal && galleryMain && galleryOpeners.length > 0) {
stepGallery(1); stepGallery(1);
}); });
galleryThumbViewport?.addEventListener( galleryThumbPrev?.addEventListener("click", () => {
"wheel", galleryMainSplide?.go("<");
(event) => { });
if (window.innerWidth >= 1024) {
event.preventDefault(); galleryThumbNext?.addEventListener("click", () => {
galleryThumbViewport.scrollBy({ top: event.deltaY, behavior: "smooth" }); galleryMainSplide?.go(">");
return; });
}
if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) {
return;
}
event.preventDefault();
galleryThumbViewport.scrollBy({ left: event.deltaY, behavior: "smooth" });
},
{ passive: false },
);
galleryModal.addEventListener("click", (event) => { galleryModal.addEventListener("click", (event) => {
if (event.target === galleryModal) { if (event.target === galleryModal) {
@@ -624,7 +771,7 @@ if (galleryModal && galleryMain && galleryOpeners.length > 0) {
galleryModal.addEventListener( galleryModal.addEventListener(
"wheel", "wheel",
(event) => { (event) => {
if (galleryModal.getAttribute("aria-hidden") !== "false" || galleryThumbs.length <= 1) { if (galleryModal.getAttribute("aria-hidden") !== "false" || !galleryMainSplide) {
return; return;
} }
if (Math.abs(event.deltaY) < 10) { if (Math.abs(event.deltaY) < 10) {