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 ?
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 😉
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 !
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 !
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.
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 ?
DALLMER
21 Déc 2020Ne fonctionne pas sur début malheureusement (Tuto copié à la lettre)
Dgeo Dev
21 Déc 2020Pourtant 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 😉
Pierre
12 Jan 2021hello, 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 !
Hugo
15 Jan 2021Hello!
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 !
Dgeo Dev
15 Jan 2021Hello et merci pour le commentaire. C’est possible mais trop compliqué à expliquer 🙁
marinkovic
22 Jan 2021merci top
Enora
7 Mar 2021Bonjour, 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…
Aaron
20 Mar 2021Bonjour,
j’ai suivi ton tuto à la lettre et rien ne se passe, je suis sur le thème prestige.
Marie
13 Avr 2021Bonjour,
j’ai le thème Début, j’ai suivie votre tuto à la lettre et ça ne fonctionne pas. Pouvez vous m’aider ? Merci
Dgeo Dev
15 Avr 2021Bonjour, le tuto est fait sur Debut donc logiquement il fonctionne tjs 🙂 essayez de regarder si le nom de la collection est bonne.
Maxime
19 Avr 2021Bonjour, 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 ?
Dgeo Dev
20 Avr 2021Hello, oui c’est potentiellement faisable mais il faudrait un développement sur mesure 🙂
Lisa
13 Mai 2021Bonjour!
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
Dgeo Dev
14 Mai 2021Hello, il faut simplement mettre le prix du produit à 0 🙂
Melodie ALCIN
27 Juin 2021Bonjour,
merci pour le tuto, mais pour moi non plus ça ne fontionne pas avec le thème debut