Share a Cart With Your Shopify Theme

<script>
  (() => {
    // Runs after your store switches to the shared cart. Reloading works on
    // every theme. To update your theme without a reload, replace the body, e.g.:
    //   const cart = await fetch("/cart.js").then((response) => response.json());
    //   document.querySelector(".cart-count").textContent = cart.item_count;
    const updateCartUI = async () => {
      location.reload();
    };

    const domain = location.hostname.replace(/^www\./, "");
    const sharedCookie = "replo_shared_cart";

    const readCookie = (name) => {
      const entry = document.cookie
        .split("; ")
        .find((cookie) => cookie.startsWith(`${name}=`));
      return entry ? decodeURIComponent(entry.slice(name.length + 1)) : null;
    };
    const writeCookie = (name, value, attributes = "") => {
      document.cookie = `${name}=${encodeURIComponent(value)}; Path=/; Max-Age=2592000; SameSite=Lax; Secure${attributes}`;
    };
    const getCart = () =>
      fetch("/cart.js", { cache: "no-store" }).then((response) =>
        response.json(),
      );

    // Shopify only sets the cart cookie once the visitor has a real cart.
    const shareCart = () => {
      const cart = readCookie("cart");
      if (cart && !readCookie(sharedCookie)) {
        writeCookie(sharedCookie, cart, `; Domain=.${domain}`);
      }
    };

    async function useSharedCart() {
      const sharedCart = readCookie(sharedCookie);
      const themeCart = readCookie("cart");
      if (!sharedCart) {
        shareCart();
        return;
      }
      if (sharedCart === themeCart) {
        return;
      }

      const previousCart = themeCart ? await getCart() : null;
      writeCookie("cart", sharedCart);
      if ((await getCart()).token !== sharedCart) {
        // The shared cart is gone, for example after checkout: share this one instead.
        if (themeCart) {
          writeCookie("cart", themeCart);
        } else {
          document.cookie = "cart=; Path=/; Max-Age=0";
        }
        document.cookie = `${sharedCookie}=; Path=/; Max-Age=0; Domain=.${domain}`;
        shareCart();
        return;
      }

      // Add items one at a time: Shopify rejects a whole batch if any item
      // is unavailable, and that item would be skipped at checkout anyway.
      for (const item of previousCart?.items ?? []) {
        await fetch("/cart/add.js", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            id: item.variant_id,
            quantity: item.quantity,
            properties: item.properties ?? {},
            ...(item.selling_plan_allocation
              ? { selling_plan: item.selling_plan_allocation.selling_plan.id }
              : {}),
          }),
        });
      }
      await updateCartUI();
    }

    // Theme add-to-cart buttons create the cart without a page load.
    window.addEventListener("pagehide", shareCart);
    document.addEventListener("visibilitychange", () => {
      if (document.visibilityState === "hidden") {
        shareCart();
      }
    });
    // The lock keeps two open tabs from merging the same items twice.
    const run = () => useSharedCart();
    (navigator.locks
      ? navigator.locks.request("replo-shared-cart", run)
      : run()
    ).catch((error) => {
      console.error("Replo shared cart failed", error);
    });
  })();
</script>