now products have different options, like different parameters

assets/views/shop/_card.html

@@ -20,21 +20,24 @@
         {% if product.on_sale %}
         <span class="flex flex-col items-end whitespace-nowrap leading-tight">
           <span class="text-sm text-on-surface/50 line-through dark:text-on-surface-dark/50">{{ product.regular_price }} {{ product.currency }}</span>
-          <span class="text-xl font-semibold text-danger"><span class="sr-only">Price</span>{{ product.price }} {{ product.currency }}</span>
+          <span class="text-xl font-semibold text-danger"><span class="sr-only">Price</span>{% if product.has_options %}{{ t(key="from-price", price=product.price, lang=lang | default(value='sk')) }}{% else %}{{ product.price }}{% endif %} {{ product.currency }}</span>
         </span>
         {% else %}
-        <span class="whitespace-nowrap text-xl"><span class="sr-only">Price</span>{{ product.price }} {{ product.currency }}</span>
+        <span class="whitespace-nowrap text-xl"><span class="sr-only">Price</span>{% if product.has_options %}{{ t(key="from-price", price=product.price, lang=lang | default(value='sk')) }}{% else %}{{ product.price }}{% endif %} {{ product.currency }}</span>
         {% endif %}
       </div>
     </div>
   </a>
   <div class="flex flex-col gap-2 p-6 pt-0">
-    {% if product.stock > 0 %}
+    {% if product.has_options %}
+    {# Multiple variants: customer must pick on the product page. #}
+    {{ ui::button(label=t(key="choose-option", lang=lang | default(value='sk')), href="/shop/" ~ product.slug, extra="w-full") }}
+    {% elif product.stock > 0 %}
     <p class="text-xs text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="in-stock", lang=lang | default(value='sk')) }}: {{ product.stock }}</p>
     <form method="post" action="/cart/add" hx-post="/cart/add" hx-swap="none"
       hx-on::after-request="if (event.detail.successful) toast('{{ t(key='cart-added', lang=lang | default(value='sk')) }}')">
   <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
-      <input type="hidden" name="product_id" value="{{ product.id }}">
+      <input type="hidden" name="variant_id" value="{{ product.variant_id }}">
       <input type="hidden" name="quantity" value="1">
       {{ ui::button(label=t(key="add-to-cart", lang=lang | default(value='sk')), type="submit", extra="w-full", icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-3.5"><path fill-rule="evenodd" d="M5 4a3 3 0 0 1 6 0v1h.643a1.5 1.5 0 0 1 1.492 1.35l.7 7A1.5 1.5 0 0 1 12.342 15H3.657a1.5 1.5 0 0 1-1.492-1.65l.7-7A1.5 1.5 0 0 1 4.357 5H5V4Zm4.5 0v1h-3V4a1.5 1.5 0 0 1 3 0Zm-3 3.75a.75.75 0 0 0-1.5 0v1a3 3 0 1 0 6 0v-1a.75.75 0 0 0-1.5 0v1a1.5 1.5 0 1 1-3 0v-1Z" clip-rule="evenodd" /></svg>') }}
     </form>

assets/views/shop/_cart_body.html

@@ -19,6 +19,7 @@
       <tr>
         <td class="px-4 py-3">
           <a href="/shop/{{ item.slug }}" class="font-medium text-on-surface-strong hover:text-primary dark:text-on-surface-dark-strong dark:hover:text-primary-dark">{{ item.name }}</a>
+          {% if item.variant_label %}<span class="block text-xs text-on-surface/60 dark:text-on-surface-dark/60">{{ item.variant_label }}</span>{% endif %}
         </td>
         <td class="px-4 py-3 tabular-nums">
           {% if item.on_sale %}
@@ -35,7 +36,7 @@
           <form method="post" action="/cart/update"
             hx-post="/cart/update" hx-trigger="cartchange" hx-target="#cart-body" hx-swap="innerHTML">
   {{ ui::csrf_field() }}
-            <input type="hidden" name="product_id" value="{{ item.id }}">
+            <input type="hidden" name="variant_id" value="{{ item.id }}">
             <input type="number" name="quantity" min="0" max="{{ item.stock }}" value="{{ item.quantity }}"
               @change="
                 if (parseInt($el.value || '0') <= 0 && !window.confirm('{{ t(key='cart-remove-confirm', lang=lang | default(value='sk')) }}')) {
@@ -52,7 +53,7 @@
           <form method="post" action="/cart/remove"
             hx-post="/cart/remove" hx-target="#cart-body" hx-swap="innerHTML">
   {{ ui::csrf_field() }}
-            <input type="hidden" name="product_id" value="{{ item.id }}">
+            <input type="hidden" name="variant_id" value="{{ item.id }}">
             {{ ui::button(variant="ghost-danger", label=t(key="cart-remove", lang=lang | default(value='sk')), type="submit", size="px-2 py-1 text-xs") }}
           </form>
         </td>

assets/views/shop/_cart_preview.html

@@ -8,6 +8,7 @@
   <div class="flex items-start gap-3 px-4 py-3">
     <div class="min-w-0 flex-1">
       <a href="/shop/{{ item.slug }}" class="block truncate text-sm font-medium text-on-surface-strong hover:text-primary dark:text-on-surface-dark-strong dark:hover:text-primary-dark">{{ item.name }}</a>
+      {% if item.variant_label %}<span class="block truncate text-xs text-on-surface/60 dark:text-on-surface-dark/60">{{ item.variant_label }}</span>{% endif %}
       <p class="mt-0.5 text-xs tabular-nums text-on-surface dark:text-on-surface-dark">{{ item.quantity }} × {{ item.price }} {{ item.currency }}</p>
     </div>
     <span class="shrink-0 text-sm font-semibold tabular-nums text-on-surface-strong dark:text-on-surface-dark-strong">{{ item.line_total }} {{ item.currency }}</span>

assets/views/shop/order_confirmed.html

@@ -29,7 +29,7 @@
     <ul class="space-y-2 py-3 text-sm">
       {% for item in items %}
       <li class="flex justify-between gap-2">
-        <span class="text-on-surface/80 dark:text-on-surface-dark/80">{{ item.product_name }} × {{ item.quantity }}</span>
+        <span class="text-on-surface/80 dark:text-on-surface-dark/80">{{ item.product_name }}{% if item.variant_label %} · {{ item.variant_label }}{% endif %} × {{ item.quantity }}</span>
         <span class="tabular-nums">{{ item.line_total }} {{ order.currency }}</span>
       </li>
       {% endfor %}

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 %}