Как правильно уложить товар в корзину?

171

25 апреля 2019, 15:10

Всем привет.

Есть функция addToCart, которая при нажатии В корзину собирает данные о состоянии карточки товара ID - артикул, цвет и кол-во, которое нужно добавить.
var = articul, color и quantity соответственно.

Вопрос: как это всё правильно положить в объект, чтобы потом достать в корзину?

Должно выглядеть как-то так:

{
3:чёрный - 10,белый - 2;  
7:зелёный - 3,жёлтый-11 
и тд...
}

Answer 1

Я не очень понял, что за корзина. Если у Вас не получается добавить данные из каких-то полей в объект, то сделать можно как-то так, используя ид_продукта к примеру:

var cart = {} 
 
function addToCart() { 
  var product_id = $('#product_id').val(); 
  const currentProduct = 'product' + product_id; 
  var articul = 'articul1' + product_id; 
  var color = '#0cf'; 
 
 
// добавить данные в объект, ключ - ид продукта 
  cart[product_id] = { 
    'currentProduct': currentProduct, 
    'articul': articul, 
    'color': color 
  } 
 
  $('#modal-basket').html($('#modal-basket').html() + '<p>Товар' + product_id + '</p>' + getHtml(cart[product_id])); 
  console.log(cart); 
} 
 
function getHtml(arr) { 
  var html = ''; 
  html += 'Продукт: ' + arr.currentProduct + '<br />'; 
  html += 'Артикул: ' + arr.articul + '<br />'; 
  html += 'Цвет: ' + arr.color + '<br />'; 
  return html; 
}

div#modal-basket { 
  height: 400px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input id="product_id" value="1" /> 
<input type="button" id="addToCart" value="addToCart" onclick="addToCart()" /> 
<div id="modal-basket"></div>

UPD. Обновил ответ по Вашему комментарию. В Вашу функцию добавил код добавления товара в объект cart. Надеюсь, правильно понял и нужно это.

function addToCart(e) {
  const currentProduct = $(e.currentTarget).closest('.product');
  var articul = $(this).attr('data-art');
  var color = $('.btn-color.active', currentProduct).text().trim();
  var quantity = $('.quantity-input', currentProduct).val();
  /////////
  var product_id = 'a'+articul+'c'+color;
  if (cart[product_id]) {
    // Если товар с выбранным цветом есть в коизине, обновим количество:
    cart[product_id]['quantity'] += quantity;
  } else {
    // Если нет - добавим новый товар в корзину:
    cart[product_id] = {
      'articul' : articul,
      'color' : color,
      'quantity' : quantity
    }
  }
  ////////////
  document.getElementById('modal-basket').innerHTML = Object.values(cart);
  console.log(cart);
  showMiniCart();
}