Comment Faire un Calculateur d'Économies sur Shopify ?

Comment faire un calculateur d’économies et le mettre sur Shopify ? C’est la question qu’une personne m’a demandé et je me suis aperçu que cela n’existait pas et cela m’a donné envie d’en créer un :p

Comment fonctionne ce calculateur ?

Il se base sur des codes promos que vous allez devoir créer au préalable sur Shopify ! vous allez devoir les créer sur Shopify et ensuite prendre les noms des codes promos pour les mettre dans le système (le JS). Des options seront également possibles !

Comment le mettre en place ?

Côté Shopify

Rendez-vous sur votre boutique et cliquez sur l’onglet Réductions et créez 3 codes de réductions à base de pourcentage ! du style…

Moins de 50e : -10% sur tous les produits
De 50 à 100e : -15% sur tous les produits
Plus de 100e : -20% sur tous les produits

Une fois les codes promos créés, mémorisez leurs intitulés car on va en avoir besoin ! exemple: PROMO10, PROMO15, PROMO20…

Côté Code

Rendez-vous cette fois-ci dans les fichiers de votre thème -> Boutique en ligne – Actions – Modifier le code.

Le CSS

Ouvrez le dossier Ressources (Assets) et trouvez votre fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise.

Mettez-vous tout en bas et copiez/collez le code suivant:

.dgPriceCalculator__wrapper {
  display:block;
}
.dgPriceCalculator {
  display:inline-block;
  background:#EEE;  
  padding:1.3rem;
  border:1px solid rgba(0,0,0,0.05);
}

.dgPriceCalculator * {
  margin:0;
  color:#333;
}
.dgPriceCalculator label {
 display:inline-block; 
}
.dgPriceCalculator p {
  margin-bottom:.6rem;
}
.dgPriceCalculator p.lastp {
  margin-bottom:0;
}
.dgPriceCalculator .dgPriceCalculator__title {
  margin-bottom:1rem;  
  text-align:center;
  padding-bottom:.8rem;
  border-bottom:1px solid rgba(0,0,0,0.05);
  text-transform:uppercase;
}
.dgPriceCalculator__info {
  margin-top:1rem;
  padding-top:1rem;
  text-align:center;
  border-top:1px solid rgba(0,0,0,0.05);
}
.dgPriceCalculator input, .dgPriceCalculator button {
  padding:7px 10px;
}
.dgPriceCalculator button {
  background:#333;
  padding:4px 10px 5px 10px;
  color:#FFF;
  border:1px solid #333;
  box-shadow:none;
  cursor:pointer;
  text-transform:uppercase;
}

Le Javascript

Restez dans le dossier Ressources (Assets) et trouvez votre fichier .js, généralement theme, app ou global.

Mettez-vous tout en bas et copiez/collez le code suivant:

const dgGetPriceSaving = () => {
  
  const currency = "€";   
  const pourcentageCode1 = 10;
  const pourcentageCode2 = 20;
  const pourcentageCode3 = 30; 
  const tarifMinCode1 = 25;
  const tarifMinCode2 = 50;   
  const tarifMinCode3 = 100; 
  const discountCode1 = "codepromo10";
  const discountCode2 = "codepromo20";
  const discountCode3 = "codepromo30";
  
  let price = Number(document.getElementById("dgPriceCalculator__price").value); 
  let percent = "";
  let discountCode = "";
  if(price >= tarifMinCode1 && price < tarifMinCode2) {
    percent = pourcentageCode1
    discountCode = discountCode1
  }
  if(price >= tarifMinCode2 && price < tarifMinCode3) {
    percent = pourcentageCode2
    discountCode = discountCode2
  }
  if(price >= tarifMinCode3) {
    percent = pourcentageCode3
    discountCode = discountCode3
  } 
  let discount = percent / 100;
  let total = price - (price * discount)
  if(Number.isFinite(price)) {
    document.getElementById("dgPriceCalculator__total").innerHTML = `<p> Vous ne payerez que:  <strong>${total.toFixed(2)}${currency}</strong></p>`;    document.getElementById("dgPriceCalculator__priceSaving").innerHTML = `<p> Vous économisez: <strong>${(price - total).toFixed(2)}${currency} </strong></p><p class="lastp">Code Promo à utiliser:  <strong> ${discountCode} </strong></p>`;
  }
}

Les paramètres à modifier

Attention vous ne devez modifier des les valeurs après le égal et entre les doubles guillemets ! seuls les nombres ne doivent pas être entre guillemets !

const currency = « € »; = Votre devise
const pourcentageCode1 = 10; = Le % de votre 1er code promo
const pourcentageCode2 = 20; = Le % de votre 2eme code promo
const pourcentageCode3 = 30; = Le % de votre 3eme code promo
const tarifMinCode1 = 25; = Le prix mini de votre 1er code promo
const tarifMinCode2 = 50; = Le prix mini de votre 2eme code promo
const tarifMinCode3 = 100; = Le prix mini de votre 3eme code promo
const discountCode1 = « CODE10 »; = Le nom de votre 1er code promo
const discountCode2 = « CODE20 »; = Le nom de votre 2eme code promo
const discountCode3 = « CODE30 »; = Le nom de votre 3eme code promo

Le HTML

Maintenant il va falloir placer le calculateur. Bien souvent c’est dans une section HTML de la page d’accueil de votre site mais vu que c’est du HTML vous allez pouvoir le mettre ou vous voulez à partir du moment ou vous pouvez copier/coller du HTML.

Dans une fiche produit ou contenu Shopify en cliquant au niveau de l’éditeur sur le <> pour passer en mode code
Dans un fichier .liquid de votre thème
Dans une section HTML de votre page d’accueil

Choisissez donc un des 3 emplacements et copiez/collez le code ci-dessous:

<div class="dgPriceCalculator__wrapper">
    <div class="dgPriceCalculator">
      <p class="dgPriceCalculator__title"><strong>Calculateur d'économies</strong></p>
      <label> Total d'achat : </label>
      <input type="text" id="dgPriceCalculator__price" placeholder="somme"> €  
      <button onclick="dgGetPriceSaving()">
        Calculer
      </button>  
      <div class="dgPriceCalculator__info">
        <div id="dgPriceCalculator__total"></div>  
        <div id="dgPriceCalculator__priceSaving"></div>
      </div>
    </div>
 </div>