Nous allons voir dans ce tutoriel comment créer une icône de pré-chargement du site afin de faire patienter vos visiteurs. Ce système va calculer le poid total de votre page et afficher un petit loader animé afin de faire clairement comprendre à vos visiteurs que le site va bientôt arriver :p

Installation des codes

L’installation des codes va se passer en 3 parties:

CSS, la mise en forme,
Javascript, le fonctionnement,
Html, l’affichage.

Partie CSS

Rendez-vous dans Boutique en Ligne – Actions – Modifier le code et trouvez le dossier Assets.

Repérez un fichier .css, .css.liquid ou .scss, scss.liquid ! généralement theme, style ou timber.

Une fois le fichier trouvez mettez-vous tout en bas et copiez/collez le code ci-dessous:


.fullpageLoader {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: #fff;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fullpageLoader .fullpageLoader__item {
  position: relative;
}
.fullpageLoader .fullpageLoader__item:after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.fullpageLoader--invisible {
  opacity: 0;
}
.fullpageLoader .dgLoader {
  border: 10px solid #f3f3f3;	
  border-top: 10px solid #999;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: dgLoaderRotate 2s linear infinite;
}
@keyframes dgLoaderRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Partie Javascript

Toujours dans le même dossier Assets et essayez de trouver la même chose mais cette fois ci en .js ou .js.liquid.

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

(function() {
  const dgloaderContainer = document.querySelector('.fullpageLoader');
  document.addEventListener('readystatechange', (event) => {	
    const readyState = "complete";    
    if(document.readyState == readyState) {		
      dgloaderContainer.classList.add('fullpageLoader--invisible');		
	  setTimeout(()=>{			
        dgloaderContainer.parentNode.removeChild(dgloaderContainer);
	  }, 2000)
    }
  });
})();

Partie HTML

Cette fois, ouvrez le dossier Layout et le fichier theme.liquid et repérez la balise body: <body…> et placez la ligne de code sur la ligne suivante:

  <div class="fullpageLoader"><div class="fullpageLoader__item"><div class="dgLoader"></div></div></div>

Besoin de plus de détails ?

Je vous invite à visionner la vidéo ci-dessous !

Merci de me laisser une petite note 😉

[Note moyenne de: 5 sur 5 votes]

Cet article a 4 commentaires

fabien
19 Mar 2021 Répondre

salut et merci

Oups! le loader tourne mais ne disparait pas (page bloqué)

je suis sur theme debut
1. Dgeo Dev
  22 Mar 2021 Répondre
  
  Hello, dans ce cas Il doit y avoir un conflit js… Je conseille de retirer le code du tuto
Nico
21 Mar 2021 Répondre

Tu apportes tellement de valeur mec… Vraiment merci pour ton contenu continues à toi ! Je te vois souvent sur le forum français, moi je suis plus sur le forum américain que Français je trouve le niveau assez bas en France mention spéciale à ketankumar lol
1. Dgeo Dev
  22 Mar 2021 Répondre
  
  Hello et merci pour le com c’est sympa 😉 Oui en france y a quasiment rien 🙁

Installation des codes

Partie CSS

Partie Javascript

Partie HTML

Besoin de plus de détails ?

Vous devriez également aimer

Comment Ajouter des Traductions sur Shopify

Comment Arrondir les Boutons sur Shopify

Comment créer un bouton direct checkout sur shopify ?

Cet article a 4 commentaires

fabien

Dgeo Dev

Nico

Dgeo Dev

Laisser un commentaire Annuler la réponse

Envie d'apprendre à Coder et Maitriser ton Thème Shopify ?