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 !
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 🙁