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 du Snippet
Rendez-vous dans boutique en ligne – Actions – Modifier le code – dossier Snippets – Cliquez sur Créer un nouveau snippet 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 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 snippet « 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 😉
Alfred. E
21 Nov 2020Excellent ! Merci pour tout ce temps et ces tutos incroyables.