Intégrer Baback - Shopify headless

Intégrer Baback sur un site headless nécessite d'ajouter ce script dans toutes les pages de la boutique en remplaçant le REPLACESHOPIFY_SHOP_ID_ par l'id de la boutique Shopify.

<script>
(function(){
    d=document;
const providerId = _REPLACE_SHOPIFY_SHOP_ID_
    if(!window.baback){
      window.baback = {providerId:providerId}
    }else{
      window.baback.providerId = providerId
    }
    console.log("[baback] loading "+providerId);
    
    const load = ({orderId,shopNow}) => {
      s=d.createElement("script");
        s.src="https://cdn1.baback.co/index.js";
        s.type="module";
        s.async=1;
        d.getElementsByTagName("head")[0].appendChild(s);
        s.onload = () => {
          setTimeout(() => {
            if (window.baback && !shopNow) {
              window.baback.open({orderId});
            }
          },50)
        }
    }


    d.addEventListener("click", (e) => {
      const target = e.target;
      if (target.closest('#baback-trigger') || target.closest('a[href*="/a/return"]')) {
        const urlParams = new URLSearchParams(target.href); 
        const orderId = urlParams.get('orderId') || urlParams.get('order-id');
        e.preventDefault(); // Empêche la navigation vers l'URL du lien
        load({orderId})
      }
    });
    
    const isShopNow = JSON.parse(localStorage.getItem('baback'))?.state?.step === "shop-now";
    if (isShopNow) {
      load({shopNow: true});
    }
  })()
</script>

Ensuite, il faudra créer le lien suivant dans le pied de page :

<a href="#" id="baback-trigger">Portail de retour</a>