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 = $('#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');
        
        console.log(data.basket);

      } else {
      
      	console.log('product does not exist basket');

        // add new id to array
        console.log(data.basket);
        
        // this is where i'm trying to add an new item to data.basket
        
        /*
        
        data['basket'] = product_id
        
        data.basket[product_id] = {
          qty: product_qty
        }; 
        
        */
        
        console.log(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);