Tuto Mettre automatiquement à jour le prix du panier lorsque l’on change les quantités sur shopify

Nous allons voir dans ce tutoriel comment mettre automatiquement à jour le prix du panier lorsque l’on change les quantités des produits !

En effet lorsque l’on change les quantités il faut que le client clique sur le bouton mise à jour du panier pour voir le total modifié

Afin de réduire les étapes pour le client et qu’il n’ai pas à faire cette démarche supplémentaire nous allons faire ce qui suit :

Nous allons simuler le clic lorsque l’internaute change une des quantités et masquer par la même occasion le bouton « mettre à jour le panier » qui n’aura plus lieu d’être…

1. Se rendre sur l’admin et cliquer sur « Online store »

2. Cliquer sur Action -> Edit HTML et CSS

3. Trouvez le dossier Templates et cliquez dessus cela va dérouler les fichiers qui le compose

3. Cliquer sur le fichier cart.liquid et trouvez la zone suivante :

panier1

4. Copier/coller le code ci-dessous comme sur l’exemple :

class="cart__quantity-selector"

panier2

5. Cliquez sur le bouton save en haut à droite pour valider vos modifications

6. Trouvez le dossier Assets et cliquez dessus cela va dérouler les fichiers qui le compose

7. Cliquez sur le fichier themes.js.liquid, allez tout en bas du fichier et copier/coller le code ci-dessous :

$(".update-cart").hide();
 $(".cart__quantity-selector").focusout(function() {
 $( ".update-cart" ).click();
 });

panier3

8. Cliquez sur le bouton save en haut à droite pour valider vos modifications

9. Testez un ajout du panier et changez la quantité d’un produit

la page va se recharger automatiquement si ce n’est pas le cas veuillez me contacter ou enlever le code du theme.js.liquid, le code du cart.liquid quand à lui peut rester

Vous souhaitez me remercier et m’encourager à continuer mes tutos?

Alors n’hésitez pas à me faire un petit don même minime car c’est l’intention qui compte 😉

Je veux faire un don

19 commentaires sur “Tuto Mettre automatiquement à jour le prix du panier lorsque l’on change les quantités sur shopify

  1. Wil

    Salut ! Déja merci pour toin boulot c’est vraiment super !
    Ensuite cela ne marche pas, dans mon caret/liquid personnellemtn je n’ai que 13 lignes de codes et acun « input » quand je Ctrl+F ..

  2. cyril

    Bonjour,
    Je me demande pourquoi j’ai prit le thème « Debut » car certains de tes supers tutos ne fonctionne pas sur celui ci lol
    Dès que j’ai des résultats sur mon shop j’achète le thème speedfly ! Parole de scout 😉

    1. dgeo22

      Bonjour,

      Effectivement le thème début pose parfois problème mais je peux adapter mes tutos pour 😉

      Très bien merci pour votre future acquisition du thème 😉

      Bonne soirée

        1. Dgeo GD

          Bonjour, le tuto ne fonctionne que si vous avez un panier de type page (pas de modal ni de panier sur la droite) peu importe le thème le tuto doit fonctionner car on rajoute un identifiant au selecteur. si ca ne fonctionnement c’est un élément perturbateur rentre en conflit (souvent les apps)

          Bonne soirée

  3. Mat

    Salut! Et merci pour tes partages une fois de plus
    J’ai un soucis avec ce tuto, j’ai le thème minimal, 5 lignes de code dans mon cart.liquid et pas de « input »
    Si tu as une solution 😉
    Bonne journée

  4. Patrick

    Bonjour Geoffrey,

    J’ai le theme VENTURE et je n’ai que çà dans mon template :

    {% comment %}
    The contents of the cart.liquid template can be found in /sections/cart-template.liquid
    {% endcomment %}

    {% section ‘cart-template’ %}

  5. CECILIA

    Bonjour j’ai suivi les etapes mais rien ne se passe à part que la case quantité s’est agrandi j’ai le thème début et le deuxième bout de code je l’ai mis dans theme.js vous pouvez m’aider?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*