Tuto barre d’information avec textes dynamiques sur shopify

Nous allons créer une barre d’information avec des phrases dynamiques

Vous pouvez voir l’exemple ici: https://dgeodev.com/texte-qui-defile/

Vous aurez le choix entre 3 et 6 phrases grâce à la modification de la variable: « dynamicWordNumber »

Partie CSS

Rendez vous dans online store – actions – edit code – assets

Trouvez votre fichier .scss.liquid

En général c’est theme.scss.liquid ou timber.scss.liquid ou default.scss.liquid ou style.scss.liquid

Copiez/Collez le code ci-dessous tout en bas du fichier:

Si vous souhaitez changer les couleurs il faudra modifier le : « f0f0f0 » (gris du bandeau) et « ff6600 » (orange du texte défilant)

Si vous ne souhaitez pas que cette barre soit par dessus votre header, vous pouvez supprimer la propriété « position:absolute; »

.dynamic-headline {
 font-family:Helvetica;
 font-size:18px;
 font-weight:bold;
 color:#333;
 background:#f0f0f0;
 position: absolute;
 top:0;
 line-height: 35px;
 text-align: center;
 width: 100%;
 left:0;
 z-index:999;
 right:0;
}
.dynamic-headline .change {
 color:#ff6600;
}
.dynamic-headline .typed-cursor {
 color:#ff6600;
 font-weight: 300;
}
@media screen and (max-width: 800px) {
 .dynamic-headline { 
 font-size:15px; 
 line-height: 18px;
 padding:5px 0;
 position:relative;
 top:auto; 
 left:auto;
 right:auto;
 }
}

Partie JS

Rendez vous dans online store – actions – edit code – assets

Trouvez le fichier .js.liquid

En général c’est theme.js.liquid ou timber.js.liquid ou default.js.liquid ou style.js.liquid

Copiez/Collez le code ci-dessous tout en bas du fichier:

Vous pouvez changer la valeur de la variable: « dynamicWordNumber » afin d’afficher entre 3 et 6 phrases

Pour modifier ces phrases il vous suffit d’éditer les variables: « dynamicWord1 , dynamicWord2 etc… »

ATTENTION ! il faut impérativement garder les doubles quotes afin d’éviter les catastrophes et le harcéllement par mail que je risque de subir 😀

// Options du script - ATTENTION à bien garder les " " pour éviter la catastrophe !
// nombre de phrases souhaitées - choix entre 3 et 6 maximum
dynamicWordNumber = 3;
dynamicWord1 = "des prix attractifs";
// 2ere phrase
dynamicWord2 = "la livraison gratuite";
// 3ere phrase
dynamicWord3 = "une garantie satisfait ou remboursé";
// 4ere phrase
dynamicWord4 = "un service après vente de qualité";
// 4ere phrase
dynamicWord5 = "etc..";
// 4ere phrase
dynamicWord6 = "etc";
// ne pas toucher
!function(t){"use strict";var s=function(s,e){this.el=t(s),this.options=t.extend({},t.fn.typed.defaults,e),this.text=this.el.text(),this.typeSpeed=this.options.typeSpeed,this.startDelay=this.options.startDelay,this.backSpeed=this.options.backSpeed,this.backDelay=this.options.backDelay,this.strings=this.options.strings,this.strPos=0,this.arrayPos=0,this.stopNum=0,this.loop=this.options.loop,this.loopCount=this.options.loopCount,this.curLoop=0,this.stop=!1,this.build()};s.prototype={constructor:s,init:function(){var t=this;t.timeout=setTimeout(function(){t.typewrite(t.strings[t.arrayPos],t.strPos)},t.startDelay)},build:function(){this.cursor=t('<span class="typed-cursor">|</span>'),this.el.after(this.cursor),this.init()},typewrite:function(t,s){if(!0!==this.stop){var e=Math.round(70*Math.random())+this.typeSpeed,o=this;o.timeout=setTimeout(function(){var e=0,i=t.substr(s);if("^"===i.charAt(0)){var n=1;i.match(/^\^\d+/)&&(n+=(i=i.replace(/^\^(\d+).*/,"$1")).length,e=parseInt(i)),t=t.substring(0,s)+t.substring(s+n)}o.timeout=setTimeout(function(){if(s===t.length){if(o.options.onStringTyped(o.arrayPos),o.arrayPos===o.strings.length-1&&(o.options.callback(),o.curLoop++,!1===o.loop||o.curLoop===o.loopCount))return;o.timeout=setTimeout(function(){o.backspace(t,s)},o.backDelay)}else 0===s&&o.options.preStringTyped(o.arrayPos),o.el.text(o.text+t.substr(0,s+1)),s++,o.typewrite(t,s)},e)},e)}},backspace:function(t,s){if(!0!==this.stop){var e=Math.round(70*Math.random())+this.backSpeed,o=this;o.timeout=setTimeout(function(){o.el.text(o.text+t.substr(0,s)),s>o.stopNum?(s--,o.backspace(t,s)):s<=o.stopNum&&(o.arrayPos++,o.arrayPos===o.strings.length?(o.arrayPos=0,o.init()):o.typewrite(o.strings[o.arrayPos],s))},e)}},reset:function(){clearInterval(this.timeout);var t=this.el.attr("id");this.el.after('<span id="'+t+'"/>'),this.el.remove(),this.cursor.remove(),this.options.resetCallback()}},t.fn.typed=function(e){return this.each(function(){var o=t(this),i=o.data("typed"),n="object"==typeof e&&e;i||o.data("typed",i=new s(this,n)),"string"==typeof e&&i[e]()})},t.fn.typed.defaults={strings:["These are the default values...","You know what you should do?","Use your own!","Have a great day!"],typeSpeed:0,startDelay:0,backSpeed:0,backDelay:500,loop:!1,loopCount:!1,callback:function(){},preStringTyped:function(){},onStringTyped:function(){},resetCallback:function(){}}}(window.jQuery);
// script génére
if(dynamicWordNumber == 3) {
$(function(){
 $(".change").typed({
 strings: [dynamicWord1, dynamicWord2, dynamicWord3],
 loop: true,
 backDelay: 300,
 typeSpeed: 70
 });
});
}
if(dynamicWordNumber == 4) {
$(function(){
 $(".change").typed({
 strings: [dynamicWord1, dynamicWord2, dynamicWord3, dynamicWord4],
 loop: true,
 backDelay: 300,
 typeSpeed: 70
 });
});
}
if(dynamicWordNumber == 5) {
$(function(){
 $(".change").typed({
 strings: [dynamicWord1, dynamicWord2, dynamicWord3, dynamicWord4, dynamicWord5],
 loop: true,
 backDelay: 300,
 typeSpeed: 70
 });
});
}
if(dynamicWordNumber == 6) {
$(function(){
 $(".change").typed({
 strings: [dynamicWord1, dynamicWord2, dynamicWord3, dynamicWord4, dynamicWord5, dynamicWord6],
 loop: true,
 backDelay: 300,
 typeSpeed: 70
 });
});
}

Partie HTML

C’est la partie ou vous allez placer votre barre d’information

Rendez vous dans online store – actions – edit code – sections – header.liquid

Copiez/collez le bout de code ci-dessous en haut du fichier

La barre va se fixer en haut du site, il faudra donc supprimer votre free shipping bar actuelle ou alors bidouiller le code pour l’afficher ailleurs

Vous pouvez bien sur modifier le texte de la balise ci-dessous, la portion de phrase: « Sur notre site vous aurez »

<div class="dynamic-headline">Sur notre site vous aurez <span class="change"></span><span class="typed-cursor"></span></div>

Sauvegardez bien vos modifications car ce tuto est assez complexe par rapport aux autres

34 commentaires sur “Tuto barre d’information avec textes dynamiques sur shopify

  1. Antonin

    Salut. Superbe fonctionnalité, est-il possible de faire en sorte que cette barre d’information reste collée au header et qu’elle ne se mette pas en plein sur le header.

    Merci

  2. dylan

    Salut,

    J’ai remarqué un léger problème lorsque l’on veut mettre 5 phrases, à la fin du défilements des 5 phrases cela ne se remet pas à zéro alors qu’avec 4 oui.

  3. ChikitoNinho

    Salut encore merci pour tes tutos très instructifs.
    Je voudrais savoir comment réduire la largeur de la barre d’info car sur le theme supply elle mange un peu sur le texte de la barre d’info de base du theme.
    Thx

  4. siumoy

    Bonjour,
    J’aime beaucoup tes tutos, sauf que j’ai un soucis je n’ai que un bout du message qui s’affiche et le reste des phrases ne défilent pas, j’ai dû louper quelque chose là.

  5. JO

    Salut une petite question, comment pourrais-je faire pour déplacer la barre? j’ai effacé « position:absolute; » mais la barre reste toujours au-dessus de mon header

  6. Cedric

    Bonjour Geoffrey,

    Merci pour toutes ces infos !

    J’ai un léger soucis sur cette modif, tout fonctionne parfaitement, sauf lorsque je suis sur une page produit, le texte dynamique n’est plus là, il n’y a que la partie fixe

    Une solution ?

    Merci
    Cédric

  7. Florian

    Bonjour super tuto !
    Cependant j’ai un petit soucis, le texte dynamique s’affiche en arrière plan de mon header, il est transparent et on voit le texte accès mal. J’utilise une boutique avec le thème Retina.
    Comment faire pour qu’il passe en premier plan ?
    J’ai aussi essayé d’enlever le « position:absolute; », rien de change ou bouge.

    Merci 🙂

    1. Dgeo GD

      Bonjour, selon les thèmes il faut parfois le positionner ailleurs notamment après le header (fin de balise) n’hésitez pas à faire des textes de positionnement afin de l’adapter au mieux
      Bo WE

  8. Blerdon Débieux

    Bonjour,

    sur la partie ordinateur ça fonctionne très bien. (j’ai fait les changements pour que ça n’apparaissent pas sur le header)

    Malheureusement, sur la version mobile, la barre s’affiche par-dessus le header.

    Merci d’avance !!

    1. Dgeo GD

      Bonjour, selon les thèmes il faut parfois le positionner ailleurs notamment après le header (fin de balise) n’hésitez pas à faire des textes de positionnement afin de l’adapter au mieux
      Bo WE

  9. Olivier

    Salut ! merci super tuto !

    Cependant est-il possible de modifier l’affichage entre la fin de phrase et le début de l’autre ?
    Que la nouvelle vienne s’afficher directement sans que la précédente ne s’efface à reculons ?

    Merci à toi
    Cordialment
    Olivier

  10. Ferreira Matthias

    Bonjour, tout abord un grand merci pour vos tutos de très grande qualité ! j’ai une question au sujet de la phrase dynamique , tout fonctionne parfaitement pour la version web mais pour la version mobile impossible d’avoir la bannière à l’endroit désiré, malgré les aides apportées dans les commentaires, auriez vous une solution pour palier à ce problème car elle se retrouve tout en bas de la page et c’est inutile si ça ne saute pas aux yeux de l’acheteur dès son arrivé sur le site. Encore un grand merci,
    Cordialement, Matthias Ferreira

Laisser un commentaire

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

*
*