now products have different options, like different parameters

assets/views/shop/show.html

@@ -49,39 +49,77 @@
   </div>
 
   <!-- details -->
-  <div class="space-y-6">
+  {% set fld = "w-full rounded-radius border border-outline bg-surface-alt px-3 py-2 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark" %}
+  {% set btn = "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-radius px-5 py-2 text-sm text-center font-medium tracking-wide transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 border border-primary bg-primary text-on-primary focus-visible:outline-primary dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark" %}
+  <script id="variant-data" type="application/json">{{ variants | json_encode() | safe }}</script>
+  <div class="space-y-6" x-data="productBuy(JSON.parse(document.getElementById('variant-data').textContent))">
     {% if category %}
     <a href="/category/{{ category.slug }}" class="text-sm font-medium text-primary dark:text-primary-dark">{{ category.name }}</a>
     {% endif %}
     <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.name }}</h1>
-    {% if product.on_sale %}
-    <div class="flex items-baseline gap-3">
-      <p class="text-2xl font-semibold text-danger">{{ product.price }} {{ product.currency }}</p>
-      <p class="text-lg text-on-surface/50 line-through dark:text-on-surface-dark/50">{{ product.regular_price }} {{ product.currency }}</p>
-    </div>
-    {% else %}
-    <p class="text-2xl font-semibold text-primary dark:text-primary-dark">{{ product.price }} {{ product.currency }}</p>
-    {% endif %}
 
-    {% if product.description %}
-    <div class="whitespace-pre-line leading-relaxed text-on-surface/80 dark:text-on-surface-dark/80">{{ product.description }}</div>
-    {% endif %}
+    <template x-if="current">
+      <div class="space-y-6">
+        <div class="flex items-baseline gap-3">
+          <p class="text-2xl font-semibold" :class="current.on_sale ? 'text-danger' : 'text-primary dark:text-primary-dark'">
+            <span x-text="current.price"></span> {{ product.currency }}
+          </p>
+          <template x-if="current.on_sale">
+            <p class="text-lg text-on-surface/50 line-through dark:text-on-surface-dark/50"><span x-text="current.regular_price"></span> {{ product.currency }}</p>
+          </template>
+        </div>
 
-    {% if product.stock > 0 %}
-    <form method="post" action="/cart/add" hx-post="/cart/add" hx-swap="none" class="flex flex-wrap items-end gap-3"
-      hx-on::after-request="if (event.detail.successful) toast('{{ t(key='cart-added', lang=lang | default(value='sk')) }}')">
-  {{ ui::csrf_field() }}
-      <input type="hidden" name="product_id" value="{{ product.id }}">
-      <div class="space-y-1.5">
-        <label for="quantity" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="quantity", lang=lang | default(value='sk')) }}</label>
-        {{ ui::input(name="quantity", id="quantity", type="number", value="1", width="w-24", attrs='min="1" max="' ~ product.stock ~ '"') }}
+        {% if product.description %}
+        <div class="whitespace-pre-line leading-relaxed text-on-surface/80 dark:text-on-surface-dark/80">{{ product.description }}</div>
+        {% endif %}
+
+        <!-- variant picker (only when there's a real choice) -->
+        <template x-if="variants.length > 1">
+          <div class="max-w-sm space-y-1.5">
+            <label for="variant-select" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="choose-option", lang=lang | default(value='sk')) }}</label>
+            <select id="variant-select" x-model.number="sel" class="{{ fld }}">
+              <template x-for="(v, i) in variants" :key="v.id">
+                <option :value="i" x-text="(v.label || '—') + ' · ' + v.price + ' {{ product.currency }}' + (v.in_stock ? '' : ' ({{ t(key='out-of-stock', lang=lang | default(value='sk')) }})')"></option>
+              </template>
+            </select>
+          </div>
+        </template>
+
+        <template x-if="current.in_stock">
+          <div class="space-y-2">
+            <form method="post" action="/cart/add" hx-post="/cart/add" hx-swap="none" class="flex flex-wrap items-end gap-3"
+              hx-on::after-request="if (event.detail.successful) toast('{{ t(key='cart-added', lang=lang | default(value='sk')) }}')">
+              {{ ui::csrf_field() }}
+              <input type="hidden" name="variant_id" :value="current.id">
+              <div class="space-y-1.5">
+                <label for="quantity" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="quantity", lang=lang | default(value='sk')) }}</label>
+                <input type="number" id="quantity" name="quantity" value="1" min="1" :max="current.stock" class="{{ fld }} w-24">
+              </div>
+              <button type="submit" class="{{ btn }}">{{ t(key="add-to-cart", lang=lang | default(value='sk')) }}</button>
+            </form>
+            <p class="text-sm text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="in-stock", lang=lang | default(value='sk')) }}: <span x-text="current.stock"></span></p>
+          </div>
+        </template>
+        <template x-if="!current.in_stock">
+          <p class="inline-flex rounded-radius bg-danger/10 px-3 py-2 text-sm font-medium text-danger">{{ t(key="out-of-stock", lang=lang | default(value='sk')) }}</p>
+        </template>
       </div>
-      {{ ui::button(label=t(key="add-to-cart", lang=lang | default(value='sk')), type="submit", size="px-5 py-2 text-sm") }}
-    </form>
-    <p class="text-sm text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="in-stock", lang=lang | default(value='sk')) }}: {{ product.stock }}</p>
-    {% else %}
-    <p class="inline-flex rounded-radius bg-danger/10 px-3 py-2 text-sm font-medium text-danger">{{ t(key="out-of-stock", lang=lang | default(value='sk')) }}</p>
-    {% endif %}
+    </template>
+
+    <template x-if="!current">
+      <p class="inline-flex rounded-radius bg-danger/10 px-3 py-2 text-sm font-medium text-danger">{{ t(key="out-of-stock", lang=lang | default(value='sk')) }}</p>
+    </template>
   </div>
+
+  <script>
+    function productBuy(variants) {
+      return {
+        variants: variants || [],
+        // Default to the first in-stock variant, else the first.
+        sel: Math.max(0, (variants || []).findIndex(v => v.in_stock)),
+        get current() { return this.variants[this.sel] || null; },
+      };
+    }
+  </script>
 </div>
 {% endblock content %}