page today: réactivité js des sliders

src/PotageBundle/Resources/views/Membre/inc/offreALaCarte.html.twig

@@ -16,19 +16,21 @@
 
             <div class="overlay">
                 <div class="slidecontainer">
-                    <input type="range" min="1" max="100" value="0"
-                           class="slider" id="slider-{{ legume.id }}"
+                    <input class="slider" id="slider-{{ legume.id }}"
+                           type="range"
+                           min="0" step="{{ legume.quantiteStep }}" max="{{ legume.quantiteMax }}"
+                           value="0"
                            orient="vertical">
+                    <span class="qmin hidden">{{ legume.quantiteMin }}</span>
                 </div>
                 <div class="texte">
                     <h5>{{ legume.nom }}</h5>
                     <p>{{ legume.description }}</p>
-                    <small>{{ legume.quantiteMin }}, {{ legume.quantiteMax }}, {{ legume.quantiteStep }}</small>
                 </div>
-                <div class="prixPoids">
-                    <span class="prix">{{ legume.prixUnitaire }}</span>
+                <div class="prixQuantite">
+                    <span class="prixUnitr">{{ legume.prixUnitaire }}</span>
                     <span class="devise">€</span>
-                    <span class="unite">/{{ legume.unite }}</span>
+                    /<span class="unite">{{ legume.unite }}</span>
                 </div>
             </div>
 

src/PotageBundle/Resources/views/Membre/inc/panier.html.twig

@@ -49,14 +49,16 @@
 </div>
 <div class="col-5">
 
-    <div id="total">
-        <h4>Total</h4>
-        <p class="h1">16.85 €</p>
-        <small>
-            <i>Le total de la commande est donné à titre indicatif.
-                Votre maraîcher se réserve le droit d'adapter légèrement les quantités et le prix
-                en fonction des limites et de l'état du stock disponible.</i>
-        </small>
-    </div>
+    <h4>Total</h4>
+    <p class="h1">
+        <span id="total">0.00</span> €
+    </p>
+    <small>
+        <i>
+            Le total de la commande est donné à titre indicatif.
+            Votre maraîcher se réserve le droit d'adapter légèrement les quantités et le prix
+            en fonction des limites et de l'état du stock disponible.
+        </i>
+    </small>
 
 </div>

src/PotageBundle/Resources/views/Membre/today.js

@@ -12,3 +12,47 @@ $("#offre div.item")
         $(this).transition({ scale: 1 }, 200, 'linear');
         $(this).find('.overlay').transition({ opacity: 0 }, 200, 'linear');
     });
+
+
+/*
+*   Animer les items de l'offre, et répercuter les valeurs dans le formCommande
+*
+*/
+
+let gridItem = document.querySelectorAll("div#offre .item.legume");
+let form = document.querySelector("form.formulaire_commande");
+let formItem = form.querySelectorAll("ul#commandeLegumes li.formItem");
+
+// parcourt la grille
+gridItem.forEach(function(item)
+{
+    let input = item.querySelector("input.slider");
+    let qmin = parseFloat(item.querySelector("span.qmin").textContent);
+    let prixQuantite = item.querySelector("div.prixQuantite");
+    let prixUnitr = parseFloat(prixQuantite.querySelector("span.prixUnitr").textContent);
+    let unite = prixQuantite.querySelector("span.unite").textContent;
+
+    // lorsqu'on actionne un slider
+    input.addEventListener('input', function()
+    {
+        if (this.value >= qmin)
+        {
+            // rafraichit l'affichage de l'item
+            let pu = (this.value * prixUnitr).toFixed(2) + '€';
+            prixQuantite.innerHTML = this.value
+                + ' ' + unite + (unite !== 'kg' && this.value > 1 ? 's' : '')
+                + ' <span class="pu">(' + pu + ')</span>'
+            ;
+
+        } else {
+            // reset l'affichage de l'item
+            prixQuantite.innerHTML = `<span class="prixUnitr">${prixUnitr}</span><span class="devise">€</span>/<span class="unite">${unite}</span>`;
+        }
+    });
+});
+
+console.log(gridItem);
+console.log(form);
+console.log(formItem);
+
+

web/css/style.css

@@ -401,21 +401,24 @@ body[id^='today'] #offre.grid div.item .overlay {
 .overlay div.texte {
     margin-left: 2.5em;
 }
-.overlay div.prixPoids {
+.overlay div.prixQuantite {
     position: absolute;
     padding: 1em;
     bottom: 0;
     right: 0;
 }
-.overlay div.prixPoids {
+.overlay div.prixQuantite {
     font-size: 14px;
 }
 .overlay div.texte h5 {
     font-size: 18px;
 }
-.overlay div.prixPoids span.prix {
+.overlay div.prixQuantite span.prixUnitr {
     font-size: 22px;
 }
+.overlay div.prixQuantite span.pu {
+    color: #40e859;
+}
 .overlay div.texte p {
     font-size: 10px;
 }