product page refresh fixed

assets/views/shop/show.html

@@ -52,12 +52,26 @@
   {% 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-cta bg-cta text-on-cta focus-visible:outline-cta dark:border-cta-dark dark:bg-cta-dark dark:text-on-cta-dark dark:focus-visible:outline-cta-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))">
+  <div class="space-y-6"
+    x-data="{
+      variants: JSON.parse(document.getElementById('variant-data').textContent) || [],
+      sel: 0,
+      get current() { return this.variants[this.sel] || null },
+      init() {
+        const firstInStock = this.variants.findIndex(v => v.in_stock);
+        this.sel = Math.max(0, firstInStock);
+      },
+    }">
     {% 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.description %}
+    {# Authored as rich text (Quill) in the admin; render the stored HTML. #}
+    <div class="rich-content text-on-surface/80 dark:text-on-surface-dark/80">{{ product.description | safe }}</div>
+    {% endif %}
+
     <template x-if="current">
       <div class="space-y-6">
         <!-- option picker (only when there's a real choice); first option is
@@ -82,11 +96,6 @@
           </template>
         </div>
 
-        {% if product.description %}
-        {# Authored as rich text (Quill) in the admin; render the stored HTML. #}
-        <div class="rich-content text-on-surface/80 dark:text-on-surface-dark/80">{{ product.description | safe }}</div>
-        {% endif %}
-
         <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"
@@ -119,16 +128,5 @@
       <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 %}