Commit 5131a989 authored by Mat's avatar Mat

page today: réactivité js des sliders

parent 75fba3d5
......@@ -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>
......
......@@ -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>
......@@ -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);
......@@ -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;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment