{% comment %}
============= Warning: DO NOT EDIT THIS FILE UNLESS YOU KNOW WHAT YOU'RE DOING! =============

Please beware that editting this file could break your site as it's referenced in your theme's main theme.liquid file!

Also, if you're testing changes, please do so on a duplicate theme to avoid downtime for your users!

Instructions:
1) create a file named 'cross-sell-custom' inside of your Snippets folder.
Once created it SHOULD say 'cross-sell-custom.liquid' IF NOT, rename it.
2) make sure the 3 lines of code below are added BEFORE the </head> element of your theme.liquid file (or main theme file)

<!-- Cross Sell custom code start. Do not change -->
{%include 'cross-sell-custom'%}
<!-- Cross Sell custom code end. Do not change -->

3) Make sure you to SAVE the changes made to your theme.liquid file
4) Have Cross Sell's Settings -> Display Settings set to "custom" theme, and activate the carousel feature if needed.
5) Save your Settings

Have problems or feedback? DON'T PANIC! Email us at support@csell.co or check out support site -> https://help.csell.co

Reference for BackInStock Shopify App integration: https://help.backinstock.org/article/103-add-a-back-in-stock-button-to-the-collection-page

============= Warning: DO NOT EDIT THIS FILE UNLESS YOU KNOW WHAT YOU'RE DOING! =============
{% endcomment %}

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Raleway:400,500');
 #cross-sell {
   display: block;
   clear: both;
   width: 100%;
   margin: 25px auto;
 }
 .cross-sell *{
   font-size: initial;
 }
 .cross-sell *,
 .cross-sell ::after,
 .cross-sell ::before {
   box-sizing: border-box;
 }
 h3.crosssell-title {
   margin: 25px 0;
   text-align: center;
 }
 .cross-sell.xs-v2 {
   font-family: inherit;
   color: #212529;
   list-style-type: none;
   margin: 0 auto;
   padding: 0 40px;
   clear: both;
   text-align: center;
 }
 .cross-sell.xs-v2 a {
   text-decoration: none;

 }
 .cross-sell.xs-v2 .xs-card {
   float: none;
   display: inline-block;
   vertical-align: text-top;
   padding: 0 0 10px 0;
   margin: 12.5px;
   position: relative;
   width: 175px;
   background-color: #fff;
   text-align: left;
 }
 @media only screen and (min-width: 750px){
   .cross-sell.xs-v2 .xs-card {
     margin: 20px;
   }
 }
 .cross-sell.xs-v2 .xs-card:hover {
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
 }
 .cross-sell.xs-v2 .xs-card .xs-image {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 175px;
   min-height: 175px;
 }
 .cross-sell.xs-v2 .xs-card .xs-image img {
   width: 100%;
 }
 .cross-sell.xs-v2 .xs-card .xs-image .xs-sales-badge {
   position: absolute;
   right: 0px;
   top: 0px;
   z-index: 1;
   background-color: #056dff;
   padding: 5px 10px;
   color: #fff;
   font-size: 13px;
   letter-spacing: 1px;
 }
 .cross-sell.xs-v2 .xs-card .xs-card-body {
   padding: 10px;
   font-size: 15px;
   text-align: center;
 }
 .cross-sell.xs-v2 .xs-card .xs-card-body .xs-product-title {
   width: 100%;
   margin-bottom: 0;
   font-size: 16px;
   line-height: 1.2;
   font-weight: 700;
   color: #65c8c6;
   white-space: normal;
   letter-spacing: 0.5px;
 }
 .cross-sell.xs-v2 .xs-card .xs-card-body .xs-vendor-name {
   padding: 0px;
   width: 100%;
   display: inline-block;
   font-size: 14px;
   color: #666;
 }
 .cross-sell.xs-v2 .xs-card .xs-card-body .xs-price {
   display: block;
   width: 100%;
   font-size: 16px;
   color: black;
   font-weight:700;
 }
 .cross-sell.xs-v2 .xs-card .xs-card-body .xs-price .xs-price-varies {
   font-size: 14px;
 }
 .cross-sell.xs-v2 .xs-card .xs-card-body .xs-price .xs-compare-at-price {
   padding-right: 5px;
   display: inline-block;
   text-decoration: line-through;
   color: rgba(33, 37, 41, 0.7);
   font-size: 0.9em;
 }
 .cross-sell.xs-v2 .xs-card .xs-card-body .xs-price .xs-sale-price {
   display: inline-block;
 }

</style>
<script>
  window.xsellCustom = window.xsellCustom || {};
  window.xsellCustom.theme_settings = window.xsellCustom.theme_settings || {};
  window.xsellCustom.buildxsellsoutput = function(xsellitems, numproducts){
   	var xsmustbeavailable = xsellSettings.xsmustbeavailable;
   	var xshideifincart = xsellSettings.xshideifincart;
   	var xsdisplaycompareatprice = xsellSettings.xsdisplaycompareatprice;
   	var xsdisplaysalebadge = xsellSettings.xsdisplaysalebadge;
   	var xsdisplaypricevarieslabel = xsellSettings.xsdisplaypricevarieslabel;
   	var xsdisplayvendor = xsellSettings.xsdisplayvendor;
    var xsimagesize = 'large';
    var xsvendoroutput = '';
    var xspricevarieslabel = '';
    var xscompareatprice = '';
    var xscompareatpricestring = '';
  	var xssalepricestring = '';
   	var xspriceoutput = '';
    var xssalebadge = '<span class="badge badge--sale"><span class="badge__text">SALE</span></span>';
  	var xssalebadgeoutput = '';
    var saleclass = ' xs-sale';
    var fromlabel = '<em>from</em>';
    var xsprice = '';

    // add custom variables here

    for(var x=0; x < numproducts; x++) {
    	var xsproductdata = xsellitems[x];
      if(xsproductdata.images.length > 1) {
        var csimage = xsellLib.productimageurls(xsproductdata.images[0]);
        var csimagetwo = xsellLib.productimageurls(xsproductdata.images[1]);
      }
      else if(xsproductdata.images.length == 1) {
        var csimage = xsellLib.productimageurls(xsproductdata.images[0]);
        var csimagetwo = 'https://cdn.shopify.com/s/images/admin/no-image-'+xsimagesize+'.gif';
      }
      else {
        var csimage = 'https://cdn.shopify.com/s/images/admin/no-image-'+xsimagesize+'.gif';
        var csimagetwo = csimage;
      }
      if(xsdisplayvendor) {
        xsvendoroutput = '<div class="xs-vendor-name"><a href="' + xsproductdata.url +'">' + xsproductdata.vendor + '</a></div>';
      }

      xsprice = xsellLib.xsformatMoney(xsproductdata.price, '{{ shop.money_format }}');
      if(xsdisplaypricevarieslabel) {
      	if(xsproductdata.price_varies) {
            xspricevarieslabel = 'From: ';
        	}
        	else {
          	xspricevarieslabel = '';
        	}
      }             xspriceoutput = '<div class="money"><a href="' + xsproductdata.url +'">' + xspricevarieslabel + xsprice + '</a></div>';             if(xsdisplaycompareatprice)
      {

      if(!xsproductdata.price_varies && (xsproductdata.compare_at_price > xsproductdata.price)) {
             xscompareatprice = xsellLib.xsformatMoney(xsproductdata.compare_at_price, '{{ shop.money_format }}');
            xscompareatpricestring = '<span class="xs-compare-at-price">' + xscompareatprice + '</span>';
            xssalepricestring = '<span class="xs-sale-price"><a href="' + xsproductdata.url +'">' + xsprice + '</a></span>';
            xspriceoutput = '<div class="money' + saleclass + '">' + xscompareatpricestring + ' ' + xspricevarieslabel + xssalepricestring + '</div>';
        }
      }
      if(xsdisplaysalebadge) {
        if(xsproductdata.compare_at_price > xsproductdata.price) {
          xssalebadgeoutput = xssalebadge;
        }
        else {
          xssalebadgeoutput = '';
        }
      }

      function escapeHtml(unsafe) {
        return unsafe
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
      }

      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>';
      }
      xsellLib.xselloutput += '<div class="xs-card" data-xsorder="' + xsproductdata["order"] + '">'
                           +'<div class="xs-image">'
                           +'<a href="'+xsproductdata.url+'">'
                           +xssalebadgeoutput
                           +'<img src="'+csimage+'" />'
                           +'</a>'
                           +'</div>'
                           +'<div class="xs-card-body">'
                           + xsvendoroutput
                           +'<a href="'+xsproductdata.url+'">'
                           +'<div class="xs-product-title">'+xsproductdata.title+'</div>'
                           +'</a>'
                           + xspriceoutput
                           + xs_atc
                           + '</div>'
                           + '</div>';
 		}

    if(xsellLib.xselloutput != ''){
      var xsellDiv = document.createElement('div');
      xsellDiv.innerHTML = '<h3 class="crosssell-title">' + xsellLib.settings.xstitle + '</h3><div id="cross-sells" class="xs-v2 cross-sell">' + xsellLib.xselloutput + '</div>'; //output here
      document.getElementById('cross-sell').appendChild(xsellDiv);
    }
  }
</script>