fonc(produit) implémente le multi-variations

web/app/themes/haiku-atelier-2024/views/macros/images.twig

@@ -24,7 +24,7 @@
       loading="eager"
       src="{{ rel_url }}.jpg"
       width="{{ width }}"
-      onload="this.style.opacity=1"
+      onload="this.style.opacity = 1"
     >
   </picture>
 {% endmacro %}

web/app/themes/haiku-atelier-2024/views/parts/pages/produit/informations-produit.twig

@@ -1,49 +1,63 @@
-{# Barre flottante avec le nom du Produit, le sélectgeur de variation et de quantité pour le Panier. #}
+{# Barre flottante avec le nom du Produit, le sélecteur de variation et de quantité pour le Panier. #}
 
 <aside
   aria-label="Product's name, price and variation selection"
   class="resume-produit"
 >
-  <section class="selecteur-produit">
-    <h3 class="selecteur-produit__nom">{{ produit.nom }}</h3>
+  <form
+    class="selecteur-produit"
+    id="variation-choice"
+    name="variation-choice"
+  >
+    <h3 class="selecteur-produit__nom">{{ produit.name }}</h3>
 
-    <div class="selecteur-produit__selection-variation">
-      {% if variations_produit|length > 1 %}
-        <label
-          for="selecteur-variation"
-          id="label-selecteur-variation"
-        >
-          Option:
-        </label>
-
-        <div class="selecteur-produit__selection-variation__selecteurs">
-          <select
-            aria-labelledby="label-selecteur-variation"
-            id="selecteur-variation"
-            name="variations"
-          >
-            <option
-              disabled
-              selected
-              value=""
-            >
-              --
-            </option>
-            {% for variation in variations_produit %}
-              <option
-                data-prix="{{ variation.prix }}"
-                value="{{ variation.id }}"
-              >
-                {{ variation.titre }}
-              </option>
-            {% endfor %}
-          </select>
-        </div>
+    <div class="selecteur-produit__attribut-variation">
+      {% if produit.attributes %}
+        {% for attribut in produit.attributes %}
+          <div class="test">
+            {{ include('parts/pages/produit/selecteur-attributs-produit.twig') }}
+          </div>
+        {% endfor %}
       {% endif %}
+
+      <!--
+        {% if variations_produit|length > 1 %}
+          <label
+            for="selecteur-variation"
+            id="label-selecteur-variation"
+          >
+            Option:
+          </label>
+
+          <div class="selecteur-produit__attribut-variation__selecteurs">
+            <select
+              aria-labelledby="label-selecteur-variation"
+              id="selecteur-variation"
+              name="variations"
+            >
+              <option
+                disabled
+                selected
+                value=""
+              >
+                --
+              </option>
+              {% for variation in variations_produit %}
+                <option
+                  data-prix="{{ variation.prix }}"
+                  value="{{ variation.id }}"
+                >
+                  {{ variation.titre }}
+                </option>
+              {% endfor %}
+            </select>
+          </div>
+        {% endif %}
+      -->
     </div>
 
-    <p class="selecteur-produit__prix">{{ prix_maximal ?? produit.prix }}€</p>
-  </section>
+    <p class="selecteur-produit__prix">{{ prix_maximal ?? produit.price }}€</p>
+  </form>
 </aside>
 
 <aside
@@ -107,12 +121,14 @@
   </div>
 
   <div class="details-produit__actions">
+    {# Désactive le bouton d'ajout au panier en cas d'absence de stock. #}
     {% if produit.stock > 0 %}
       <button
         class="bouton-case-pleine"
-        {{ variations_produit|length > 1 ? 'disabled' : '' }}
+        disabled
+        for="variation-choice"
         id="bouton-ajout-panier"
-        type="button"
+        type="submit"
       >
         Add to cart
       </button>
@@ -120,6 +136,7 @@
       <button
         class="bouton-case-pleine"
         disabled
+        for="variation-choice"
         id="bouton-ajout-panier"
         type="button"
       >

web/app/themes/haiku-atelier-2024/views/parts/pages/produit/photos-produit.twig

@@ -3,7 +3,7 @@
     aria-label="Photo of the Product alone"
     class="colonne colonne-gauche"
   >
-    {% for photo in produit.photos_colonne_gauche %}
+    {% for photo in produit.left_column_photos %}
       <figure
         data-index="0"
         role="figure"
@@ -19,7 +19,7 @@
     aria-label="Photos of the Product worn"
     class="colonne colonne-droite"
   >
-    {% for photo in produit.photos_colonne_droite %}
+    {% for photo in produit.right_column_photos %}
       <figure
         data-index="{{ loop.index }}"
         role="figure"

web/app/themes/haiku-atelier-2024/views/parts/pages/produit/selecteur-attributs-produit.twig

@@ -0,0 +1,28 @@
+<div class="selecteur-produit__attribut-variation__selecteurs">
+  <label
+    for="selecteur-attribut-{{ attribut.slug }}"
+    id="label-selecteur-attribut-{{ attribut.slug }}"
+  >
+    {{ attribut.name }}:
+  </label>
+
+  <select
+    aria-labelledby="label-selecteur-attribut-{{ atribut.slug }}"
+    id="selecteur-attribut-{{ attribut.slug }}"
+    name="attribut-{{ attribut.slug }}"
+    required
+  >
+    <option
+      disabled
+      selected
+      value=""
+    >
+      --
+    </option>
+    {% for term in attribut.options %}
+      <option value="{{ term.slug }}">
+        {{ term.name }}
+      </option>
+    {% endfor %}
+  </select>
+</div>