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 😉
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.
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 ?
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 ?
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
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 ?
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 !
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 !
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 🙂
Ludovic
28 Jan 2022Merci 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 ?
Dgeo Dev
29 Jan 2022C’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
Melodie ALCIN
27 Juin 2021Bonjour,
merci pour le tuto, mais pour moi non plus ça ne fontionne pas avec le thème debut
Rdw
13 Jan 2022Bonjour, 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 !
Dgeo Dev
14 Jan 2022Hello, et merci pour le message. hum c’est assez délicat sans un code sur mesure.
Malaika
14 Jan 2022Coucou, super tuto, MERCIII !! Mais j’ai une question:
Comment faire le même chose mais à partir d’un certain montant d’achat ?
Merci
Dgeo Dev
15 Jan 2022Hello, 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
LS
11 Fév 2022Salut 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 !
Dgeo Dev
14 Fév 2022Bonsoir, hum ca devient un peu trop complexe pour un tuto gratuit. Il faudrait plutôt voir du côté d’une application à ce niveau
jeannet
16 Mar 2022Bonjour, 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 !
Dgeo Dev
16 Mar 2022Bonjour et merci pour le message, oui c’est théoriquement possible mais cela demanderait un développement spécifique 🙂