Comment mettre automatiquement à jour le prix du panier au changement de quantité 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…

C’est parti pour le tuto !

1. Se rendre sur l’admin et cliquer sur « Boutique en ligne »

2. Cliquer sur Actions -> Modifier code

3. Trouvez le dossier Modèles (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 Ressources (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, le code du cart.liquid quand à lui peut rester.

Si cela ne fonctionne pas…

Code à rajouter dans Mise en page (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 5 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 35 commentaires

  1. Wil

    14 Nov 2017 Répondre

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

      14 Nov 2017 Répondre

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

  2. Kévin

    22 Nov 2017 Répondre

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

    14 Déc 2017 Répondre

    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

      14 Déc 2017 Répondre

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

        30 Mar 2018 Répondre

        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. Dgeo GD

          30 Mar 2018 Répondre

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

    14 Déc 2017 Répondre

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

  5. Mat

    12 Fév 2018 Répondre

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

    22 Fév 2018 Répondre

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

  7. Patrick

    23 Fév 2018 Répondre

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

      24 Fév 2018 Répondre

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

  8. Cedric

    19 Mar 2018 Répondre

    Bonjour Geoffrey,

    Effectivement, cela ne fonctionne pas sur mon Theme Supply

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

    Cedric

    1. Dgeo GD

      24 Mar 2018 Répondre

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

  9. CECILIA

    28 Mai 2018 Répondre

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

      24 Oct 2018 Répondre

      Pareil.

      Peux-tu nous aider ? Merci

  10. nico

    7 Sep 2018 Répondre

    Perso, j’ai remplacé focusout par mouseup

    1. Dgeo Dev

      18 Sep 2018 Répondre

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

  11. Manu

    24 Oct 2018 Répondre

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

    20 Mar 2019 Répondre

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

  13. Leat

    22 Mar 2019 Répondre

    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. Dgeo Dev

      7 Avr 2019 Répondre

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

  14. Romain

    20 Juil 2019 Répondre

    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. Dgeo Dev

      22 Juil 2019 Répondre

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

    2. Dgeo Dev

      22 Juil 2019 Répondre

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

  15. Anais

    6 Août 2019 Répondre

    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. Dgeo Dev

      7 Août 2019 Répondre

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

    26 Août 2019 Répondre

    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. Dgeo Dev

      27 Août 2019 Répondre

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

    4 Jan 2020 Répondre

    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. Stéph

    14 Mai 2020 Répondre

    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. Dgeo Dev

      15 Mai 2020 Répondre

      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 🙂

  19. Kévin

    14 Nov 2020 Répondre

    Bonjour,

    Des nouvelles pour la version Brooklyn ?

    merci d’avance.

  20. dams

    30 Juil 2021 Répondre

    bon bah ça n’a pas fonctionné pour moi sur brooklyn

    1. Dgeo Dev

      30 Juil 2021 Répondre

      Brooklyn est particulier il faut éviter le type de panier en colonne de droite ou en modal. Il faut un type de panier page

Laisser un commentaire

Fermer le menu
×
×

Panier