День 4

Прошла неделя...

За это время много прочитал справочной информации, пересмотрел кучу примеров (по большей степени не работоспособных) и решил несколько переосмыслить свою идею изначальной корзины.

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

Второе - нужно внедрить управление количеством выбираемого товара. Методы которые пришли в голову - это выбор кнопками "плюс" и "минус" и ввод клавиатурой. Так же нужно выполнить возможность добавления товара в корзину несколько раз (если покупатель будет нажимать несколько раз кнопку "добавить"). Но, при этом в базе один и тот же товар должен объединятся по количеству, что бы не получилось бесконечное число строчек одного и того же товара с количеством в одну штуку)).

Третье - к каждому товару покупатель должен иметь возможность добавить комментарий (при необходимости). В этом случае товар с различными комментариями должен разделятся в итоговой базе.

Четвертое - нужно реализовать показ сокращённой версии корзины с динамическим обновлением информации и постоянным показом покупателю сколько товара он уже выбрал и на какую сумму.

Пятое - совсем забыл изначально, но нужно иметь возможность очищать корзину)

Шестое - уже при оформлении покупки пользователь переходит в полное отображение корзины, где списком будет показан весь его выбор.

Что было для этого сделано:

1. Для решения первого пункта решил все товары размещать в отдельных блоках (карточках) с одинаковым классом и в процессе работы - проверять из какого блока прошёл вызов события и только после этого обрабатывать информацию. В принципе это позволяет работать с произвольным количеством блоков (товаров) и при этом программа будет работать всегда как-бы с одним блоком (товаром).

2. Для решения второго пункта решил взять за основу поле формы input. С клавиатурным вводом там всё понятно. Для плюсовой и минусовой кнопки придётся считывать информацию из этого поля, менять его и записывать его обратно. Тут нужно будет добавить проверку на корректность ввода: минусовых и текстовых значений быть не должно, только цифры и только больше нуля. После нажатия кнопки "добавить в корзину" название товара проверяется на наличие в локальном хранилище. Если такое название не найдено (выбор товара произошёл впервые) то добавляется "как есть", если же такой товар уже есть в сохранённом выборе то строка товара целиком не добавляется а в существующей сохранённой строке меняется только количество.

3. Для решения третьего пункта подошёл расширенный вариант реализации второго пункта). В карточку товара добавляем поле формы, такое же как и при выборе количества. И при записи товара в корзину проверка на название будет дополнена проверкой на уникальность комментария.

4. С четвёртым пунктом пришлось несколько повозиться. Было несколько решений этого вопроса, но наиболее простой на мой взгляд это при каждом добавлении товара в корзину считать соответствующие поля добавленных товаров, суммировать их и сразу показывать покупателю.

5. По пятому пункту не стал удалять каждую сохранённую карточку товара в локальном хранилище, а просто очищать это хранилище в девственное состояние)).

6. Шестой пункт оказался самым простым в реализации (не считая пятого пункта) - тут я просто скрываю карточки товара и сокращённую версию корзины и вывожу из локального хранилища всю находящуюся там информацию.

В итоге получилась уже довольно интересная корзинка))

Для показа и проверки работоспособности вложил результат на бесплатный хостинг, так что работоспособность и функционал можете оценить по адресу:
http://hfb79197.bget.ru

Дальше буду накладывать простенькую графику на то что уже создано, будем облагораживать внешний вид, заодно посмотрим что такое верстка...