Adding back-in-stock to BigCommerce category page

<!-- BackInStock Custom Trigger -->
<div class="ov-bis-notify" style="margin-top: 5px; margin-bottom: 15px; display: none;">
<a href="#"
class="ov-bis-trigger"
style="font-size: 13px; color: #6d7390;"
data-product-external-id="{{ id }}"
>
Notify me when available
</a>
</div>
<!-- BackInStock Custom Trigger -->

<!-- BackInStock Custom Trigger -->
<script>
var ovCleanGraphQLResponse = (input) => {
  if (!input) return null
  const output = {}
  const isObject = obj => {
    return obj !== null && typeof obj === 'object' && !Array.isArray(obj)
  }

  Object.keys(input).forEach(key => {
    if (input[key] && input[key].edges) {
      output[key] = input[key].edges.map(edge =>
        ovCleanGraphQLResponse(edge.node)
      )
    } else if (isObject(input[key])) {
      output[key] = ovCleanGraphQLResponse(input[key])
    } else if (key !== '__typename') {
      output[key] = input[key]
    }
  })

  return output
}

let ovCheckBisTriggers = (productIds) => {
  fetch('/graphql', {
    method: 'POST',
    credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer {{settings.storefront_api.token}}`
    },
    body: JSON.stringify({
      query: `
        query categoryProducts($productIds: [Int!]) {
          site {
            products (entityIds: $productIds, first: 50) {
              edges {
                cursor
                node {
                  entityId
                  name
                  inventory {
                    isInStock
                  }
                  variants {
                    edges {
                      node {
                        ...VariantFields
                      }
                    }
                  }
                }
              }
            }
          }
        }

        fragment VariantFields on Variant {
          entityId
          inventory {
            isInStock
          }
          options {
            edges {
              node {
                ...ProductOptionFields
              }
            }
          }
        }

        fragment ProductOptionFields on ProductOption {
          entityId
          displayName
          values {
            edges {
              node {
                entityId
                label
              }
            }
          }
        }

      `,
      variables: {productIds: productIds},
    }),
  })
  .then(res => res.json())
  .then(json => {
    let results = ovCleanGraphQLResponse(json);

    let ovBisNodes = document.querySelectorAll(".ov-bis-notify .ov-bis-trigger");
    for (let ovBisNode of ovBisNodes) {
      let productId = ovBisNode.getAttribute('data-product-external-id');
      if (!productId) continue;

      let product = results.data.site.products.filter((row) => `${row.entityId}` === `${productId}`)[0];
      if (!product) continue;
      if (product.inventory && product.inventory.isInStock === true) continue;

      ovBisNode.setAttribute('data-bigcommerce-product', JSON.stringify(product));
      ovBisNode.parentNode.style.display = 'inherit';
    }
  });
};

var ovCategoryProducts = [];
var ovGlobalProducts = {{#if products}} {{{JSONstringify products}}} {{else}} [] {{/if}};

{{#if category}}
ovCategoryProducts = {{#if category.products}} {{{JSONstringify category.products}}} {{else}} [] {{/if}};
{{/if}}

var ovBisProductIds = [];
ovCategoryProducts.forEach((row) => {
  if (ovBisProductIds.includes(row.id)) return;
  ovBisProductIds.push(row.id);
});


['new', 'featured', 'top_sellers'].forEach((key) => {
  let productRows = ovGlobalProducts[key];
  if (!productRows) return;
  productRows.forEach((row) => {
    if (ovBisProductIds.includes(row.id)) return;
    ovBisProductIds.push(row.id);
  });
});

if (ovBisProductIds.length > 0) {
  ovCheckBisTriggers(ovBisProductIds);
}
</script>

<!-- BackInStock Custom Trigger -->