Shopify - Pop up cart

popUpCart.liquid

<!--Vertical Button-->
<div class="devst-vertical-button-content">
  <p class="devst-vertical-text devst-triangle-left">&#9651;</p><button class="devst-vertical-btn"><p class="devst-vertical-text devst-is_italic"> PROJECT TOTALS </p></button><p class="devst-vertical-text devst-triangle-right">&#9651;</p>
</div>
<div class="devst-pop-cart">
  <div class="devst-cartBox">
    <img src="{{ 'cart-logo.png' | asset_url }}" class="pop-logo">
    <div class="dev-divider"></div>

    <div class="itemHolder">

    </div>
    <div class="lds-css ng-scope" style="display:none;"><div class="lds-spinner" style="100%;height:100%"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>


    <div class="dev-divider"></div>
    <p class="cartTotalHolder">
      <span class="cartTotal">PROJECT TOTAL: <span class="cartTotalD bold">$00</span> </span>
    </p>
    <a href="/checkout">
      <img src="{{ 'cart-icon.png' | asset_url }}" class="pop-icon"><br>
      (click to proceed to checkout)
    </a>
  </div>
</div>

<style>
span.botaTitle {
    font-style: italic;
}
.devst-pop-cart p, .devst-pop-cart a, .devst-pop-cart span{ color: #fff !important; }
.devst-pop-cart {
  	padding: 20px 21px;
    background: #292929f2;
    color: #fff;
    width: 320px;
    position: fixed;
    float: right;
    right: -400px;
    top: 100px;
  	text-align: center;
    z-index: 9999999999999999999;
}
.dev-divider {
    height: 1px;
    background: #ddd;
    width: 75%;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}
.mainTitle{ font-weight: bold; }
img.pop-icon {
    width: 60px;
    margin: 0 auto;
    clear: both;
}
.cartTotalHolder {
    padding-bottom: 10px !important;
}
  .lineQty, .linePrice, .lineVariant {
    padding-right: 2px;
}
  .devDivide{ margin-bottom: 9px; }
</style>
{{ 'api.jquery.js' | shopify_asset_url | script_tag }}
<script>
  $(document).ready(function(){
    //gets the line items
    function cartDom(data){
        var datalist = data.items;
        var i;
        for (i = 0; i < datalist.length; i++) { 
            var lineTitle = datalist[i].product_title;
            var lineQuantity = datalist[i].quantity;
            var linePrice = datalist[i].price;
          	linePrice = Shopify.formatMoney(linePrice);
            var lineTotal = datalist[i].line_price;
          	lineTotal =  Shopify.formatMoney(lineTotal);
            var lineVariant = datalist[i].variant_options[0];
          	var lineBota = datalist[i].properties['Botanic Name'];
          
          	//console.log(datalist[i].properties['Botanic Name']);
          	//make the html ready
          	
          	var cartItem = '<p><span class="mainTitle">'+lineTitle+'</span> <br> <span class="botaTitle">'+lineBota+'</span></p>';
          	cartItem += '<p class="devDivide"><span class="lineQty">'+lineQuantity+'</span> | <span class="linePrice bold">'+linePrice+'</span> | <span class="lineVariant">'+lineVariant+'</span> | <span class="lineTotal">Total: <span class="lineTotalD bold">'+lineTotal+'</span> </span></p>';
          	$('.itemHolder').append(cartItem);
          	//clean the variable
          	cartItem = '';
        }
    }
    //gets the cart information
    function cartGetter(){
      $.ajax({
        type: 'GET',
        url: '/cart.json',
        dataType: 'jsonp',
        success: function(data) { 
          //populate the cart item loop
          cartDom(data);
          //update subtotal
          var cartTotalPrice = Shopify.formatMoney(data.total_price);
          $('.cartTotalD').html(cartTotalPrice);
        }
      });    
    }
    
    //init the cart
    cartGetter();
    

    //make the post contents ready
    
	//cart drawer functionality
    function cartOpener(){
      //show cart
      $('.devst-pop-cart').animate({right: 0}, 200);
      //change arrow position
      $('.devst-vertical-button-content').animate({right: 207}, 200);
      //add showing class
      $('.devst-vertical-button-content').addClass('showing');    
    }
    function cartCloser(){
      //hide cart
      $('.devst-pop-cart').animate({right: -cartWidth}, 200);
      //change arrow position
      $('.devst-vertical-button-content').animate({right: -112}, 200);
      //hide showing class
      $('.devst-vertical-button-content').removeClass('showing');    
    }
    var cartArrow = $('.devst-vertical-button-content');
    var cartWidth = $('.devst-pop-cart').outerWidth();
    console.log(cartWidth);
    cartArrow.on('click', function () {
        if ($(this).hasClass('showing')) {
			cartCloser();
        }else{
			cartOpener();
        }
    }); 
    
    
    //Load More button Click

    
    
    
    
    
    
function cartPusher(pageID){
    var pageid = pageID;
    //listen to button click
    $('.d-'+pageid+' .devst-addToCart-btn').on('click', function(){
      //debugger;
      	//var this = $(this);
    	//listen to variant length
      	//if length is 1, post once
      	//else post twice
      	//devColVariant
      $('.lds-css').show();
      $('.itemHolder').hide();
      if($(this).parent().find('.devColVariant').length == 1){
        //contents
        var devQty = $(this).parent().find('.devqty').val();
        var devId = $(this).parent().find('.devqty').data('varid');
        var botaName =  $(this).parent().find('.devBotaName').text();; //devBotaName
        //post to cart
        $.ajax({
          type: 'POST',
          url: '/cart/add.js',
          data : { id: devId, quantity: devQty, properties: {'Botanic Name': botaName }  },
          dataType: 'json',
          success: function(datax) { 
            //hide the loader
      		$('.lds-css').hide();
            //clean up the cart
            $('.itemHolder').html('');
           	cartGetter();
            //show the cart items
      		$('.itemHolder').fadeIn();
            
            //show cart
            setTimeout(function(){ 
              cartOpener(); 
            }, 500);
            
          }         
        });
      
      }else if($(this).parent().find('.devColVariant').length == 2){
        
        //contents
        var devQty1 = $(this).parent().find('.devColVariant').eq(0).find('.devqty').val();
        var devId1 = $(this).parent().find('.devColVariant').eq(0).find('.devqty').data('varid');
        var botaName1 =  $(this).parent().find('.devBotaName').text();; //devBotaName
        //post to cart
        $.ajax({
          type: 'POST',
          url: '/cart/add.js',
          data : { id: devId1, quantity: devQty1, properties: {'Botanic Name': botaName1 } },
          dataType: 'json',
          success: function(datax) { 
            //cartGetter();
          }         
        });
        //contents2
        var devQty2 = $(this).parent().find('.devColVariant').eq(1).find('.devqty').val();
        var devId2 = $(this).parent().find('.devColVariant').eq(1).find('.devqty').data('varid');
        var botaName2 =  $(this).parent().find('.devBotaName').text();; //devBotaName
        //post to cart
        $.ajax({
          type: 'POST',
          url: '/cart/add.js',
          data : { id: devId2, quantity: devQty2, properties: {'Botanic Name': botaName2 }},
          dataType: 'json',
          success: function(datax) {
            //hide the loader
      		$('.lds-css').hide();
            //clean up the cart
            $('.itemHolder').html('');
            cartGetter();
            //show the cart items
      		$('.itemHolder').fadeIn();
            
            //show cart
            setTimeout(function(){ 
              cartOpener(); 
            }, 500);
          }         
        });
        
      }else{
      	alert('Something went wrong!');
      }
    });    
    
} //cart pusher ends

cartPusher(1);
 
 
});
</script>