JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<div>
  7. Fondue Kit 39.00 <button class="basket-add" data-id="7">Add to basket</button>
  <input type="number" value="1" id="product_qty_7" />
</div>


<div>
  9. Dapper Chap 25.00 <button class="basket-add" data-id="9">Add to basket</button>
  <input type="number" value="1" id="product_qty_9" />
</div>

JavaScript

// document ready
(function($) {


  // product index sidebar open toggle
  $(document).on('click', '.basket-add', function(e) {

    var product_id = $(this).data('id');
    var product_qty = parseInt($('#product_qty_' + product_id).val());
    var basket = {};

    // if basket cookie exists
    if (Cookies.get('_basket')) {

      // basket cookie data
      var data = Cookies.getJSON('_basket');
      
      // if product exists in basket
      if (data.basket[product_id]) {

        console.log('product exists in basket');
        
        // quantity vars
        var current_qty = parseInt(data.basket[product_id].qty);
        var updated_qty = current_qty + product_qty;
        
        // update new quantity
        data.basket[product_id] = {
          qty: updated_qty
        }; 
        
        console.log(data.basket);

      } else {
      
      	console.log('product does not exist basket');
				
        // add item and quanity
        data.basket[product_id] = {
          qty: product_qty
        }; 
        
        console.log(data.basket);

      }
      
      // update cookie
      Cookies.set('_basket', {
        basket: data.basket
      });

    } else {

      // create new basket array
      basket[product_id] = {
        qty: product_qty
      };

      // create new cookie
      Cookies.set('_basket', {
        domain: document.domain,
        basket: basket
      });

    }

    // prevent link defaults
    e.preventDefault();

  });


})(jQuery);