Does this ajax/jquery code work on a template cart?
Beautiful code.
Will this code work with a template html5/css cart?
I have a nicely formatted shopping cart on a bootstrap 3.5 template and aam looking for code to power it.
$(document).ready(function() { var Arrays=new Array(); $('.add-to-cart-button').click(function(){ var thisID = $(this).parent().parent().attr('id').replace('detail-',''); var itemname = $(this).parent().find('.item_name').html(); var itemprice = $(this).parent().find('.price').html(); if(include(Arrays,thisID)) { var price = $('#each-'+thisID).children(".shopp-price").find('em').html(); var quantity = $('#each-'+thisID).children(".shopp-quantity").html(); quantity = parseInt(quantity)+parseInt(1); var total = parseInt(itemprice)*parseInt(quantity); $('#each-'+thisID).children(".shopp-price").find('em').html(total); $('#each-'+thisID).children(".shopp-quantity").html(quantity); var prev_charges = $('.cart-total span').html(); prev_charges = parseInt(prev_charges)-parseInt(price); prev_charges = parseInt(prev_charges)+parseInt(total); $('.cart-total span').html(prev_charges); $('#total-hidden-charges').val(prev_charges); } else { Arrays.push(thisID); var prev_charges = $('.cart-total span').html(); prev_charges = parseInt(prev_charges)+parseInt(itemprice); $('.cart-total span').html(prev_charges); $('#total-hidden-charges').val(prev_charges); var Height = $('#cart_wrapper').height(); $('#cart_wrapper').css({height:Height+parseInt(45)}); $('#cart_wrapper .cart-info').append('<div class="shopp" id="each-'+thisID+'"><div class="label">'+itemname+'</div><div class="shopp-price"> $<em>'+itemprice+'</em></div><span class="shopp-quantity">1</span><img src="remove.png" class="remove" /><br class="all" /></div>'); } }); $('.remove').livequery('click', function() { var deduct = $(this).parent().children(".shopp-price").find('em').html(); var prev_charges = $('.cart-total span').html(); var thisID = $(this).parent().attr('id').replace('each-',''); var pos = getpos(Arrays,thisID); Arrays.splice(pos,1,"0") prev_charges = parseInt(prev_charges)-parseInt(deduct); $('.cart-total span').html(prev_charges); $('#total-hidden-charges').val(prev_charges); $(this).parent().remove(); }); $('#Submit').livequery('click', function() { var totalCharge = $('#total-hidden-charges').val(); $('#cart_wrapper').html('Total Charges: $'+totalCharge); return false; }); var single_li_offset = 200; var current_opened_box = -1; $('#wrap li').click(function() { var thisID = $(this).attr('id'); var $this = $(this); var id = $('#wrap li').index($this); if(current_opened_box == id) { $('#wrap .detail-view').slideUp('slow'); return false; } $('#cart_wrapper').slideUp('slow'); $('#wrap .detail-view').slideUp('slow'); current_opened_box = id; var targetOffset = 0; if(id<=3) targetOffset = 0; else if(id<=7) targetOffset = single_li_offset; else if(id<=11) targetOffset = single_li_offset*2; else if(id<=15) targetOffset = single_li_offset*3; $("html:not(:animated),body:not(:animated)").animate({scrollTop: targetOffset}, 800,function(){ $('#wrap #detail-'+thisID).slideDown(500); return false; }); }); $('.close a').click(function() { $('#wrap .detail-view').slideUp('slow'); }); $('.closeCart').click(function() { $('#cart_wrapper').slideUp(); }); $('#show_cart').click(function() { $('#cart_wrapper').slideToggle('slow'); }); }); function include(arr, obj) { for(var i=0; i<arr.length; i++) { if (arr[i] == obj) return true; } } function getpos(arr, obj) { for(var i=0; i<arr.length; i++) { if (arr[i] == obj) return i; } } </script>
html, body{ margin:0; padding:0; border:0; outline:0; } h1{ text-shadow:1px 1px 3px; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } .header ul{ background:#000; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #95e0eb; } #wrap{ width:100%; min-height:900px; top:0px; position:relative; bottom:0px; } #wrap ul{ margin:0px; padding:0px; width: 700px;text-align:center; } #wrap .detail-view { border: 1px solid #E2E2E2; border-top: 1px solid #E2E2E2; left: 0; height:380px; overflow: hidden; clear:both; display:none; margin-left:13px; margin-bottom:15px; width: 96%; } #wrap .detail-view .close{ text-align:right; width:98%; margin:5px; } #wrap .close a{ padding:6px; height:10px; width:20px; color:#525049; } #wrap .detail-view .detail_images{ float:left} #wrap .detail-view .detail_info{ float:right; font-family: "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif; color:#525049; margin-right:20px; margin-top:30px; text-align:justify; width:250px; font-size:12px; } #wrap .detail-view .detail_info label{ font-size:12px;text-transform:uppercase; letter-spacing:1px; line-height:60px;} #wrap .detail-view .detail_info p{ height:110px;} a#show_cart{ background: none repeat scroll 0 0 #95e0eb; border: 1px solid #118da9; margin-left: 800px; margin-top: 4px; cursor: pointer; border-radius: 3px; display: inline-block; font: 9px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif; letter-spacing: 2px; color:#525049; padding:8px; text-decoration:none; text-transform: uppercase; } .add-to-cart-button{ background: none repeat scroll 0 0 #95e0eb; border: 1px solid #E8E7DC; cursor: pointer; display: inline-block; font: 9px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif; letter-spacing: 2px; padding-top: 10px;color:#525049; margin-top:15px; text-transform: uppercase; } .add-to-cart-button:hover { background: none repeat scroll 0 0 #41cc65; } .shopp{background: none repeat scroll 0 0 #F8F8F3;} #wrap ul li{ list-style-type:none; height:146px; width:160px; margin-left:10px; margin-bottom:15px; float:left; padding:15px 0px 0px 0px; font-family:"LubalGraphBdBTBold",Tahoma; font-size:2em; border:solid #fff 1px; overflow:hidden; } .footer{ height:25px; background:#E2E2E2} #wrap ul li:hover{ border:solid #f3f4ee 1px; } #wrap ul li div{ height:31px; text-align:center; width:160px; margin-top:10px; position:relative; bottom:0px; padding-top:6px; padding-bottom:4px; background:#f3f4ee ; font: 12px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif; opacity:0.8; color: #525049 ; text-shadow: 0px 1px 0px #555; } img#cart{bottom:0px;position:fixed; margin-left:30px;} #wrap ul li { cursor:pointer;} #cart_wrapper { border:solid #E8E7DC 1px; min-height:120px; width:100%; padding-top:15px; display:none; background:#E2E2E2; font: 12px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif; position:relative } #Submit { height: 40px; float: left; width: 100px; background: #95e0eb; } #Submit:hover{ background: #41cc65; } .closeCart{ cursor:pointer;} button { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #E8E7DC; width:140px; cursor: pointer; display: inline-block; font: 9px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif; letter-spacing: 2px; padding-top: 12px;color:#525049; margin-top:1px; border:solid #ccc 1px; padding:8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; margin-left:20px; text-transform: uppercase; } button:hover { background: none repeat scroll 0 0 #F8F8F3; } .cart-total{background: none repeat scroll 0 0 #F8F8F3;} .shopp,.cart-total{ border:solid #E8E7DC 1px; padding:8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; font-size:12px; background:url(remove.png) center right no-repeat 5px; border-radius: 8px; font-family:"LubalGraphBdBTBold",Tahoma; margin-top:3px; width:320px; float:left; } #cart_form{ width:570px; padding-left:15px;} div.shopp span{ float:left;} div.shopp div.label{ width:130px; float:left; } div.shopp div.shopp-price{ width:70px; float:left;} .quantity{ float:left; margin-top:-3px; width:20px;} img.remove{float:right;cursor:pointer;} .cart-total b{width:130px;}