Comment Ajouter automatiquement un Produit au Panier sur Shopify

Nous allons voir dans ce tutoriel comment créer un système d’ajout automatique d’un produit au panier sur une boutique Shopify. En effet à l’arrivée sur la page panier un produit que vous aurez défini sera automatiquement ajouté au panier selon certaines conditions. Ce tuto est idéal si vous souhaitez proposer un produit gratuit à l’achat d’un produit spécifique 😉

Comment fonctionne le système ?

Attention ce système ne fonctionnera que pour les boutiques avec un système de panier de type page ! c’est à dire que vos clients doivent arriver sur la page panier. On évite donc les mini-panier, les paniers en pop-up et les panier en drawer (colonne glissante à droite).

Vous disposerez de plusieurs options:

  • Pouvoir l’ajouter peu importe le produit présent dans le panier,
  • Pour proposer un produit uniquement si un produit bien spécifique est présent au niveau de panier,
  • Le choix de la variante à proposer.

Comment installer l’ajout au panier automatique ?

Rendez-vous dans Boutique en ligne – Actions – Modifier le code – Ouvrez le dossier Modèles (Template) et le fichier cart.liquid – Mettez-vous tout en bas et copiez/collez le code suivant:

<!-- mettre à oui si vous voulez que le produit s'ajoute peu importe les produits présents dans le panier - sinon mettez non -->

{% assign tousLesProduits = "oui" %}

<!-- seulement si un produit est présent au niveau du panier - remplacez le produit-1 par la portion d'url de votre produit -->
<!-- Produit à qui doit être présent dans le panier - remplacez le produit-2 par la portion d'url de votre produit -->

{% assign produit_present = all_products['produit-1'] %}

<!-- Produit à ajouter automatiquement - remplacez le produit-2 par la portion d'url de votre produit -->

{% assign produit_a_ajouter = all_products['produit-2'] %}

{% unless cart.item_count == 0 or produit_a_ajouter.empty? or produit_a_ajouter.variants.first.available == false %}

<!-- Par défault c'est la 1ere variante du produit qui est prise en compte - si vous souhaitez changer cela modifiez "produit_a_ajouter.variants.first.id" par l'identifiant de la variante que vous trouverez dans la partie édition de vos variantes -->

{% assign variant_id = produit_a_ajouter.variants.first.id %}

{% if tousLesProduits == "non" %}

{% assign isProduct = false %}

{% for item in cart.items %}
  {% if item.product.handle == produit_present.handle %}
  	{% assign isProduct = true %}
  {% endif %}
{% endfor %}

{% if isProduct == true %}

<script>  
  
(function($) {   
    
    let cartItems = {{ cart.items | json }},
        qtyInTheCart = 0,        
        cartUpdates = {};

    for (let i=0; i<cartItems.length; i++) {
      if ( cartItems[i].id === {{ variant_id }} ) {
        qtyInTheCart = cartItems[i].quantity;
        break;
      }      
    }    

    if ((cartItems.length === 1) && (qtyInTheCart > 0)) {
      cartUpdates = { {{ variant_id }}: 0 }
      
    }
    else if (( cartItems.length >= 1) && (qtyInTheCart !== 1 )) {
      cartUpdates = { {{ variant_id }}: 1 }
    }
    else {
      return;
    }   
    
    const params = {        
      type: 'POST',
      url: '/cart/update.js',
      data: { updates: cartUpdates },
      dataType: 'json',
      success: function(stuff) { 
        window.location.href = '/cart';
      }
    };  

    $.ajax(params);

})(jQuery);
  
</script>

{% endif %}

{% else %}

<script>  
  
(function($) {   
    
    let cartItems = {{ cart.items | json }},
        qtyInTheCart = 0,        
        cartUpdates = {};

    for (let i=0; i<cartItems.length; i++) {
      if ( cartItems[i].id === {{ variant_id }} ) {
        qtyInTheCart = cartItems[i].quantity;
        break;
      }      
    }    

    if ((cartItems.length === 1) && (qtyInTheCart > 0)) {
      cartUpdates = { {{ variant_id }}: 0 }
      
    }
    else if (( cartItems.length >= 1) && (qtyInTheCart !== 1 )) {
      cartUpdates = { {{ variant_id }}: 1 }
    }
    else {
      return;
    }      
    
    const params = {        
      type: 'POST',
      url: '/cart/update.js',
      data: { updates: cartUpdates },
      dataType: 'json',
      success: function(stuff) { 
        window.location.href = '/cart';
      }
    };  

    $.ajax(params);

})(jQuery);
  
</script>

{% endif %}

{% endunless %}

Côté options

Votons maintenant comment administrer tout ça…

Tout est commenté pour vous aider à y voir plus claire et svp ne touchez à rien d’autre afin d’éviter la catastrophe 😀

{% assign tousLesProduits = "non" %} – Mettez « oui » ou « non » afin d’ajouter ou non le produit gratuit selon l’article présent dans le panier ou laissez sur non pour l’ajouter peu importe le produit présent dans le panier.

{% assign produit_present = all_products['produit-1'] %} – Trouvez la portion d’url du produit qu’il faut avoir dans le panier si vous avez mis le tousLesProduits à « oui »

{% assign produit_a_ajouter = all_products['produit-2'] %} – Mettez la portion d’url du produit gratuit que vous voulez proposer et ajouter automatiquement au panier.

{% assign variant_id = produit_a_ajouter.variants.first.id %} – Par default c’est la première variante qui est prise en compte>. Pour changer cela vous pouvez remplacer le « produit_a_ajouter.variants.first.id » par l’identifiant de la variante voulue

Ou trouver cette portion d’url ?

ajouter automatiquement produit panier shopify

Le tuto ne fonctionne pas ?

Il doit vous manquer Jquery ! je vous invite donc à vous rendre dans boutique en ligne – actions – modifier le code – Mise en page (layout) – theme.liquid

Trouver la fermeture de la balise suivante </head> et juste avant coller le code ci-dessous 😉

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

Le tuto existe aussi en vidéo

J’espère que ce tuto vous a plu et n’oubliez pas de mettre une petite note 😉

Bon tuto à toutes et tous !

 

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 2 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 42 commentaires

  1. DALLMER

    21 Déc 2020 Répondre

    Ne fonctionne pas sur début malheureusement (Tuto copié à la lettre)

    1. Dgeo Dev

      21 Déc 2020 Répondre

      Pourtant il a été réalisé sur Debut ^^ essaie de voir si tu passes bien en mode panier et que tout est comme sur le tuto vidéo 😉

  2. Pierre

    12 Jan 2021 Répondre

    hello, merci beaucoup c’est ce qu’il me fallait mais ça ne fonctionne pas sur début non plus pour moi 🙁 je suis bien en mode panier
    Si jamais tu veux en parler je suis dispo 🙂 ca m’intéresse !

  3. Hugo

    15 Jan 2021 Répondre

    Hello!
    Merci pour ce tuto, c’est vraiment ce que je cherchais !
    Petite question : est-il possible de rajouter une condition pour que le produit gratuit n’apparaisse que lors de l’ajout de 3 produits ?
    Merci d’avance !

    1. Dgeo Dev

      15 Jan 2021 Répondre

      Hello et merci pour le commentaire. C’est possible mais trop compliqué à expliquer 🙁

  5. Enora

    7 Mar 2021 Répondre

    Bonjour, j’ai besoin d’aide car cela ne fonctionne pas. Je suis sur le thème début et même en suivant le tuto à la lettre quand j’actualise et que je teste, donc je mets un article dans le panier mais quand je suis sur la page panier : mon produit disparait et on m’affiche un panier vide.

    Si tu as une solution…

  6. Aaron

    20 Mar 2021 Répondre

    Bonjour,
    j’ai suivi ton tuto à la lettre et rien ne se passe, je suis sur le thème prestige.

  7. Marie

    13 Avr 2021 Répondre

    Bonjour,
    j’ai le thème Début, j’ai suivie votre tuto à la lettre et ça ne fonctionne pas. Pouvez vous m’aider ? Merci

    1. Dgeo Dev

      15 Avr 2021 Répondre

      Bonjour, le tuto est fait sur Debut donc logiquement il fonctionne tjs 🙂 essayez de regarder si le nom de la collection est bonne.

      1. Patrick

        12 Juin 2022 Répondre

        Hello. Est-ce qu’il y a des news pour ce tuto avec le theme Debut car ça ne fonctionne pas non plus.

        1. Dgeo Dev

          13 Juin 2022 Répondre

          J’ai rajouté dans le tuto une partie à suivre en cas de problème.

          1. Patrick

            13 Juin 2022

            Autant de génie chez un seul homme, c’est indécent….;)) Merci 1000 fois.

          2. Dgeo Dev

            17 Juin 2022

            Héhé merci c’est très sympa 🙂 bonne soirée et bonnes ventes 😉

  8. Maxime

    19 Avr 2021 Répondre

    Bonjour, est-ce possible de limiter l’ajout du produit automatiquement une seule fois même si le client rajoute plusieurs fois le produit qui déclenche l’ajout automatique ?

    1. Dgeo Dev

      20 Avr 2021 Répondre

      Hello, oui c’est potentiellement faisable mais il faudrait un développement sur mesure 🙂

  9. Lisa

    13 Mai 2021 Répondre

    Bonjour!

    Merci pour ce code 🙂 le produit cadeau s’ajoute bien au panier mais celui-ci est indiqué avec son prix de vente et non comme gratuit, comment faire?

    Merci d’avance

    1. Dgeo Dev

      14 Mai 2021 Répondre

      Hello, il faut simplement mettre le prix du produit à 0 🙂

      1. Ludovic

        28 Jan 2022 Répondre

        Merci pour le tuto ! On peut donc offrir un produit en mettant le prix a 0 par contre si on retire le produit initial le produit à 0 reste lui dans le panier seul… Est-ce qu’il y a un moyen pour qu’il disparaisse aussi ?

        1. Dgeo Dev

          29 Jan 2022 Répondre

          C’est assez délicat car les thèmes n’étant pas tous codés de la même façon il est impossible d’anticiper sur quel événement le client clic – le bouton suppression étant différent partout… Cela demanderait un développement spécifique

  10. Melodie ALCIN

    27 Juin 2021 Répondre

    Bonjour,
    merci pour le tuto, mais pour moi non plus ça ne fontionne pas avec le thème debut

  11. Rdw

    13 Jan 2022 Répondre

    Bonjour, je te suis depuis un moment je te remerci pour tes tutos , le conde fonctionne très bien, j’aimerai juste savoir comment faire pour ajouter 2 produits distincts supplémentaires ?

    Merci d’avance !

    1. Dgeo Dev

      14 Jan 2022 Répondre

      Hello, et merci pour le message. hum c’est assez délicat sans un code sur mesure.

  12. Malaika

    14 Jan 2022 Répondre

    Coucou, super tuto, MERCIII !! Mais j’ai une question:
    Comment faire le même chose mais à partir d’un certain montant d’achat ?
    Merci

    1. Dgeo Dev

      15 Jan 2022 Répondre

      Hello, ce n’est pas possible du moins avec ce tutoriel. Il faudrait un développement sur mesure ou passer par une application 🙂 Bonne soirée

  13. LS

    11 Fév 2022 Répondre

    Salut Dgeo 🙂
    Merci pour ce super outil très pratique !
    Petite question : Comment faire pour ajouter le produit sur les produits d’une collection uniquement (par exemple, si le produit dans le panier est dans la collection 1, on ajoute le cadeau, mais si c’est dans la collection 2, on ne l’ajoute pas) ?
    Et question subsidiaire si cela n’est pas possible, comment sélectionner plusieurs produits qui donnent droit au cadeau ?
    Merci !

    1. Dgeo Dev

      14 Fév 2022 Répondre

      Bonsoir, hum ca devient un peu trop complexe pour un tuto gratuit. Il faudrait plutôt voir du côté d’une application à ce niveau

  14. jeannet

    16 Mar 2022 Répondre

    Bonjour, est-il possible d’ajouter un produit automatiquement au panier (genre produit 2) sous condition d’ajout au panier de plusieurs articles (genre produit A ou produit B ou produit C etc…). Ce serait pour offrir un produit si un client ajoute n’importe quel article d’une collection 🙂 Merci pour ces tutos en tout cas , c’est top !

    1. Dgeo Dev

      16 Mar 2022 Répondre

      Bonjour et merci pour le message, oui c’est théoriquement possible mais cela demanderait un développement spécifique 🙂

  15. Teddy

    25 Mai 2022 Répondre

    Bonjour , j’ai un problème avec votre tuto , lorsque je me rend dans mes produit pour obtenir l’ID du produit a offrir et a coller dans le code , il ce trouve que l’url n’est pas dutou comme vous à 2.08 min , comment faire ? les miennes et pour tout mes autre produit finissent comme dans l’exemple qui suit :  » product/coussin-bleu-electrique…..  » Vidéo au top au passage

    1. Dgeo Dev

      26 Mai 2022 Répondre

      Hello, il faut aller côté admin de shopify pour voir le produit pas côté site car la c’est l’url finale 🙂

  16. Jean

    23 Juil 2022 Répondre

    Hello,

    Je suis sur le theme sense.
    J’ai suivi le tuto à la lettre mais je pense qu’il doit me manquer une bibliothèque nécessaire au script.

    Est ce qu’il y a quelque chose à ajouter ?

    Merci d’avance à toi !!

    1. Dgeo Dev

      27 Juil 2022 Répondre

      Hello, vu ensemble en MP 🙂 résolu

      1. Joseph

        23 Sep 2022 Répondre

        Bonjour Dgeo,
        Je suis sur Sense aussi, est-ce que je peux avoir la solution?
        Merci !

    2. Joseph

      28 Sep 2022 Répondre

      Bonjour Jean,
      Pouvez-vous me donner la marche à suivre sur le theme sens?
      Merci

      1. Dgeo Dev

        28 Sep 2022 Répondre

        Bonjour, normalement ce tuto fonctionne sur tous les thèmes étant donné que tous les thèmes ont le fichier cart.liquid – avez-vous copiez/collez le code optionnel proposé en bas du tuto ?

  17. Mélissa

    30 Nov 2022 Répondre

    Bonjour,
    Tout d’abord, merci pour votre tuto.
    Cependant, ça ne fonctionne pas pour moi… Est-ce parce que je n’ai pas cart.liquid mais cart.json qui apparait ?
    Merci d’avance pour votre retour.

    1. Dgeo Dev

      1 Déc 2022 Répondre

      Bonjour, oui en effet ca ne fonctionne que sur les fichiers liquid – essayez de trouver dans sections un cart-template ou main-cart 🙂

  18. JB

    11 Juil 2023 Répondre

    Bonjour,
    Est-il possible d’ajouter une condition, par exemple que le produit offert soit ajouter qu’à partir de 100€ d’achat ?
    Par avance merci
    JB

    1. Dgeo Dev

      27 Août 2023 Répondre

      Hello, non navré pas avec ce tuto tout du moins mais avec un dev sur mesure c’est jouable 🙂

  19. Sébastien

    16 Avr 2024 Répondre

    bonjour,

    je n’ai pas de fichier .liquid sur mon thème mais .json et je ne peu donc pas valider l’ajout du code.. une solution est elle possible ?

    1. Dgeo Dev

      17 Avr 2024 Répondre

      Hello ca dépend du thème – il faut regarder dans extrait sinon un main-cart.liquid ou dans sections

Laisser un commentaire

Fermer le menu
×
×

Panier