Nous allons voir dans ce tutoriel shopify comment proposer à vos clients un code promo selon la quantité mise dans leur panier ! Ce système sera mis en place sur vos fiches produits avec une information en temps réel de la somme restante à dépenser afin d’avoir un code promo exclusif !
Rendez-vous dans l’administration de votre boutique – cliquez sur Boutique en ligne – Actions – Modifier le code.
Code HTML – Placement
Ouvrez le dossier Sections et trouvez le fichier product-template.liquid – écrivez des petits « toto1, toto2 toto3 » un peu partout afin de trouver l’emplacement idéal ! Selon les thèmes la zone du formulaire d’achat se trouve dans Snippets – ouvrez donc ce dossier et recherchez un product-form.liquid ou nom avec un form dedans :p et répétez la technique du toto et copiez/collez le code suivant:
Trouvez dans le dossier Assets votre fichier .scss.liquid ou .css.liquid ! généralement theme.scss.liquid ou style.scss.liquid – mettez-vous tout en bas du fichier et copiez/collez le code suivant:
Cette fois ci, toujours dans le dossier Assets trouvez le fichier theme.js.liquid ou style.js.liquid bref un fichier .js 😉 et copiez/collez le code ci-dessous:
/* Comment proposer un code promo à partir d'un certain montant d'achat sur Shopify */
(function() {
if(document.querySelector('.ptgdContainer')) {
/* Prix en centimes ou cents */
let priceToGetDiscount = "20000";
const ptgdCurrency = "€";
const ptgddiscountCode = "CODE30";
const ptgdTextBeforeSuccess = "Félicitations ! vous pouvez désormais utiliser le code promo";
const ptgdTextAfterSuccess = "à l'étape du paiement";
const ptgdTextBefore = document.querySelector('.ptgdTextBefore');
const ptgdTextAfter = document.querySelector('.ptgdTextAfter');
const ptgdContainer = document.getElementById('price_to_get_discount');
const ptgdBtnsSubmit = document.querySelectorAll('button[type="submit"]');
const ptgdPrice = document.querySelector('.ptgdContainer strong');
console.log(ptgdPrice);
function decimaConverter(num) {
let number = (num * 100 + 0.01 * 100) / 10000;
return number.toFixed(2);
}
function cartTotalPrice() {
setTimeout(function(){
fetch("/cart.js")
.then(cart => cart.json())
.then(cart => {
let priceRemaining = priceToGetDiscount - cart.total_price;
if(cart.total_price >= priceToGetDiscount) {
ptgdTextBefore.textContent = ptgdTextBeforeSuccess;
ptgdContainer.textContent = '"'+ptgddiscountCode+'"';
ptgdTextAfter.textContent = ptgdTextAfterSuccess;
}
else {
if(priceRemaining > 0) {
ptgdContainer.textContent = `${decimaConverter(priceRemaining)}€`;
}
}
ptgdPrice.classList.remove('ptgdLoader');
})
.catch(error => console.log("Erreur : " + error));
}, 1000);
}
cartTotalPrice();
ptgdBtnsSubmit.forEach(btn => {
if (btn.getAttribute('name') == "add") {
btn.addEventListener('click', function() {
cartTotalPrice();
});
}
});
}
})();
Comment personnaliser tout le système ?
Vous souhaitez modifier les textes, le code promo, les valeurs et le design ? dans ce cas je vous invite à visionner la vidéo ci-dessous :
DidierR
12 Fév 2021Bonjour, malheureusement sur le thème warehouse le nombre ne veut pas s’afficher. La roulette tourne indéfiniment. Avez-vous une solution ? merci!
jerome
18 Mai 2021Bonjour, j’ai le thème minimal et j’ai le même problème que Didier la roulette tourne sans s’arrêter. Pouvez-vous nous aider? Merci