Tweet
Bonjour, pourriez-vous me dire comment se calcul les différents poids ? Où est-ce que je pourrais trouver un code similaire ? pour l'intégrer sur mon site.
Merci
Merci
-
-
Bonjour,
Pas vraiment sûr de comprendre votre demande.
Je me lance tout de même.
Sur un de mes composants (CG Isotope), j'utilise une librairie Range Slider qui permet de gérer des curseurs. https://slawomir-zaziablo.github.io/range-slider/
Est-ce que cela correspond à votre demande ?
PascalIf anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com -
Bonjour Pascal,
je recherche le code (je ne sais pas si c'est du javascript, du css ou autre) qui me permettrais de l'insérer dans des fiches recettes, permettant à la personne qui veut réaliser la recette, de sélectionner un nombre de personnes (par exemple 6) pour recalculer les quantités des ingrédients de la recette initiale faite pour 4 personnes (génération automatique des nouvelles quantités). Je vous joints une page d'un composant sur lequel il y a cette fonction (pour l'exemple) pour voir à quoi cela peut ressembler : https://joomrecipe-demo.joomboost.co...ger-snaps.html
Merci.
ChristianCommentaire
-
Bonjour Christian,
Ceci est fait en javascript. Vu comme ça, je pense que la méthode doit être la suivante:
- Ils établissent les ingrédients nécessaires pour 4 personnes (souvent c'est le standard)
- Lorsqu'on déplace le curseur, le javascript recalcule à la volée le nombre d'ingrédients en faisant un produit en croix.
Je pense pas que ça soit difficile à faire. Dis moi si tu veux un coup de main pour ça, je peux t'aider.
Passe une belle journée !Commentaire
-
Bonjour, merci pour les infos.
Oui je veux bien de l'aide.
Commentaire
-
Je ne suis pas disponible aujourd'hui pour la fin de journée, je t'envoie ça demain dans la matinée.
Passe une belle fin de journée.Commentaire
-
Merci beaucoup
Commentaire
-
Bonjour Kinouplay,
Voilà le code, comme promis:
<body>
<style>
.ref{
display:none;
}
</style>
<h1>Crêpes</h1>
<div><span id="nb-personnes">4</span> personnes</div></br>
<input id="input-slider" type="range" value="4" min="1" max="15" step="1" />
<table>
<thead>
<tr>
<th>Ingrédients</th>
<th>Quantité </th>
</tr>
</thead>
<tbody>
<tr>
<td>Oeufs</td>
<td><span class="ref">1</span><span class="ingredients">4<span></td>
</tr>
<tr>
<td>Farine</td>
<td><span class="ref">62.5</span><span class="ingredients">250<span> g</td>
</tr>
<tr>
<td>Lait</td>
<td><span class="ref">6.25</span><span class="ingredients">25<span> cl</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
let cursor_value = document.getElementById('input-slider');
let nb_personnes = document.getElementById('nb-personnes');
cursor_value.addEventListener('change', function(e){
nb_personnes.innerHTML = this.value.toString();
calcul_ingredients(this.value);
})
function calcul_ingredients(value){
let ingredients = document.getElementsByClassName('ingredients');
for(let element of ingredients) {
let base = element.previousElementSibling.innerHTML;
let new_value = parseFloat(base) * parseFloat(value);
element.innerHTML = new_value.toString();
};
}
</script>
Est-ce que tu codes un petit en javascript ? Ou alors tu aurais besoin de plus d'explications sur le code ci-dessus ?
Pour essayer, tu as juste à mettre ça dans une page html classique ou sur un article Joomla pour essayer.
Passe une belle journée !
PS : j'ai fais ça en javascript classique pour éviter les problème de compatibilité.Commentaire
-
Bonjour Michel, merci beaucoup pour le code (beau travail)
, j'avoue que je ne code pas du tout en javascript. Je veux bien des explications.
J'ai mis ton code dans un article (sous JCE), ça fonctionne, par contre si je rajoute des ingrédients, le calcul ne se fait plus, comment faire pour que ça fonctionne ?
Est-ce qu'il y a moyen "d'automatiser" ce calcul pour la saisie des recettes, car il n'y aura pas que moi qui saisira des recettes, chaque personne qui sera identifié sur le site pourra saisir ses propres recettes.
Fichiers jointsCommentaire
-
-
Bonjour Kinouplay,
Pour que le calcul se fasse avec d'autre ingrédients, il faut impérativement lui donner sa référence pour 1 personne :
<td>Lait</td>
<td><span class="ref">6.25</span><span class="ingredients">25<span> cl</td>
Dans le javascript, c'est cet élément qui est caché qui fait que le calcul se fait.
Dis moi si il te faut plus d'éléments !
Passe une belle journée !Commentaire
-
Bonjour Michel, j'ai pas bien compris, il faut mettre la référence du poids pour 1 personne dans le tableau ? où c'est dans le javascript qu'il faut le mettre ?Commentaire
-
Je viens de voir sur le tableau. Par contre le système va si c'est moi qui saisie les recettes (qui saisirait de mon côté les poids pour 1 personne), mais si c'est des internautes qui saisissent sans connaître le truc (ça va être chaud 
) (l'exemple sur le site dont je t'ai envoyé le lien, n'importe qui peut saisir les proportions, et ça restitue la recette avec les proportions saisies et l'on peut après sélectionner le sélecteur pour calculer avec un certain autre nombre de personnes.
Commentaire
-
Okay je vois ! ça serait pour que des internautes sur la page puissent ajouter leurs recettes, c'est bien ça ? Si oui, tu enregistrerais ça en base de donnée ?Commentaire
-
Oui, tu as bien vu, internautes qui ajoutent leurs propres recettes sur le site, via un formulaire de saisie (je suis en train de regarder comment le faire via rsformpro!, si tu connais plus simple n'hésite pas à me le dire) et enregistrement en base de donnée. Récupération des infos de la base de donnée pour les faire apparaître sur des fiches recettes par catégorie et qu'ils puissent par la suite pouvoir calculer la recette en fonction du nombre de personne
Commentaire
-
Pour les internautes qui entrent les recettes, ils auront le choix de mettre le nombre de personnes initiales ? Si oui, on peut très bien utiliser le code en js et le mêler avec du php pour générer tout comme il faut. En revanche, je suis pas fort du tout en php (j'ai commencé Joomla il y a deux mois). Mais je pense qu'en récupérant les infos en base de donnée, on peut calculer les quantités à l'unité et mettre la valeur dans la classe "ref". Je vois bien le cheminement, mais je ne saurais te donner le code :/ Si tu m'envoies le code de base en php avec l'appel à la base de donnée, je pense que je pourrais quand même t'aider !Commentaire
Commentaire