In order to add back-in-stock trigger to BigCommerce product car, you need to use custom triggers and modify theme code. Below we will guide you through the setup.

 

Install Back In Stock

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


Demo Store

View demo store to see the widgets live in BigCommerce store.

 

Adding Snippet to Product Card

Next, edit BigCommerce theme and locate product card: 

  • templates/components/products/card.html

Paste the following snippet at end of product card. Adjust placement accordingly if there are alignment issues.

<!-- 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 -->

 

Next, edit BigCommerce theme and locate footer: 

  • templates/components/common/footer.html

Paste the following snippet at end of footer.

<!-- 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 -->

Need help installing?

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