Adding back-in-stock to Wix collection page

In order to add back-in-stock to Wix collection page, you need to add custom code to your Wix site.

Install Back In Stock

First, ensure that you've already install back-in-stock to your Wix store.

Adding Custom Code to Body Footer

See how you can add custom code for Wix.

• Go to Settings in your site's dashboard.

• Click the Custom Code tab in the Advanced section.

• Add code to Body - End

Use the following config

• Add Code to Pages: Load code on each new page

• Place Code in: Body - end

• Code Type: Essential

Paste the following snippet

<!-- BackInStock Custom Trigger -->
<script>
function ovSetupBackInStockTriggers() {
  let callback = () => {
    let pageId = wixEmbedsAPI.getCurrentPageInfo().id;
    let nodeList = document.querySelectorAll(`#SITE_PAGES #${pageId} [data-hook='product-list'] [data-hook='product-list-grid-item'] [data-hook='product-item-root']`);

    nodeList.forEach((el) => {
      const ahrefEl = el.querySelector(`a[data-hook='product-item-container']`);
      if (!ahrefEl) return;

      let href = ahrefEl.getAttribute('href');
      if (!href.includes("product-page")) return;

      let paths = href.split("/");
      let slug = paths.slice(-1)[0];
      if (!slug) return;

      let product = window.OnVoardData['collection_products'][slug];
      if (!product) return;

      if (!product.isInStock) {
        let spanEl = document.createElement("span");
        spanEl.setAttribute("class", "ov-bis-trigger");
        spanEl.setAttribute("data-wix-product", JSON.stringify(product));
        spanEl.textContent = 'Notify me when available';

        let divEl = document.createElement("div");
        divEl.setAttribute("class", "ov-app ov-bis-notify");
        divEl.appendChild(spanEl);

        let existingDiv = el.querySelector(`.ov-app.ov-bis-notify`);
        if (existingDiv) existingDiv.remove();
        el.appendChild(divEl);
      }
    })
  };

  // wait for collection_products
  let interval = 0;
  let handle = window.setInterval(() => {
    if (interval > 1000*10) {
      clearInterval(handle);
      return;
    }

    if (window.OnVoardData && window.OnVoardData['page_type'] === 'collection' && window.OnVoardData['collection_products']) {
      clearInterval(handle);
      callback();
      document.addEventListener('ov_wix_collection_products_updated', callback);
      return;
    }

    interval += 100;
  }, 100);
}

if (!window.OnVoardData) window.OnVoardData = {};
window.OnVoardData['load_collection_products'] = 1;
ovSetupBackInStockTriggers();
</script>

<style>
.ov-bis-trigger {
  font-size: 14px;
  color: #6d7390;
}

.ov-bis-trigger:hover {
  cursor: pointer;
  text-decoration: underline;
}

.ov-bis-notify {
  margin-top: 8px;
  margin-bottom: 15px;
}
</style>
<!-- BackInStock Custom Trigger -->

Need help installing?

If you need additional help to install, you can contact us.