CodePen Embed - CART *10

<div align="left">
  клик по товару добавляет его в корзину
  <div id="wrap" align="left">
    <ul>
      <li id="1">
        <img src="https://icon-icons.com/icons2/1065/PNG/256/iMac_icon-icons.com_76864.png" class="items" height="100" alt="" />
        <div><span class="name">Mac/OS X: Price</span>: <span class="price">100</span> руб.
          <br/><span>от 10 штук</span></div>
      </li>
      <li id="2">
        <img src="https://icon-icons.com/icons2/1065/PNG/256/iMac_icon-icons.com_76864.png" class="items" height="100" alt="" />
        <div><span class="name">IPhone 3GS </span>: <span class="price">500 </span> руб.<br/><span>от 10 штук</span></div>
      </li>
      <li id="3">
        <img src="https://icon-icons.com/icons2/1065/PNG/256/iMac_icon-icons.com_76864.png" class="items" height="100" alt="" />
        <div><span class="name">Apple IPad </span>: <span class="price">300</span> руб.<br/><span>от 10 штук</span></div>
      </li>
            <li id="4" hidden>
        <div><span class="name">Доставка </span>: <span class="price">30</span> руб.<br/><span>от 10 штук</span></div>
      </li>
    </ul>
  </div>

  <div id="left_bar"> 
    <form action="#" id="cart_form" name="cart_form">
      <div class="cart-info"></div>
      <div class="cart-total">
        <b>Товаров на сумму:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b> <span>0</span>&nbsp;руб.
        <input type="hidden" name="total-hidden-charges" id="total-hidden-charges" value="0" />
      </div>
      <button type="submit" id="Submit">ОТПРАВИТЬ</button><br /><br />
      <button id="clear">ОЧИСТИТЬ</button>
    </form>
  </div> 
</div>



#wrap{ width:600px; height:900px; top:20px; position:relative; bottom:0px;
  }
#wrap ul{ margin:0px; padding:0px; text-align:center }

#wrap ul li{ 
  -moz-background-clip: padding;     /* Firefox 3.6 */
  -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
  background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
  border: 10px solid rgba(0,0,0,0.3);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px; 
  
  /*background:url("bgs.png") repeat-x scroll;*/
  list-style-type:none; 

  width:160px; 
  margin-left:13px; 
  margin-bottom:15px; 
  float:left;
  padding:15px 0px 0px 0px;
  font-family:"LubalGraphBdBTBold",Tahoma;
  font-size:2em;
  overflow:hidden;
}

#wrap ul li div{ 

  height:25px;
  text-align:center;
  width:160px;
  margin-top:10px;
  position:relative;
  bottom:0px;
  padding-top:12px;
  padding-bottom:4px;
  background:#000;
  font: 11px Tahoma, Helvetica, Arial, Sans-Serif;
  opacity:0.8;
  color: #ccc;
  text-shadow: 0px 2px 3px #555;
}
img#cart
{ 
  bottom:0px;position:fixed; margin-left:30px; /* keep the bar on top  */
}

#wrap ul li { cursor:pointer;}

div#bottomBar {
  position: fixed;/* keep the bar on top  */
  bottom: 0px;
  z-index: 9999;
  background:url(rail.jpg) bottom center repeat-x;
  height: 130px;
}

div#bottomBar {
  width:600px;
}

#left_bar 
{
  top:120px; 
  left:600px;
  height:350px;
  width:250px;
  position:fixed;
  padding:10px;
}
em{ font-style:normal; }
button {
  
  background:none repeat scroll 0 0 #AD7B05; color:#FFFFFF;
  border:medium none;
  font-family:"LubalGraphBdBTBold",Tahoma;
  font-size:1.1em;
  margin-right:-14px;
  padding:10px;
  cursor:pointer;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px; 
}

.cart-total{ background:#E8E8E8}

.shopp,.cart-total{ 
  border:solid #ccc 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-bottom:3px;
  width:260px;
  }
  
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; width:12px;}
.cart-total b{width:130px;}

var Arrays = [];  

$('#wrap').on('click', 'li', function() {
  var baseQuantity = 10;
  var delivery = 300;
  var thisID = $(this).attr('id');
  var itemname  = $(this).find('div .name').html();
  var itemprice = +$(this).find('div .price').html();

  if (include(Arrays, thisID)) {
    var price = +$('#each-'+thisID).children(".shopp-price").find('em').html();
    var quantity = +$('#each-'+thisID).children(".shopp-quantity").html();
    var newQuantity = quantity + baseQuantity;
    var total = itemprice * newQuantity;

    $('#each-'+thisID).children(".shopp-price").find('em').html(total);
    $('#each-'+thisID).children(".shopp-quantity").html(newQuantity);

    var prev_charges = $('.cart-total span').html() - quantity * itemprice + 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 = prev_charges + itemprice * baseQuantity;

    
    
    $('.cart-total span').html(prev_charges);
    $('#total-hidden-charges').val(prev_charges);

    $('#left_bar .cart-info').append('<div class="shopp" id="each-'+thisID+'"><div class="label">'+itemname+'</div><div class="shopp-price"> <em>'+itemprice * baseQuantity+'</em> руб.</div><span class="shopp-quantity">' + baseQuantity + '</span>&nbsp;шт<img src="http://icons-for-free.com/free-icons/png/512/1891405.png" class="remove" /><br class="all" /></div>');
  }
}); 

$('#cart_form').on('click', '.remove', 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-','');
  
  if (thisID == '4') return

  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();
}); 

$('#clear').click(function() {
  $(".cart-info").html("");
  $('.cart-total span').html("0");
  $('#total-hidden-charges').val(0);
  Arrays.splice(0, Arrays.length)
  return false;
}); 

$('#Submit').click(function() {
  var totalCharge = $('#total-hidden-charges').val();
  $('#left_bar').html('Total Charges: $'+totalCharge);
  return false;
}); 

$(document).ready(function () {
  $('#4').click();  
})


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;
  }
}










//jquery.livequery.js
!function(o){o.extend(o.fn,{livequery:function(i,n,u){var r,s=this;return o.isFunction(i)&&(u=n,n=i,i=void 0),o.each(o.livequery.queries,function(e,t){if(!(s.selector!=t.selector||s.context!=t.context||i!=t.type||n&&n.$lqguid!=t.fn.$lqguid||u&&u.$lqguid!=t.fn2.$lqguid))return(r=t)&&!1}),(r=r||new o.livequery(this.selector,this.context,i,n,u)).stopped=!1,r.run(),this},expire:function(i,n,u){var r=this;return o.isFunction(i)&&(u=n,n=i,i=void 0),o.each(o.livequery.queries,function(e,t){r.selector!=t.selector||r.context!=t.context||i&&i!=t.type||n&&n.$lqguid!=t.fn.$lqguid||u&&u.$lqguid!=t.fn2.$lqguid||this.stopped||o.livequery.stop(t.id)}),this}}),o.livequery=function(e,t,i,n,u){return this.selector=e,this.context=t||document,this.type=i,this.fn=n,this.fn2=u,this.elements=[],this.stopped=!1,this.id=o.livequery.queries.push(this)-1,n.$lqguid=n.$lqguid||o.livequery.guid++,u&&(u.$lqguid=u.$lqguid||o.livequery.guid++),this},o.livequery.prototype={stop:function(){var i=this;this.type?this.elements.unbind(this.type,this.fn):this.fn2&&this.elements.each(function(e,t){i.fn2.apply(t)}),this.elements=[],this.stopped=!0},run:function(){if(!this.stopped){var i=this,e=this.elements,n=o(this.selector,this.context),t=n.not(e);this.elements=n,this.type?(t.bind(this.type,this.fn),0<e.length&&o.each(e,function(e,t){o.inArray(t,n)<0&&o.event.remove(t,i.type,i.fn)})):(t.each(function(){i.fn.apply(this)}),this.fn2&&0<e.length&&o.each(e,function(e,t){o.inArray(t,n)<0&&i.fn2.apply(t)}))}}},o.extend(o.livequery,{guid:0,queries:[],queue:[],running:!1,timeout:null,checkQueue:function(){if(o.livequery.running&&o.livequery.queue.length)for(var e=o.livequery.queue.length;e--;)o.livequery.queries[o.livequery.queue.shift()].run()},pause:function(){o.livequery.running=!1},play:function(){o.livequery.running=!0,o.livequery.run()},registerPlugin:function(){o.each(arguments,function(e,t){if(o.fn[t]){var i=o.fn[t];o.fn[t]=function(){var e=i.apply(this,arguments);return o.livequery.run(),e}}})},run:function(e){null!=e?o.inArray(e,o.livequery.queue)<0&&o.livequery.queue.push(e):o.each(o.livequery.queries,function(e){o.inArray(e,o.livequery.queue)<0&&o.livequery.queue.push(e)}),o.livequery.timeout&&clearTimeout(o.livequery.timeout),o.livequery.timeout=setTimeout(o.livequery.checkQueue,20)},stop:function(e){null!=e?o.livequery.queries[e].stop():o.each(o.livequery.queries,function(e){o.livequery.queries[e].stop()})}}),o.livequery.registerPlugin("append","prepend","after","before","wrap","attr","removeAttr","addClass","removeClass","toggleClass","empty","remove"),o(function(){o.livequery.play()});var n=o.prototype.init;o.prototype.init=function(e,t){var i=n.apply(this,arguments);return e&&e.selector&&(i.context=e.context,i.selector=e.selector),"string"==typeof e&&(i.context=t||document,i.selector=e),i},o.prototype.init.prototype=o.prototype}(jQuery);

This Pen is owned by Alex on CodePen. It is a fork of this Pen.

See more by @cawa-93 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js