Корзина (cart) на jQuery с использованием LockalStorage

Что бы сделать корзину покупок на jQuery с использованием LockalStorage понадобится базовое понимание основ языка JavaScript. Без корзины не обходится не один интернет-магазин и понимание как она работает, необходимо каждому frontend разработчику.

Реализовывать задачу будем с помощью браузерного хранения LockalStorage, что бы данные не удалялись во время перезагрузки.

Выглядеть корзина будет следующим образом (демо):

      Вначале, как и всегда добавляем форму:

          <ul id="products_list"></ul>
          <ul id="cart"></ul>
      
          <div id="counter"></div>
          <div id="amount_counter"></div>
      

      Далее сам скрипт по ее обработке:

                  var $products_list = $('#products_list');
                  var $cart = $('#cart');
                  var products = [
                      {
                          name: 'Product 1',
                          price: 10
                      },
                      {
                          name: 'Product 2',
                          price: 2
                      },
                      {
                          name: 'Product 3',
                          price: 17.5
                      }
                  ];
                  var cart = JSON.parse(localStorage.cart || '{}');
      
                  var save_cart = function() {
                      localStorage.cart = JSON.stringify(cart);
                  };
                  
                  var build_counter = function() {
                      var counter = 0;
                      for (var index in cart) {
                          counter += +cart[index];
                      }
                      $('#counter').text('All: ' + counter);
                  };
      
                  var amount_counter = function() {
                      var count = 0;
                      var amount = 0;
                      for (var index in cart) {
                          var count = +cart[index];
                          var product = products[index];
                          var price = products[index].price
                          amount += count * price;
                          
                      }
                      $('#amount_counter').text('Amount: ' + amount);
                  };
      
                  var build_cart = function(){
                      var cart_html = Object.keys(cart).map(function(prod_index){
                          var product = products[prod_index];
                          var count = cart[prod_index];
                         
                          var price = product.price;
                          
                          return '<li>' + product.name + ' x ' + count +
                          '<button data-index="'+ prod_index +'" type="button" class="js_remove">x</button>' +
                          '</li>';
      
                      }).join('');
                      $cart.html(cart_html);
                      build_counter();
                      amount_counter();
                  };
      
                  build_cart();
      
                  var products_html_arr = products.map(function(product, index, current_array){
                      return '<li>' + 
                      product.name + ' $ ' + product.price + 
                      '<button type="button" class="js_add">Add</button>' +
                      '</li>';
                  })
      
                  $products_list.html(products_html_arr.join('') );
      
                  $products_list.on('click', '.js_add', function(){
                      var $li = $(this).parent();
                      var index = $li.index();
                      if (void 0 === cart[index]) {
                          cart[index] = 1;
                      } else {
                          cart[index]++;
                      }
                      save_cart();
                      build_cart();
                  })
      
                  $cart.on('click', '.js_remove', function(){
                      var index = $(this).data('index');
                      delete cart[index];
                      build_cart();
                      save_cart();
                  });       
      

      Для полной реализации корзины еще не хватает необходимых стилей, но основная логика нами рассмотрена. Вышеуказанная реализация не самая простая, поэтому для ее понимания следует прочитать книгу по основам jQuery.

      Скачать реализацию можно по ссылке.

      Добавить комментарий