Comment proposer un Code Promo à partir d’un certain montant d’achat sur Shopify

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 !

Voir le résultat ici: https://dgeodev.myshopify.com/products/produit-2

Comment mettre le système en place ?

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:

<div class="ptgdContainer">
  <p>
    <svg enable-background="new 0 0 512 512" height="20" width="20" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m203.556 345.012 70.71-212.133c2.619-7.859-1.628-16.354-9.487-18.974-7.858-2.619-16.354 1.628-18.974 9.487l-70.71 212.133c-2.619 7.859 1.628 16.354 9.487 18.974 1.573.524 3.173.773 4.745.773 6.28.001 12.133-3.974 14.229-10.26z"/><path d="m309.533 279.203c24.813 0 45-20.187 45-45s-20.187-45-45-45-45 20.187-45 45 20.187 45 45 45zm0-60c8.271 0 15 6.729 15 15s-6.729 15-15 15-15-6.729-15-15 6.729-15 15-15z"/><path d="m139.827 189.203c-24.813 0-45 20.187-45 45s20.187 45 45 45 45-20.187 45-45-20.186-45-45-45zm0 60c-8.271 0-15-6.729-15-15s6.729-15 15-15 15 6.729 15 15-6.728 15-15 15z"/><path d="m509 186-52.307-69.743 2.041-14.283c.667-4.674-.904-9.39-4.243-12.728l-31.82-31.82 31.819-31.82c5.858-5.857 5.858-15.355 0-21.213-5.857-5.857-15.355-5.857-21.213 0l-31.819 31.82-31.82-31.82c-3.338-3.339-8.054-4.905-12.728-4.243l-148.493 21.213c-3.213.459-6.19 1.948-8.485 4.243l-183.848 183.848c-21.445 21.444-21.445 56.338 0 77.782l155.563 155.564c3.182 3.182 6.666 5.881 10.353 8.118v6.082c0 30.327 24.673 55 55 55h220c30.327 0 55-24.673 55-55v-262c0-3.245-1.053-6.404-3-9zm-471.703 80.023c-9.748-9.748-9.748-25.608 0-35.356l180.312-180.312 136.118-19.445 26.517 26.517-21.213 21.213-10.607-10.607c-5.857-5.857-15.355-5.857-21.213 0s-5.858 15.355 0 21.213l42.427 42.427c2.929 2.929 6.768 4.394 10.606 4.394s7.678-1.465 10.606-4.394c5.858-5.857 5.858-15.355 0-21.213l-10.607-10.607 21.213-21.213 26.517 26.517-19.446 136.118-180.311 180.312c-4.722 4.722-11 7.322-17.678 7.322s-12.956-2.601-17.678-7.322zm444.703 190.977c0 13.785-11.215 25-25 25h-220c-13.164 0-23.976-10.228-24.925-23.154 13.567-.376 27.022-5.714 37.353-16.046l183.848-183.848c2.295-2.295 3.784-5.272 4.243-8.485l13.173-92.21 31.308 41.743z"/></g></svg>
    <span class="ptgdTextBefore">Il reste</span>
    <strong id="price_to_get_discount" class="price_to_get_discount ptgdLoader"></strong>
    <span class="ptgdTextAfter">à dépenser pour obtenir votre bon de réduction !</span>
  </p>
</div>

Code CSS – Mise en forme

Trouvez dans le dossier Ressources (Assets) votre fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise – mettez-vous tout en bas du fichier et copiez/collez le code suivant:

.ptgdContainer p {
  //color:green;
  display:flex;
  align-items: center;  
  flex-wrap:wrap;
 
}
.ptgdContainer svg {
  // fill:green;
  margin-right:7px;
}
.ptgdContainer strong {
  // color:green;
  margin:0 5px;
}
.ptgdLoader { 
  border: 3px solid #F0F0F0; /* Light grey */
  border-top: 3px solid #999; /* Blue */
  border-radius: 50%;
  width: 17px;
  height: 17px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Code Javascript – Fonctionnement et paramètres

Cette fois ci, toujours dans le dossier Ressources (Assets) trouvez le fichier theme.js ou global.js 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 :

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 2 votes]

Besoin d'aide ?

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.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 2 commentaires

  1. DidierR

    12 Fév 2021 Répondre

    Bonjour, malheureusement sur le thème warehouse le nombre ne veut pas s’afficher. La roulette tourne indéfiniment. Avez-vous une solution ? merci!

  2. jerome

    18 Mai 2021 Répondre

    Bonjour, 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

Laisser un commentaire

Fermer le menu
×
×

Panier