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…

C’est parti pour le tuto !

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 theme.js.liquid, allez tout en bas du fichier et copier/coller le code ci-dessous :

$(".template-cart .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.

Si cela ne fonctionne pas…

Code à rajouter dans Layout – theme.liquid avant la fermeture de la balise </head>

<script src="//code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>  <script>
  

Bon tuto à tous 😉

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 1 votes]

Cet article a 32 commentaires

  1. 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 ..

    1. Salut, merci pour le com 😉 quel thème as tu?

  2. Bonjour et merci pour ces tutos géniaux !
    Pour ma boutique j’ai le thème brooklyn et impossible de trouver cette zone ? Si tu as 2minutes pour m’aider ? … Je te remercie d’avance !

  3. 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. 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. Bonjour, la plupart de vos tuto fonctionnent avec le thème Debut, apparemment pas celui là.

        Si vous avez une solution, je suis preneur 🙂

        Merci

        1. 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

  4. Si tu as un peu de temps à l’occasion ça serait avec plaisir 😉

  5. 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

  6. Salut à tous !
    Est ce que quelqu’un à trouvé une solution pour mettre le code quand pas de  » input  » ?

  7. 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’ %}

    1. Il doit donc être dans cart-template.liquid 😉

  8. Bonjour Geoffrey,

    Effectivement, cela ne fonctionne pas sur mon Theme Supply

    Merci de retour et encore merci pour tout ton travail !!

    Cedric

    1. Bonjour, je viens de retester ca fonctionne bien. suivez bien les étapes 1 par 1 🙂

  9. 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?

    1. Pareil.

      Peux-tu nous aider ? Merci

  10. Perso, j’ai remplacé focusout par mouseup

    1. Hello, bonne idée par contre attention ca marchera peut etre pas sur mobile le mouseup 😉

  11. Bonjour,

    Comme Cécilia, j’ai le thème Début et la manip a agrandi la case quantité mais pas de changement automatique du prix. Peux-tu nous aider ?

    Merci

  12. J’ai fait la meme chose que Cecilia et ça ne fonctionne pas. Comment faire ?

  13. Bonjour!
    ça marche sur le thème Brooklyn, c’est super!

    par contre….. la page met un temps fou à se recharger…. au moin 30 secondes…. pourquoi ce n’est pas instantané?

    1. Hello, étrange effectivement car ce n’est pas censé faire ca

  14. Bonjour et merci pour ton site!
    Mais comme Cecilia, Manu et Pierre cela ne fonctionne pas avec le theme début…
    Peux tu nous aider? Merci d’avance

    1. Hello, ok merci je vais voir pour le mettre à jour et prendre en compte le thème début 🙂

    2. Hello, tuto mis à jour avec un code pour le thème début 😉

  15. Bonjour et surtout merci !
    J’ai le thème Début et tous tes tutos fonctionnent pour ma part. J’en suis très ravie !
    Honnêtement, je voulais prendre le thème Speedfly mais tout le monde l’a, donc je préfère modifier mon thème avec tes tutos !
    (d’ailleurs on m’a fait la réflexion: « ah tu as le thème speedfly » lol tellement je l’ai customisé).

    Merci encore pour tout !

    1. Bonjour, merci pour le message 🙂 héhé pas de soucis, bcp de ces tutos naissent de codes fait sur Speedfly en effet 😉 Bonne réussite à toi !

  16. Salut,

    Sur le thème Supply ça marche, le problème c’est que la mise à jour du panier ne se fait pas automatiquement, il faut faire un clic souris dans la vide après avoir sélectionné une quantité pour que le panier se mette à jour (s’actualise).
    Encore merci pour tous ces tutos Dgeo!

    1. Hello, oui c’est la seule contrainte. J’ai prévu de l’améliorer dés que j’ai un peu plus de temps 😉

  17. Hello,
    Cela marche bien merci, sauf qu’en effet il faut cliquer sur entrée pour que cela soit pris en compte..
    As tu trouvé une solution depuis ?
    MERCI ENCORE !!

  18. Hello Dgeo Dev, merci pour le tuto mais pas moyen sur Brooklyn
    J’ai bien revérifié plusieurs fois les 3 pages à modifier ect.
    Quant je change la quantité dans le panier la page ne s’actualise pas

    1. Hello, en effet il est plutôt fait pour le thème debut, supply, speedfly etc… faudrait que je prenne un moment pour le tester sur Brooklyn 🙂

Laisser un commentaire

Fermer le menu

meilleure chaine youtube dropshipping shopify

Envie de tout savoir sur le Dropshipping & Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine