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

Question

[Анастасия]

Здравствуйте. Пытаюсь сделать интернет магазин и столкнулась с проблемой: "Как сделать добавление товара в корзину?". На данный момент я сделала так:

1. При нажатии на кнопку "в корзину", js обращается к родителю, а затем ищет ребёнка, у которого span.class = name и span.class = size
   
2. Эти данные заносятся в массив, переводятся в json и загружаются в cookie (не сессия). То есть дешифрованные куки выглядят примерно так: [["apple", "big"],["orange", "medium"]];
   
3. На странице корзины я через php ловлю куки и делаю запрос в базу, чтобы вытащить фотографии и цены. И вывожу всё это богатство через foreach в виде таблицы на страницу.
   
4. Далее пользователь заполняет форму (имя, телефон), ждёт "оформить заказ" и в базу "заказы" отправляется содержимое куков.
   
5. В базе "заказы" появляется новый заказ.
   

Я использую headless cms Cockpit, которая использует файловую MongoDB. Понимаю, что это ничего вам не даст, но просто говорю. Считайте, что cms у меня вообще нет.

Теперь вопросы.
1. Я уже сама понимаю, что 1 этап - не комильфо. Как минимум потому что можно в инспекторе изменить название блока name и в корзину уйдёт товар, которого вообще нет в базе.
Я предполагаю, что эту проблему можно решить с помощью ajax, который в начале отправит запрос в базу на проверку существования такого товара, а потом уже добавит его в куки в случае успеха. Скажите, на сколько я права? Так ли это делается и верно ли я мыслю?
2. Как должна происходить процедура "покупки"? Меня смущает, что пользователь имеет доступ кукам (как и первом случае заказ собирается из текста). Верно ли я мыслю, когда "оформляю заказ", отправляя куки? Как я должна действовать?
3. Так как заказ собирается из текста и из кук, то на сколько уязвимо это? Может ли злоумышленник изменить название товара так, чтобы получить доступ к БД и к моим API ключам. И если да, то как мне себя обезопасить?

Comments

[Максим Федоров]

При нажатии на кнопку "в корзину", js обращается к родителю, а затем ищет ребёнка, у которого span.class = name и span.class = size

Нужен тег JQuery :)

Если вы пользуетесь старыми подходами десятилетней давности — вам не мешает сделать себе удобнее,
например прямо на кнопку "в корзину" повесить допатрибуты, типа data-name='Item1' и data-size='m' и любые другие и вычесывать их по клику

Я уже сама понимаю, что 1 этап - не комильфо. Как минимум потому что можно в инспекторе изменить название блока name и в корзину уйдёт товар, которого вообще нет в базе.

Или сделайте data-id=12435, тогда не получится добавить товара не из корзины, кроме того при добавлении делайте запрос http запрос с проверкой, все равно же в сессии храните скорее всего товар и запрос надо делать :)

[Максим Федоров]

Верно ли я мыслю, когда "оформляю заказ", отправляя куки? Как я должна действовать?

Да, но в куках хранится только session id, а вся инфа по ценам и товарам в сессии
можно и ids товаров в куках хранить, но все равно калькуляция же на сервере

[Максим Федоров]

Может ли злоумышленник изменить название товара так, чтобы получить доступ к БД и к моим API ключам

как? есть в куках id товара, так он и в урл есть и в верстке, че вот вы можете с этим id сделать? :) ну или не id, а код или алиас, все одно и тоже

[Анастасия]

Нужен тег JQuery :)

Без jquery всё.

Да, но в куках хранится только session id, а вся инфа по ценам и товарам в сессии

нет. именно куки. Куки записываются на js, а затем извлекаются в php через $_coockie

Answer 1

[Владимир Коротенко]

Перепишите код. Все равно у вас есть php так что стартуйте сессию и в неё пишите идентификаторы. По феншую клиент вообще должен у себя хранить только сессию и строить все на сервере. В этом случае все редиски остаются не у дел

Comments

[Анастасия]

Я выбрала куки только потому что я могу выбрать срок их хранения, а в случае с сессией всё ограничено и работает лишь до момента перезагрузки браузера. Как тогда быть?

[Владимир Коротенко]

Анастасия, храните в куке только идентификатор, всю инфориацию храните в базе

Answer 2

[ThunderCat]

Как то все с самого начала не по феншую пошло...

Есть 3 подхода - хранить в сессии, хранить в бд и хранить в куках/локалсторэйдже.
По сути разницы особо нет, во всех 3 случаях хранится массив (в том или ином виде) - [ид товара=> количество], или, в более сложном случае, когда один товар имеет несколько вариаций - массив массивов, где уже хранятся доп. атрибуты товара, помимо количества. Подсчет корзины всегда выполняется на сервере, путем выбора из бд нужных товаров и сложения стоимости товаров.

По поводу реализации - самый простой имхо сессии + аякс, для удобства у вас либо все кнопки уже должны содержать нужные для корзины данные и при клике передаются аяксом, либо являться субмитами для форм, где эти данные вбиты в скрытых полях, ну и при субмите ловится событие и все так же отправляется аяксом на сервер.

Comments

[Анастасия]

Я выбрала куки только потому что я могу выбрать срок их хранения, а в случае с сессией всё ограничено и работает лишь до момента перезагрузки браузера. Как тогда быть?

[ThunderCat]

Анастасия, Так а в чем проблема? Корзина не сильно нужна после закрытия браузера. Если хотите ее сохранять - храните в базе, а в куках у пользователя ключ от корзины. Ну, или храните в куках, по сути код сильно не изменится, вместо сессии будете писать в куки.

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