Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
mathieu
potage
Commits
5131a989
Commit
5131a989
authored
Sep 19, 2018
by
Mat
Browse files
page today: réactivité js des sliders
parent
75fba3d5
Changes
4
Hide whitespace changes
Inline
Side-by-side
src/PotageBundle/Resources/views/Membre/inc/offreALaCarte.html.twig
View file @
5131a989
...
...
@@ -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=
"prix
Poids
"
>
<span
class=
"prix"
>
{{
legume.prixUnitaire
}}
</span>
<div
class=
"prix
Quantite
"
>
<span
class=
"prix
Unitr
"
>
{{
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
View file @
5131a989
...
...
@@ -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
View file @
5131a989
...
...
@@ -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
View file @
5131a989
...
...
@@ -401,21 +401,24 @@ body[id^='today'] #offre.grid div.item .overlay {
.overlay
div
.texte
{
margin-left
:
2.5em
;
}
.overlay
div
.prix
Poids
{
.overlay
div
.prix
Quantite
{
position
:
absolute
;
padding
:
1em
;
bottom
:
0
;
right
:
0
;
}
.overlay
div
.prix
Poids
{
.overlay
div
.prix
Quantite
{
font-size
:
14px
;
}
.overlay
div
.texte
h5
{
font-size
:
18px
;
}
.overlay
div
.prix
Poids
span
.prix
{
.overlay
div
.prix
Quantite
span
.prix
Unitr
{
font-size
:
22px
;
}
.overlay
div
.prixQuantite
span
.pu
{
color
:
#40e859
;
}
.overlay
div
.texte
p
{
font-size
:
10px
;
}
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment