Hello.

There is a function addToCart , which when pressed Add to the basket collects data on the status of the item ID - артикул, цвет и кол-во card ID - артикул, цвет и кол-во be added.
var = articul, color и quantity respectively.

Question: how to put all this in the object, then to get into the basket?

It should look something like this:

 { 3:чёрный - 10,белый - 2; 7:зелёный - 3,жёлтый-11 и тд... }
  • one
    give the code of your addToCart function - Maxim Stepanov
  • jsfiddle.net/vun3jfgy - Mac Skiry Nov.
  • Cart make an array of objects and add there. The element will be the object that stores the article number, etc. Delete the same way - delete from the array. - Sultanov Shamil

1 answer 1

I did not quite understand what kind of basket. If you are unable to add data from some fields to an object, you can do something like this by using the product_id for example:

 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. Updated the answer for your comment. In your function, added the code for adding goods to the object cart. I hope I understood correctly and need it.

 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(); }
  • I have articul this id. It is necessary that in the object it was the product id, then what color was chosen and the quantity of goods of this color. If this product with this color is already in the basket, then add the number in - simply - Mac Skiry
  • @Mackshiri Updated the answer. I simply added an object to add / update to your function, it should work according to the idea - Maxim Stepanov
  • Uncaught SyntaxError: Unexpected token = 'color' = color; 'quantity' = quantity; - Mac Skiry Nov.
  • @ MakSkiri yes, there should be 'color': color, 'quantity': quantity , of course, I’m writing in a hurry)) - Maxim Stepanov
  • And it works, but when you choose a product that is already in the basket with a different color, it does not add it, but replaces it. - Mac Skiry Nov.