Nous allons voir dans ce tutoriel comment créer une barre d’information différente à chaque visite d’un client. En effet ce système va vous permettre de proposer à vos clients jusqu’à 3 barres d’information avec par exemple des codes promos de plus en plus intéressant à chaque visite. C’est idéal pour proposer une sorte de système de fidélité sur shopify et ainsi rendre l’expérience utilisateur plus proche du client.

Bien plus qu’un tutoriel !

Niveau code c’est du lourd et limite j’aurai pu en faire une application tant le code est complexe. A vrai dire j’ai honnêtement failli proposer le tuto en payant mais bon soyons fou ! on est la pour aider la communauté alors go !!! par contre vous pouvez m’offrir un Tip en cliquant sur ce lien pour me récompenser de mon dur labeur 😀 le tuto m’a pris plusieurs jours quand même… Remercier Dgeo !

Comment fonctionne le code ?

Vous allez pouvoir proposer 3 bandeaux d’information à chaque visite de vos clients. La première fois qu’il arrivera sur votre boutique, la 2ème fois et la 3ème fois ! Dans un premier temps lui souhaiter la bienvenue, dans un second temps lui proposer un code promo de 10% ou 20% et lors de la 3ème visite lui proposer une réduction plus conséquente ou tout simplement lui proposer un code de livraison gratuite etc… bref vous avez le champ libre 😉

Afin que le système de compte pas chaque changement de page comme étant une nouvelle visite, le code va partir du principe qu’une barre d’information sera proposé minimum 1 jour ! Pourquoi ? car permet de rester logique. Imaginez il achète un produit plein pot et il revient 2h après et qu’il voit une proposition d’un code promo ! eh bin il va pas être content 😀 Du coup la barre d’info suivante s’affichera 1 jour après ou plus selon sa venue. Si il a vu la barre 1 aujourd’hui et qu’il revient dans 1 mois et bien il verra la barre 2 etc etc… J’espère que c’est clair pour vous 😉

Vous n’êtes pas obligé de proposer 3 barres car ça peut être lourd. Personnellement je n’affiche rien à la 1ère visite ensuite je propose un code promo à la 2ème visite en le remerciant d’être revenu sur notre site et pour la 3ème visite je lui propose un code promo plus gros 😉

Installation et options du système

Création d’un extrait (Snippet)

Rendez-vous dans boutique en ligne – Actions – Modifier le code – dossier Extraits (Snippets) – Cliquez sur Créer un nouveau extrait et nommez le : « loyalty-bar » et copiez/collez l’intégralité sur code ci-dessous:

<style>

    .banner-info {
      background:#FF6600;
      color:#FFF;
      width:100%;
      position:relative;     
      text-align:center;
      padding:10px 15px;
      box-shadow:0 0 5px rgba(000,000,000,0.4);
    }
    .banner-info span {
      font-weight:bold;
      border:1px dashed #FFF;
      padding:3px 5px;
    }
    .banner-info .banner-close {
      position:absolute;
      right:7px;
      top:7px;
    }
    .banner-info .banner-close:hover {
     cursor:pointer; 
    }
    
  </style>
    
    
  <script>
    
    window.addEventListener("DOMContentLoaded", (event) => {
     
      (function() {      

        function createBanner(text1,discount,text2) {
          let textBefore = text1;
          let discountCode = discount;        
          let textAfter = text2;
          let textFinal = `${textBefore} ${discountCode} ${textAfter}`;
          return textFinal;          
        }   

        /* Début zone administrable */

        /* Settings */ 
        const settings = {
          banner1ereVisite:"oui", 
          banner2emeVisite:"oui",
          banner3emeVisite:"oui",
          dureeVieCookieEnJours:"1",
          dureeVieFermetureBandeauEnHeures:"1"
        }        

        /* Contenu */      
        const banner1 = createBanner("Pour vous souhaiter la bienvenue nous vous proposons le code promo","<span>CODE10</span>","d'une valeur de -10% valable sur votre 1er achat !");
        const banner2 = createBanner("Nous sommes ravis de vous revoir ! pour vous remercier de votre fidèlité nous vous proposons le code promo","<span>CODE20</span>","d'une valeur de -20% valable sur votre prochain achat !");
        const banner3 = createBanner("Nous sommes ravis de vous revoir ! pour vous remercier de votre fidèlité nous vous proposons le code promo","<span>CODE30</span>","d'une valeur de -30% valable sur votre prochain achat !");

        /* Fin zone administrable */ 

        const nbHour = settings.dureeVieFermetureBandeauEnHeures * 3600;  
        const today = new Date();

        function getCookie(name) {
          name = name + "=";
          var cookies = document.cookie.split(';');
          for(var i = 0; i <cookies.length; i++) {
            var cookie = cookies[i];
            while (cookie.charAt(0)==' ') {
              cookie = cookie.substring(1);
            }
            if (cookie.indexOf(name) == 0) {
              return cookie.substring(name.length,cookie.length);
            }
          }
          return "";
        }

        function setCookie(name, value, expirydays) {
          var d = new Date();
          d.setTime(d.getTime() + (expirydays*24*60*60*1000));
          var expires = "expires="+ d.toUTCString();
          var path = "path=/";
          document.cookie = name + "=" + value + "; " + path + ";" + expires;
        }

        function setCookieDate(name, value, expirydays) {
          var d1 = new Date();
          var d2 = new Date();
          d1.setTime(d1.getTime() + (value*24*60*60*1000));
          d2.setTime(d2.getTime() + (expirydays*24*60*60*1000));        
          var value = d1.toUTCString();
          var expires = d2.toUTCString();
          var path = "path=/";        
          document.cookie = name + "=" + value + "; " + path + "; expires=" + expires;
        }

        function deleteCookie(name){
          setCookie(name,"",-1);
        }       
        
        // check cookie and number of visits      

        if (getCookie("dgeo_visitor_count") == "" || getCookie("dgeo_visitor_count") == null) {
          setCookieDate("dgeo_visitor_date", settings.dureeVieCookieEnJours, 3650); 
          setCookie("dgeo_visitor_count", 1, 3650); 
          console.log('1 visit');         
        }

        else {

          if (Date.parse(getCookie("dgeo_visitor_date")) < Date.parse(today)) {
            //console.log('totototo'); 
            if (getCookie("dgeo_visitor_count") == 1) {
              setCookieDate("dgeo_visitor_date", settings.dureeVieCookieEnJours, 3650); 
              setCookie("dgeo_visitor_count", 2, 3650);
              //console.log('11111'); 
            }
            else if (getCookie("dgeo_visitor_count") == 2) {
              setCookieDate("dgeo_visitor_date", settings.dureeVieCookieEnJours, 3650); 
              setCookie("dgeo_visitor_count", 3, 3650);
              //console.log('2222'); 
            }
            else if (getCookie("dgeo_visitor_count") == 3) {
              setCookieDate("dgeo_visitor_date", settings.dureeVieCookieEnJours, 3650); 
              setCookie("dgeo_visitor_count", 4, 3650);
              //console.log('3333');           
            }
            else {
              setCookie("dgeo_visitor_count", 99, 3650);
            }
          }

        }    

        const bannerStatut = getCookie('dgeo_visitor_count');      

        if(bannerStatut) {                     

          function insertBanner(elem) {
            let firstElem = document.body.firstElementChild;
            let div = document.createElement('div');
            div.className = "banner-info";      
            div.innerHTML = elem;
            document.body.insertBefore(div, firstElem);  
            let close = document.createElement('div');
            close.className = "banner-close";      
            close.innerHTML = "x";
            div.append(close);       
          }  

          // first visit
          if (getCookie('dgeo_visitor_count') == 1) {          
            if (settings.banner1ereVisite == "oui") {
              insertBanner(banner1);
            }                         
          }
          // second visit
          else if (getCookie('dgeo_visitor_count') == 2) {         
            if (settings.banner2emeVisite == "oui") {
              insertBanner(banner2);
            }

          }
          // third visit
          else if (getCookie('dgeo_visitor_count') == 3) {          
            if (settings.banner3emeVisite == "oui") {
              insertBanner(banner3);
            } 
          }

          else { }         
          

          const bannerInfo = document.querySelector('.banner-info');
          const btnClose = document.querySelector('.banner-close');    

          // close banner
          if(btnClose) {
            btnClose.addEventListener('click', function() {
              bannerInfo.remove();
              document.cookie = "dgeo_visitor_banner_hide=1;max-age="+nbHour;
            });
          }        
        }  
      })();

    });

  </script>

Appel et affichage du système

Ensuite ouvrez le dossier Mise en page (Layout) et votre theme.liquid et mettez vous tout en bas avant la fermeture de la balise </body> et copiez/collez le code suivant:

{% include 'loyalty-bar' %}

Revenons désormais dans notre extrait « loyalty-bar.liquid » et voyons un peu les options qu’on a 🙂

Attention c’est uniquement à cet endroit là que vous allez modifier des choses ! détaillons un peu tout ça:

Option de visibilité

banner1ereVisite: mettez oui pour l’afficher à la 1ère visite,
banner2emeVisite: mettez oui pour l’afficher à la 2ème visite,
banner3emeVisite: mettez oui pour l’afficher à la 3ème visite,
dureeVieCookieEnJours: l’intervalle de temps de proposition d’une nouvelle barre par client unique,
dureeVieFermetureBandeauEnHeures: c’est tout simplement le temps de masquage de la barre actuelle en client sur la petite croix de fermeture. Cela n’a pas d’impact sur le temps d’intervalle de chaque bandeau !

Contenu des bandeaux

Vous allez avoir 1 fonction que vous allez pouvoir éditer 3 fois. Vous l’aurez compris c’est le contenu de chaque bandeau !

Dans le createBanner vous avez 3 délimitations avec des informations pré-remplies que vous pouvez modifier mais attention à bien garder les doubles guillemets ouvrantes et fermantes ! ça va donner cela:

createBanner(« texte avant le code promo », »nom du code promo », »texte après le code promo »);

Assez parlant non ? bref mettez ce que vous voulez 😉 si ca pète bin vous avez du supprimer une guillemet ou autres :p

Ne renseignez les informations que pour les barres que vous avez activé par « oui ».

Phase de tests et options de design

Pfiou c’est compliqué et c’est bien beau mais comment je teste concrètement ? et comment je personnalise les couleurs ?

Bin la… va falloir regarder la vidéo car c’est trop compliqué à expliquer par écrit 😉

Merci de me laisser une petite note 😉

[Note moyenne de: 5 sur 4 votes]

Bien plus qu’un tutoriel !

Comment fonctionne le code ?