Cartfunnel snippet for drawer cart

cf_custom.liquid

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Code to handle redraw -->
<style type="text/css">
  #cf-modal-overlay {
    display: none; 
  }
  #cf-modal-overlay.active {
    background-color:rgb(211, 211, 211);
    box-sizing:border-box;
    color:rgb(102, 102, 102);
    cursor:pointer;
    display:block;
    font-family:Roboto, HelveticaNeue, "Helvetica Neue", sans-serif;
    font-size:15px;
    font-weight:400;
    left:0px;
    right: 0px;
    bottom: 0px;
    line-height:24px;
    opacity:0.8;
    position:fixed;
    text-size-adjust:100%;
    top:0px;
    transition-delay:0s;
    transition-duration:0.35s;
    transition-property:all;
    transition-timing-function:cubic-bezier(0.57, 0.06, 0.05, 0.95);
    visibility:visible;
    width:1440px;
    z-index:99999998;
    -webkit-font-smoothing:antialiased;    
  }
  #cf-modal {
    display: none; 
  }
  #cf-modal.active {
    box-sizing:border-box;
    color:rgb(102, 102, 102);
    display:block;
    font-family:Roboto, HelveticaNeue, "Helvetica Neue", sans-serif;
    font-size:15px;
    font-weight:400;
    line-height:24px;
    opacity:1;
    text-size-adjust:100%;
    transition-delay:0s, 0.2s, 0s;
    transition-duration:0s, 0.25s, 0.2s;
    transition-property:left, box-shadow, margin-top;
    transition-timing-function:linear, cubic-bezier(0.47, 0.5, 0, 0.95), ease-in-out;
    visibility:visible;
    width:100%;
    max-width:100%;
    z-index:99999999;
    max-height: 100%;  
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
  -webkit-overflow-scrolling: touch;
  -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
  }
  #cf-modal.active > div,
  #cf-modal.active > iframe {
    min-height: 101%;
    box-shadow:rgba(0, 0, 0, 0.25) 0px 10px 80px 0px;
    background-color:rgb(255, 255, 255);
    border: 0;
    box-sizing:border-box;
    color:rgb(102, 102, 102);
    display:block;
    font-family:Roboto, HelveticaNeue, "Helvetica Neue", sans-serif;
    font-size:15px;
    font-weight:400;
    line-height:24px;
    opacity:1;
    position: relative;
    width: 100%;
    height: 100%;
    text-size-adjust:100%;
    transform:matrix(1, 0, 0, 1, 0, 0);
    transform-style:preserve-3d;
    transition-delay:0s;
    transition-duration:0.25s;
    transition-property:all;
    transition-timing-function:cubic-bezier(0.57, 0.06, 0.05, 0.95);
    visibility:visible;
    -webkit-font-smoothing:antialiased;    
  }
  @media (min-width: 768px) {
    #cf-modal.active > div,
    #cf-modal.active > iframe {
      min-height: initial;
    }
  }
</style>

<!-- Override default forms -->
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
    var cartForms = document.querySelectorAll("[action='/cart/add']");
    for (var i=0; i<cartForms.length; i++) {
      var form = cartForms[i];
      form.action = "https://yoursubdomain.cartfunnel.net/cart/shopify/add?drawer_cart=true";
    form.classList.remove("product-form");
      form.classList.add("cf-product-form");
      form.target = "cf-drawer-cart";
    };
  });
</script>

<!-- Utility methods -->
<script type="text/javascript">
  var Cartfunnel = Cartfunnel || {};
  Cartfunnel.getStoreKey = function(domain) {
    return `crossDomainStore::${ domain }`;
  };
  Cartfunnel.readStore = function(domain) {
    let key = Cartfunnel.getStoreKey(domain);
    let store = window.localStorage.getItem(key);
    return store ? JSON.parse(store) : {};
  };
  Cartfunnel.writeStore = function(domain, store) {
    let key = Cartfunnel.getStoreKey(domain);
    let serializedData = JSON.stringify(store);
    window.localStorage.setItem(key, serializedData);  
  };
  Cartfunnel.updateFormAction = function() {
    var $form1 = $("form[action='/cart/add']");
  var $form2 = $("form[action='https://yoursubdomain.cartfunnel.net/cart/shopify/add?drawer_cart=true']");
    var newURL = "https://yoursubdomain.cartfunnel.net/cart/shopify/add?drawer_cart=true&token=" + Cartfunnel.readStore('yoursubdomain');
    $form1.prop("action", newURL);
    $form2.prop("action", newURL);
  };
  Cartfunnel.initDrawerCart = function() {
    // Create placeholder element
    var initialURL = "https://yoursubdomain.cartfunnel.net/drawer";
    if (typeof(Cartfunnel.readStore("yoursubdomain")) == "string") {
      initialURL += "?token="+Cartfunnel.readStore("yoursubdomain");
    }
  $("body")
      .append('<div id="cf-modal"><iframe name="cf-drawer-cart" src="'+initialURL+'"></iframe></div>')
      .append('<div id="cf-modal-overlay"></div>');    
    // Listen to event handlers
  var eventMethod = window.addEventListener
      ? "addEventListener"
      : "attachEvent";
  var eventer = window[eventMethod];
  var messageEvent = eventMethod === "attachEvent"
    ? "onmessage"
    : "message";
  eventer(messageEvent, function (e) {
      if (e.data.event_id === "closeCFModal") {
        Cartfunnel.hideDrawerCart();        
      }
      if (e.data.event_id === "redirectToCartfunnel") {
        Cartfunnel.redirectToCartfunnel();        
      }
      if (e.data.event_id === "modalHeight") {
        Cartfunnel.resizeModalHeight(e.data.value);
      }
      if (e.data.event_id === "cartToken") {
        Cartfunnel.writeStore("yoursubdomain", e.data.value);
        Cartfunnel.updateFormAction();
      }
      if (e.data.event_id === "redirectToCartfunnel") {
    window.location.href = "https://yoursubdomain.cartfunnel.net";
      }      
      if (e.data.event_id === "redirectToCartfunnelAndSkipCartPage") {
    window.location.href = "https://yoursubdomain.cartfunnel.net/customer";
      }
  });
    $(document).on("submit", ".cf-drawer-cart", function(e) {
    Cartfunnel.showDrawerCart(false);
    });
    $(document).on("keydown", function(e) {
      if (e.keyCode == 27) {
        Cartfunnel.hideDrawerCart();
      };
    });
    $(document).on("click", "#cf-modal", function(e) {
      Cartfunnel.hideDrawerCart();
    });
    $(document).on('click', '.product__add-to-cart-button', function(e) {
      setTimeout(function() {
      Cartfunnel.showDrawerCart(false);
      }, 125);
    });
  };
  Cartfunnel.showDrawerCart = function(refresh) {
    if (refresh) {
      $('#cf-modal iframe').attr('src', "https://yoursubdomain.cartfunnel.net/drawer?token=" + Cartfunnel.readStore('yoursubdomain'));
    } else {
      if ($('#cf-modal iframe').attr('src') == "about:blank") {
        $('#cf-modal iframe').attr('src', "https://yoursubdomain.cartfunnel.net/drawer?token=" + Cartfunnel.readStore('yoursubdomain'));
      }
    }
    $('#cf-modal').addClass("active");
    $('#cf-modal-overlay').addClass("active");
    var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
    $('body')
      .css("margin-right", scrollBarWidth)
      .css("overflow", "hidden");
  };
  Cartfunnel.hideDrawerCart = function() {
    $('#cf-modal').removeClass("active");
    $('#cf-modal-overlay').removeClass("active");
    $('body')
      .css("margin-right", 0)
      .css("overflow", "initial");
  };
  Cartfunnel.resizeModalHeight = function(newHeight) {
    $("#cf-modal > iframe").css("height", newHeight + "px");
  };
  Cartfunnel.redirectToCartfunnel = function() {
    window.location.href = "https://yoursubdomain.cartfunnel.net";
  };
</script>