Какие есть варианты реализации добавления товара с модификаторами в корзину?

Question

[Daniel_lora]

Всем привет! Интересует вопрос как реализовать добавление товара с модификаторами в корзину так же как это сделано на сайтах Макдональдс, Яндекс еда и тп.

Как я понимаю эту схему: Есть некий товар, у него есть кнопка, в которую вставлен id этого товара. При нажатии на кнопку через js достаем этот id и через ajax отправляем в php. В php проверяем что это именно идентификатор и достаем из БД все данные об этом товаре, в том числе и модификаторы, а далее выводим ответом в popup эти данные.

Если это не правильная схема, поправьте меня пожалуйста.

И собственно сами вопросы: Как все это реализовать на php и js или в какую сторону гуглить? И как сделать это безопасным?

Тут указано про какие моменты я говорю выше на примере сайта Макдональдса.


Вот ссылки на сайты где это реализовано:

https://mcdonalds.ru/
https://www.delivery-club.ru/srv/KFC_spb?vendorCat...
https://eda.yandex.ru/restaurant/mcdonalds_krasnoa...

Всем спасибо!

Answer 1

[Sanes]

Это опции. Можно хранить в отдельной таблице или как массив JSON.

Comments

[Daniel_lora]

Как хранить данные это понятно, больше интересуют вопросы:

Как добавлять модификаторы к товару? ( думал вариант через form и отправлять на сервер, но у Макдональдс просто div с input внутри и идентификаторы модификаторов нигде не светится)

И где хранить эти данные на момент когда клиент добавляет модификаторы в popup`e ? (думал вариант в Local Storage), но Макдональдс и тд, так почему-то не делают.

[Sanes]

В таблице заказов. Корзина это уже заказ, со своим статусом.

Преимущества хранения в таблице:

• можно хранить разные наборы
  
• можно поделиться ссылкой на собранную корзину
  

[uni_rush]

Daniel_lora, мак берет сопутствующие поля (имя модификатора и его цена) и отправляет в корзину, ни кто не хранит значение выбранного вами чекбокса до отправки на сервер (до нажатия вами кнопки купить в попапе)

[Daniel_lora]

Sanes, Вы имеете ввиду при нажатии на кнопку добавить в корзину, отправлять запрос на сервер, проверять данные (что пришел именно идентификатор товара) и записывать в таблицу, далее открывать клиенту попап с данными об этом товаре и его модификаторами и при каждом добавлении модификатора ходить на сервер и записывать в таблицу?

[Daniel_lora]

uni_rush, А как мак берет эти поля, которые выбрал человек и как он привязывает их к товару и как он их отправляет в корзину?

[Sanes]

Daniel_lora, это как вариант. Можете хранить, как вам удобно, хоть в сookies

[Daniel_lora]

Sanes, Хорошо, это я понял, спасибо большое. Еще интересует как это сделано у них. При нажатии на добавление модификатора в попапе на сайте Макдональдс, не идет никаких запросов кроме google аналитики, в куки тоже ничего не добавляется, и локал тоже пуст

[Sanes]

Daniel_lora, должно быть хранилище. Или локальное или серверное. Иначе потеряете при обновлении страницы. Возможно там SPA и страница полностью не обновляется. Тогда данные могут храниться в какой-нибудь JS переменной.

[uni_rush]

Sanes, Daniel_lora, они и теряются при обновлении страницы и даже если закрыть попап и открыть заново

[Sanes]

uni_rush, вот вам и ответ. Хранят массив в какой-то переменной JS на клиенте.

[Daniel_lora]

Круто, спасибо большое. Подскажите еще пожалуйста где они хранят id модификаторов? id товара у них лежит в классе кнопки купить, а вот у модификаторов я их не вижу.

[uni_rush]

Daniel_lora, кто они? давайте на конкретном примере. Мак не хранит ни чего. Вы заходите на сайт, вам выводят список товаров, вы нажимаете купить на товаре вам выводят попап с этим товаром и его опциями, вы кликает на чекбоксы, срабатывают ивенты, меняется сумма, вы кликает купить в попапе и только после этого клика уходит запрос вида:

{
    "basket": {
        "itemCount": 1,
        "giftCount": 0,
        "basketItems": [
            {
                "quantity": 1,
                "offerId": 3380,
                "id": 4881049,
                "price": "169",
                "canBuy": true,
                "hasMcComboVariants": false,
                "isGift": false,
                "ingredientGroups": [
                    {
                        "id": 309462,
                        "name": "\u041e\u0441\u043e\u0431\u044b\u0435 \u043f\u043e\u0436\u0435\u043b\u0430\u043d\u0438\u044f",
                        "ingredients": [
                            {
                                "name": "\u0423\u0431\u0440\u0430\u0442\u044c \u041b\u0443\u043a",
                                "price": 0,
                                "code": "88c63417b74638869a4172632a9936341a3d13a72060895ed3fa4ad24f27343e",
                                "canBuy": true
                            }
                        ],
                        "isNoName": true,
                        "isHidden": false
                    }
                ]
            }
        ]
    }
}

и далее вым присылают id корзины и записывают вам кукис с этим id

[Daniel_lora]

uni_rush, Да, давайте на примере. У Мака когда кликаем на товар, улетает GET запрос на сервер и дает json с атрибутами (состав, картинки и тд), а так же там есть модификаторы. Вот отрывок с модификаторами-

ingredients:
9: {name: "Дополнительно Бекон", code: "df2cc744fd9ad3e028685c28c89d791ec032067ef210f60b4401273a9bd9ff5c",…}
code: "df2cc744fd9ad3e028685c28c89d791ec032067ef210f60b4401273a9bd9ff5c"
file: ""
name: "Дополнительно Бекон"
price: 29

Далее открывается попап с этими модификаторами и когда пользователь нажимает на чекбокс система же должна как то понимать что нажали именно на чекбокс "Дополнительно бекон"

Ну и у меня собственно вопрос как определить что в массив нужно записать модификатор "Добавить бекон"

[uni_rush]

Daniel_lora, по нажатии кнопки купить в попапе получить имена ингредиентов «рядом с которыми» чекбокс чекед и передать эти имена и их стоимость на сервер (в моем примере это есть)