Как реализовать добавление товара в корзину?

Question

[Helping]

Всем привет, такой вопрос: как грамотно сделать добавление в корзину и её корректное отображение?
Сейчас имеется следующие:
* Карточка товара:

<?php
foreach ($result as $row) 
{            ?>               
                        <!-- ********************* Карта товара *********************** -->
                        <div class="product">


                                <div class="img-prod">
                                    <img src="img/<?php echo $row['id'] ?>.svg">
                                </div>
                                <div class="name-prod">
                                    <?php echo $row['title'] ?>
                                </div>

                                <div class="article-prod">
                                    <span class="span-prod">Артикул:</span> <?php echo $row['id'] ?>
                                </div>
                                <div class="price-prod">
                                    <?php echo $row['price'] ?>₽
                                </div>
                               
                                <button class="btn-in_basket" data-art="<?php echo $row['id'] ?>">В карзину</button>
                        </div>
                       <?php } ?>

*Сама корзина:

<a href="/basket" class="basket-a" title="Товары в корзине">
                        <img class="pay" src="img/basket.png ">
                    </a>
                            <span id="summ">999₽</span>
                            <form id="modal-basket">
                               
                            </form>

*Как сейчас работает добавление:

var cart = {};

$('button.btn-in_basket').on('click', addToCart);

function addToCart(){
	var articul = $(this).attr('data-art');

	if (cart[articul] != undefined){
		cart[articul]++;
	}
	else{
		cart[articul] = 1;
	}

    document.getElementById('modal-basket').innerHTML= Object.values(cart);
    console.log(cart);
    showMiniCart();
}

function showMiniCart() {
    var out="";
    for (var key in cart) {
        out += key +' --- '+ cart[key]+'<br>';
    }
    $('#modal-basket').html(out);
}

Нужно при клике на "В корзину" отображать в #modal-basket картинку,название,артикул и кол-во в корзине.
Жду ваших предложений)

Comments

[Сергей Горностаев]

На freelansim.ru вы легко найдёте тех, кто даст вам готовое решение.

[Helping]

Сергей Горностаев, Думаю здесь найдутся разработчики, готовые поделиться своим опытом бесплатно, ведь для этого этот сервис и нужен..
Необязательно готовое, можно просто дать совет, отправить ссылочки почитать

[Сергей Горностаев]

Helping, этот сервис нужен для формирования базы знаний из конкретных ответов на конкретные вопросы. А у вас задание, не вопрос.

[Helping]

Сергей Горностаев, В любом случае это не на заказ.
В процессе обучения делаю сайт с нуля в т.ч. back end, по ходу решил узнать как работает такой механизм в магазинах, не найдя нужной информации в поиске спросил тут, ожидая получить направление или уже готовое решение с целью разбора полученного

Answer 1

[ThunderCat]

если нужен совет - храните корзину в сессии/бд, отправляйте id и количество товара аяксом скрипту на сервер, обратно из скрипта выводите json с данными корзины, по которым нужным образом перерисовывайте элемент с корзиной. Тут вообще не вижу как реализовано хранение/получение данных корзины.

Comments

[Helping]

Хорошим решением будет сохранять корзину у пользователя в localStorage?
Как то так наверное:

localStorage.setItem('cart', JSON.stringify(cart));

Вопрос в том, как по ид товара получить остальную информацию об этом товаре в Jquery и вывести её куда надо?

Так же слышал, что можно хранить информацию о товаре в файле .json и потом вызывать как - то так

$.getJSON('goods.json', function (data) {
            var goods = data;
            var out = '';
            for (var id in cart) {
                out += `<button data-id="${id}" class="del-goods">x</button>`;
                out += `<img src="images\\${goods[id].img}">`;
                out += ` ${goods[id].name  }`;
                out += ` ${cart[id]}  `;
                out += cart[id]*goods[id].cost;
                out += '<br>';
            }
            $('#modal-basket').html(out);
            
        });

Как это будет работать с большим кол-вом товаров?

[riddlr]

Helping, локалсторадж подойдет если у вас для покупки не надо регистрировать аккаунт. А если аккаунты есть, то что вам мешает охранять на беке, кроме собственной лени?

[Helping]

riddlr, честно говоря не понял о чём вы (охранять на беке)
Можно поподробней?

[riddlr]

Helping, все ж написано выше

храните корзину в сессии/бд, отправляйте id и количество товара аяксом скрипту на сервер, обратно из скрипта выводите json с данными корзины

что именно вам не понятно?

[ThunderCat]

Helping,

Хорошим решением будет сохранять корзину у пользователя в localStorage?

приемлемым, если вы не собираетесь привязывать пользователя к системе и не имеете цели отслеживать его заказы/покупки с целью предоставления скидок/бонусов по накоплению покупок или чего-то подобного.

честно говоря не понял о чём вы (охранять на беке)

Сохранять на бэке - хранить на стороне сервера, а не клиента, клиент может на своей стороне делать с данными любые манипуляции. Это не всегда удобно/безопасно. По этому хранение на "бэке" считается более контролируемым. Читайте про механизмы сессий. Кроме того - на сервере манипуляции с данными производить легче, например достаточно иметь id объекта и вытащить из базы все данные о нем, на фронте же необходимо на каждый объект иметь все данные о нем прямо в DOM объектах, что не красиво, не безопасно, несет серьезный оверхэд кода и не всегда удобно.