products-list-masonry.js

let productsListsMasonries = [];

const initProductsListsMasonries = () => {
  const masonryOptions = {
    itemSelector: '.products-list__product-card',
    columnWidth: '.products-list__grid-sizer',
    percentPosition: true,
    gutter: getWindowOuterWidth() >= 768 ? 80 : 40,
  };

  if (productsListsMasonries.length === 0) {
    const productsLists = document.querySelectorAll('.products-list_masonry');

    productsLists.forEach((productsList) => {
      const productsListMasonry = new Masonry(productsList, masonryOptions);
      productsListsMasonries.push({ element: productsListMasonry, isDestroyed: false });
    });

    document.dispatchEvent(new CustomEvent('check-product-cards-height'));
  } else {
    productsListsMasonries = productsListsMasonries.map((productsListMasonry) => {
      if (productsListMasonry.isDestroyed === true) {
        productsListMasonry.element = new Masonry(productsListMasonry.element.element, masonryOptions);
        productsListMasonry.isDestroyed = false;
      }

      return productsListMasonry;
    });

    document.dispatchEvent(new CustomEvent('check-product-cards-height'));
  }
};

const destroyProductsListsMasonries = () => {
  productsListsMasonries.forEach((productsListMasonry, index) => {
    if (productsListMasonry.isDestroyed === false) {
      productsListMasonry.element.destroy();

      productsListsMasonries[index].isDestroyed = true;
    }
  });
};


onPageLoad(() => {
  if (doesElementExist('.products-list_masonry') && (getWindowOuterWidth() >= 576 || device.ios())) {
    initProductsListsMasonries();
  }
});

onWindowResize(() => {
  if (doesElementExist('.products-list_masonry')) {
    if (!device.ios() && getWindowOuterWidth() < 576) {
      destroyProductsListsMasonries();
    } else {
      initProductsListsMasonries();
    }
  }
});