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 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 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]

Cet article a 5 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 🙁

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème 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