[Old UI] How to use Cross Sell with Back In Stock app for sold out/out-of-stock notifications

Want to use email notifications for when cross sells are out-of-stock? Then this article is for you (NOTE: if you're not familiar with html & javascript, get in touch or pass this on to your development team).

Requirements: 

- installation of the BackInStock app: https://apps.shopify.com/back-in-stock

Steps:

1) Create a custom override file for Cross Sell. You can use this one (it has the code already): https://raw.githubusercontent.com/cross-sell/diy-themes/master/extras/backInStock-integration.liquid but be aware that it uses our Slick theme CSS styling.

2) We will now follow some similar steps from BackInStock's integration article but with some minor variations: https://help.backinstock.org/article/103-add-a-back-in-stock-button-to-the-collection-page

Add the following code before our output variable xsellLib.xselloutput:

<span style="font-size: 18px;">      function escapeHtml(unsafe) {
        return unsafe
        .replace(/&/g, "&")
        .replace(//g, ">")
        .replace(/"/g, """)
        .replace(/'/g, "'");
      }

      var xs_atc ='
  <form method="post" action="/cart/add"> 
   <input type="hidden" name="id" value="'+xsproductdata.variants[0].id +'"> 
   <input type="submit" value="Add to Cart" class="btn"> 
  </form>';
      var parsed = escapeHtml(JSON.stringify(xsproductdata));
      if(!xsproductdata.available){
       xs_atc = '<button class="BIS_trigger ProductItem__BISButton Button Button--secondary" data-product-data="'+parsed+'">SOLD OUT</button>';
      }</span>

Instead of using this liquid tag: {{ product | json | escape }} we are using some custom JS to stringify our cross sell product object, and then using a custom escape function to avoid errors with special characters.

3) Add this line of code for the Add To Cart button 

                           + xs_atc

AFTER this line of code (our price output variable):

                           + xspriceoutput

Your file should now look something like this:

4) Test. Test. Test. We suggest working on a duplicate theme and NOT YOUR LIVE THEME.