feat: added product variants

web/templates/components/cart/add_to_cart.html

@@ -3,6 +3,20 @@
   {% csrf_token %}
   <input type="hidden" name="product" value="{{ product.pk }}">
 
+  {% if product.has_variants %}
+    <div class="mb-4">
+      <label for="variant">{% translate 'Variante' %}</label>
+      <select class="input" id="variant" name="variant">
+        {% for variant in product.variants.all %}
+          <option value="{{ variant.pk }}" {% if not variant.stock %}disabled{% endif %}>
+            {% for attribute_value in variant.attribute_values.all %}{{ attribute_value }}{% if not forloop.last %}, {% endif %}{% endfor %}
+            {% if not variant.stock %}({% translate 'agotado' %}){% endif %}
+          </option>
+        {% endfor %}
+      </select>
+    </div>
+  {% endif %}
+
   <div class="flex items-center">
   <input class="input mr-4" id="quantity" aria-label="quantity" type="number" min="1" max="10" name="quantity" value="1">
   <button class="btn btn-primary">

web/templates/components/cart/cart.html

@@ -26,6 +26,11 @@
                     >
                       {{ item.product.name }}
                     </a>
+                    {% if item.variant %}
+                      <p class="text-sm">
+                        {% for attribute_value in item.variant.attribute_values.all %}{{ attribute_value }}{% if not forloop.last %}, {% endif %}{% endfor %}
+                      </p>
+                    {% endif %}
 
                     <div class="flex items-center gap-4">
                       <form class="flex" hx-post="{% url 'web:delete_cart_item' pk=item.pk %}"
@@ -50,7 +55,7 @@
                     </div>
                     <div class="text-end md:order-4 md:w-32">
                       <p class="text-base font-bold  ">
-                        {{ item.product.price.price_with_tax }}€
+                        {{ item.price.price_with_tax }}€
                       </p>
                     </div>
                   </div>

web/templates/components/cart/cart_navbar.html

@@ -25,11 +25,16 @@
                class="text-sm font-semibold leading-none   hover:underline">
                 {{ cart_item.product.name }}
             </a>
+            {% if cart_item.variant %}
+            <p class="text-xs">
+                {% for attribute_value in cart_item.variant.attribute_values.all %}{{ attribute_value }}{% if not forloop.last %}, {% endif %}{% endfor %}
+            </p>
+            {% endif %}
 
             <div class="flex items-center justify-between gap-6">
                 <p
                         class="mt-0.5 truncate text-sm font-normal  ">
-                    {{ cart_item.product.price.price_with_tax }}€
+                    {{ cart_item.price.price_with_tax }}€
                 </p>
 
                 <form hx-post="{% url 'web:delete_cart_item' pk=cart_item.pk %}"