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).


- installation of the BackInStock app:


1) Create a custom override file for Cross Sell. You can use this one (it has the code already): 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:

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"> 
      var parsed = escapeHtml(JSON.stringify(xsproductdata));
       xs_atc = '<button class="BIS_trigger ProductItem__BISButton Button Button--secondary" data-product-data="'+parsed+'">SOLD OUT</button>';

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us