Nous allons voir dans ce tutoriel comment animer un Favicon en ajouter une bulle avec la quantité du panier dans l’onglet de votre navigateur. Une petite bulle rouge avec la quantité en blanc sera idéal car lorsque le client part du site et revient il verra tjs cette information.

Installation du code

Rendez-vous dans Boutique en ligneActionsModifier le code et ouvrez le dossier Extraits (Snippets). Cliquez sur « Ajouter une nouvelle ressource » et nommez-la « dg-dynamic-favicon » et copiez/collez à l’intérieur le code suivant:

<script>

/* Favicon dynamique */

if ((typeof window.DG) === 'undefined') { window.DG = {}}

DG.dynamicFavicon = (onClickEvent) => {
  
  const favicon = document.querySelectorAll("link[rel~='icon']")[0];
  console.log(favicon);
  const cartInfo = document.querySelector("body");
  const faviconSize = 16;
  let cartCount = cartInfo.dataset.cartCount || {{ cart.item_count | json }};

  if(onClickEvent) {
    cartInfo.dataset.cartCount = parseInt(cartInfo.dataset.cartCount) + 1;
    cartCount = cartInfo.dataset.cartCount;
  } else {
    cartInfo.dataset.cartCount = cartCount;
  }
  
  let canvas = document.createElement('canvas');
  canvas.width = faviconSize;
  canvas.height = faviconSize;
  
  let context = canvas.getContext('2d');
  let img = document.createElement('img');
  img.src = favicon.href;
  img.setAttribute('crossorigin', 'anonymous');
  
  if(cartCount) {
    img.onload = () => {
      // Draw Original Favicon as Background
      context.drawImage(img, 0, 0, faviconSize, faviconSize);
  
      // Draw Notification Circle
      context.beginPath();
      context.arc( canvas.width - faviconSize / 3 , faviconSize / 3, faviconSize / 3, 0, 2*Math.PI);
      context.fillStyle = '#FF0000';
      context.fill();
  
      // Draw Notification Number
      context.font = '10px "helvetica", sans-serif';
      context.textAlign = "center";
      context.textBaseline = "middle";
      context.fillStyle = '#FFFFFF';
      context.fillText(cartCount, canvas.width - faviconSize / 3, faviconSize / 3);
  
      // Replace favicon
      favicon.href = canvas.toDataURL('image/png');
    }
  }
}

/* init */
document.addEventListener('DOMContentLoaded', () => {
  DG.dynamicFavicon();
  const allSubmitBtn = document.querySelectorAll('[type="submit"]');
  allSubmitBtn.forEach(btn => btn.addEventListener('click', () => DG.dynamicFavicon(true)));
});
</script>

Trouvez désormais le dossier Mise en page (Layout) et trouvez la fermeture de la balise body comme ceci </body> et copiez/collez le code suivant juste avant !

{% render 'dg-dynamic-favicon' %}

La vidéo arrive bientôt 😉

Merci de me laisser une petite note 😉
[Note moyenne de: 0 sur 0 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Laisser un commentaire

Fermer le menu

OFFRE SPÉCIALE -50% SUR LA FORMATION ECOMFLY

1 Bootcamp en vidéo sur le ECOM + 1 Formation Création de Boutique Brandée + 1 Formation SEO sur Shopify