Remplacer la réduction en euro par le pourcentage sur le thème supply

Le code idéal qui va calculer le % de réduction d’un produit et remplacer le fameux économisez €x euro  !

Attention ce Tuto n’a été testé que sur le Thème Supply !

Si vous avez un autre thème vous devez me le signaler et nous pourrons voir ensemble si ce code peut être porté ou adapté à votre thème

Les étapes

 

#1 Vous devez tout d’abord vous rendre dans votre administration du site et plus spécifiquement sur l’onglet « Online store »

 

#2 Cliquez sur Action en haut à droite, cliquez sur « Edit HTML et CSS »

 

#3 Naviguez dans la colonne de gauche pour trouver l’onglet « sections », cliquez dessus pour dévoiller le contenu du dossier

 

#4 Trouvez le fichier product-template.liquid et cliquez dessus

 

#5 Trouvez la zone de l’image ci-dessous

 

tuto-showpercents-1

 

#6 Copier/coller le code ci-dessous

<style>.sale-tag { display:none !important; } .sale-tag-percents { display:inline-block !important; border:2px solid #ff6600; padding:2px 5px; font-size:21px; }</style>
<span id="comparePrice-{{ product.id }}" class="sale-tag sale-tag-percents large"></span>
<script type="text/javascript">
var RRP = {{ product.compare_at_price_min | money_without_currency }};
var minPrice = {{ product.price_min | money_without_currency }};
var youSave = RRP - minPrice;
var youSavePerc = Math.round(((RRP - minPrice) / RRP) * 100);
var myText = "-" + youSavePerc + "%";
$("#comparePrice-{{ product.id }}.sale-tag-percents").html(myText);
</script>

Le résultat que vous devez avoir :
tuto-showpercents-2

 

#7 Cliquez sur le bouton Save pour enregistrer vos modifications en suivant l’exemple ci-dessous

 

tuto-showpercents-3

 

#8 Si vous souhaitez également avec les % sur la page collections ou la page d’accueil vous devez produire les étapes #3 à 7 mais en modifiant le fichier : product-grid-item.liquid qui se trouve dans sous le dossier Snippets

 

#9 Retournez sur une page produit et sur vos pages collections pour voir si tout ce passe bien et que votre % apparaisse !

Si vous avez la moindre demande ou que vous rencontrez des problèmes contactez moi en utilisant le formulaire situé sur la page d’accueil

Vous souhaitez me remercier ? un petit don même minime ca fait tjs plaisir 😉
Je veux faire un don

28 commentaires sur “Remplacer la réduction en euro par le pourcentage sur le thème supply

  1. Matthieu

    Bonjour Geoffrey,

    avant de faire des c…. bêtises, je te signale donc que j’utilise le thème Brooklyn. Celui-ci procède de la même façon que Supply visiblement, car il affiche le « économisez x € », ce qui fait un peu cheap (c’est le cas de le dire) lorsque les prix des produits tournent autour des 10€. Ça fait mieux de dire économisez 20% que 2€ !

    Du coup pensez-tu que le code est le même pour Brooklyn ?

    Merci beaucoup pour tes tutos ! Tu devrais bosser chez Shopify 😛

    1. dgeo22

      Salut,

      Jamais testé sur Brooklyn, ce que je sais c’est qu’en général ce thème n’aime pas trop mes codes… cela dit tu peux tester et si ca ne fonctionne pas retirer tes modifs en copiant avant tes fichiers d’origines pour revenir en arrière au besoin. bonne soirée

  2. Shirley

    Bonsoir,

    j’ai testé sous le thème Brooklyn et ça fonctionne #1 🙂 MERCI beaucoup ….

    Par contre, pour les chiffres dépassants le 999.99 donc disons 1001.99$ … Il me mets un tout petit carré « vide » … Il ne veut pas prendre 4 chiffres …

    J’ai essayé avec point, avec virgules, sans points, sans virgules, même sans rien du tout ni points ni virgules etc etc Mais ça ne veut pas …

    Une idée du problème ? J’adore ce tuto et j’aimerais que tout fonctionne super bien …

  3. Shirley

    Un autre personne serait au courant de ce que je devrais faire ?
    J’ouvre ma boutique bientôt et j’aimerais que ce soit parfait …. Merciiiiii :•)

    1. Dgeo GD

      Bonsoir, sans tester directement sur le site, je ne saurais répondre à cette question.
      A vue de nez essayer de remplacer cette ligne :
      var youSavePerc = Math.round(((RRP – minPrice) / RRP) * 100);
      Par
      var youSavePerc = ((RRP – minPrice) / RRP) * 100);

  4. Fabrice

    Hello,

    Je trouve cette solution génial, mais malheureusement je n’ai pas réussi à l’implémenter dans le théme « Debut ». quelqu’un aurait une solution?

    Merci d’avance 🙂

  5. Shirley

    Nous sommes le 29 mars … Je pensais ouvrir le 1er avril … Vraiment aucune idée ???
    Si je ne réussie pas à régler le problème je devrai supprimer le mode pourcentage et je l’adore …. Je ne veux tellement pas le supprimer …. Mais je n’aurai pas le choix car des petits carrés vides ce n’est pas très nécessaires ni esthétique … SVP 🙂

  6. angie

    coucou ca ne fonctionne pas, je l ai fais 3 fois, j ai vérifié bref y a t il des mises à jours lol car ça ne le fait pas c’est toujours écris ECONOMISER 1€ xpldrrrrr , merci de ta réponse Mr dufour

  7. Gaël

    Bonsoir, excuse moi de te déranger, j’aimerais faire la manipulation sur le thême brooklyn (chez certain ça fonctionne apparemment au vu des commentaires) mais que sur le product-grid-item.liquid pour avoir la réduction en pourcentage sur la page d’accueil et dans les collections, mais je ne trouve pas la zone où il faut placer le code, pourrais-tu m’aider ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*