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

Si vous avez le thème Debut, il vous suffit d’utiliser ce code:

$(".btn--secondary").hide();
 $(".cart__qty").focusout(function() {
 $( ".btn--secondary" ).click();
});

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.

Bon tuto à tous 😉

 

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

🤗 Vous souhaitez m'encourager à continuer mes Tutos ?

Cliquez sur le bouton ci-dessous pour me laisser un petit pourboire 😉

Payer un coup à Dgeo Dev

Cet article a 27 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 !

Laisser un commentaire

Fermer le menu
×
×

Panier

Tu aimes mes Tutos & mes Articles ?

Alors n'hésites pas à m'encourager à continuer ce Blog !


Je donne 1e à Dgeo Dev

Envie de Booster ton taux de conversion ?

J'ai créé une nouvelle Application Shopify qui devrait te plaire !
Elle va te permettre de créer des Bundles en direct checkout !
N'hésite pas à la tester elle est Gratuite pendant 7 jours

En savoir plus