Comment faire un Favicon Dynamique avec la Quantité du Panier sur Shopify

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 ligne – Actions – Modifier 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: 5 sur 3 votes]

Cet article a 4 commentaires

AMINE
9 Avr 2023 Répondre

DANS QUELLE RUBRIQUE DE MISE EN PAGE ET MERCI POUR VOS TUTOS
1. Dgeo Dev
  16 Avr 2023 Répondre
  
  Hello je n’ai pas compris la question 🙁 mise en page ?
  1. amandine
    19 Mai 2023 Répondre
    
    les 2 rubriques Password liquides et thèmes liquides ont tous les 2 le body
    1. Dgeo Dev
      22 Mai 2023 Répondre
      
      theme c’est mieux password c’est pas utile 🙂