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 1 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 34 commentaires

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

    1. 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. 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. 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. Hello et merci pour le commentaire. C’est possible mais trop compliqué à expliquer 🙁

  4. 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…

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

  6. 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. Bonjour, le tuto est fait sur Debut donc logiquement il fonctionne tjs 🙂 essayez de regarder si le nom de la collection est bonne.

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

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

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

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

  7. 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. Hello, oui c’est potentiellement faisable mais il faudrait un développement sur mesure 🙂

  8. 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. Hello, il faut simplement mettre le prix du produit à 0 🙂

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

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

  10. 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. Hello, et merci pour le message. hum c’est assez délicat sans un code sur mesure.

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

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

  13. 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. Bonjour et merci pour le message, oui c’est théoriquement possible mais cela demanderait un développement spécifique 🙂

  14. 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. Hello, il faut aller côté admin de shopify pour voir le produit pas côté site car la c’est l’url finale 🙂

  15. 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. Hello, vu ensemble en MP 🙂 résolu

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

Laisser un commentaire

Fermer le menu