hologram-web-library/src/scripts/cart-watcher.js

Hologram Web Library components

export default () => {
  (function (cartwatcher) {
    'use strict';

    const fetchCart = async () => {
      const response = await fetch('/cart.js');
      return response.json();
    };

    const emitCartChanges = async () => {
      const newCart = await fetchCart();
      const event = new CustomEvent('cart_changed', { detail: newCart });
      window.dispatchEvent(event);
    };

    const observeCartChanges = () => {
      const cartObserver = new PerformanceObserver((list) => {
        list.getEntries().forEach((entry) => {
          const isValidRequestType = ['xmlhttprequest', 'fetch'].includes(
            entry.initiatorType
          );
          const isCartChangeRequest = /\/cart\//.test(entry.name);
          if (isValidRequestType && isCartChangeRequest) {
            emitCartChanges();
          }
        });
      });
      cartObserver.observe({ entryTypes: ['resource'] });
    };

    const init = () => {
      emitCartChanges().then(() => {
        observeCartChanges();
      });
    };

    cartwatcher.init = init;
  })((window.cartwatcher = window.cartwatcher || {}));
};