Пример корзины заказов для кафе в приложении Glide

Выбор блюд клиентом и помещение блюда в корзину заказов

Для этого нам надо, как и прежде идентифицировать каждого пользователя, чтобы корзина заказов у каждого была своя. Я не буду здесь повторяться, и заполнять таблицу с пользователями, а сделаю это за “кадром”, для тех, кто не смотрел предыдущего приложения, это можно посмотреть здесь .

Рис.1

И не забудем в таблицах Users и Лист 1 создать дополнительные столбцы типа Row ID. И здесь наблюдается изменение в столбцах Rl_cat и Rl_Chief отображаются не наименование блюд (Name), а их ID (рис. 1)
Рис.2

Мне это не нравится, т.к. не очень понятно, что за блюда в данной категории (а фото очень небольшие). Но при этом во вкладке мы видим всё корректно, как и прежде. Делаем маленький эксперимент. У меня сейчас колонка Menu ID по умолчанию стоит на первом месте в таблице “Лист 1”, а Название - это второй столбец. Перетягиваем его на первое место и о-ля-ля. В таблице “Категории” всё стало на свои места, как и раньше (Рис.2).

Рис.3
Теперь как и прежде, создадим новую таблицу и назовём её “Корзина”. Сюда мы будем помещать все данные о выбранных блюдах, их стоимости, о заказчике, о времени заказа и другие данные.
Для начала также создадим в таблице столбец с идентификаторами строк, и назовём его “Сart ID”.
Столбец ‘Name’, созданный по умолчанию, мы сразу удалим, он нам не понадобиться. Данные о пользователе мы будем брать из таблицы ‘Users’.
Данные о блюдах будем брать из таблицы Лист 1 при выборе блюда пользователем. Ещё добавим столбцы “Время заполнения”, Цена заказа, Цена выбранных блюд, Сумма заказа. В этой таблице ничего не изменилось, и я также сделаю её за кадром. В таблице добавлены столбцы, тип и название которых представлены в таблице на рис. 3. а сама таблица представлена рис. 4.


Рис.4

Если у вас с этим возникли проблемы можно посмотреть здесь .

Корзина у нас создана, теперь перейдём на вкладку “Layout”,выберем одно из блюд, например, ”Закуски” → “Салат из свеклы”, и здесь надо добавить кнопку для выбора блюда, т.е. положить в корзину.

Нажимаем на иконку Добавить компонент и смотрим, кнопки “Form Button”, которая была раньше, здесь нет. (Появились новые компоненты, например, интересный компонент Contact Form, и другие). В блоке ACTIONS выбираем компонент Button и жмём на него. У нас Glile создал кнопку с названием Go!. Выбираем её и переходим на вкладку General. Дизайн вкладки, иконки и их назначения поменяли вид. Здесь нажимая на различные иконки в блоках STYLE и OPTIONS, можно поменять стиль, размер и положение кнопки, но я пока оставлю всё как есть.

Рис.5
Переходим к блоку ACTION. Здесь Glide по умолчанию создал одно действие, это Show notification с наименованием Go!. Если нажать на кнопку, то внизу экрана на зелёном фоне появляется сообщение Отправлено . Но при этом никаких других действий не происходит, а нам надо выбранное блюдо (или товар) положить в корзину, т.е. записать в таблицу Корзина. Поэтому жмём на наше “действие” Show notification и у нас открывается новая вкладка CONFIGURE ACTION (рис. 5). Здесь в “Title” я меняю на Выбрать, для интереса нажимаю на “птичку” в строке “icon” и выбираю понравившуюся иконку, а в строке “Message” пишу Блюдо выбрано. Это сообщение, которое будет появляться у пользователя при выборе блюда.

Но мне нужно, чтобы информация о выбранном блюде была сохранена в корзине. Для этого жмём на строку Show notification (строка со звёздочкой) и выбираем сначала Actions for Лист1, а затем Create new action…, и у нас открывается новая вкладка. Здесь я наименование действия “Untitled action” меняю на “Выбор блюда” и нажимаю на крестик (появляется при наведении мыши) под действием “Блюдо выбрано”.
В открывшемся меню, нажимаем сначала Data, а затем Add row (Рис. 6).


Рис.6

Нажимаем на наше новое действие “Add row” и в открывшейся вкладке меняем в строке “Table” Лиск1 на Корзина. Время заполнения выбираем из списка Current date/time, User ID, последовательно, выбираем User Profile → User ID, а в Menu ID - Menu ID(Рис.7). И после всего этого не забываем нажать Done в правом верхнем углу.

Рис.7

Всё проверяем! Нажимаем на нашу кнопку Выбрать, затем переходим к другому блюду. Пусть это будут “Котлеты домашние” и снова жмём Выбрать. Переходим на вкладку “Data” и смотрим таблицу «Корзина» (Рис. 8). Два выбранных блюда пользователя “Александр” помещены в корзину, данные о блюдах их стоимости и сумма заказа отображены правильно. Bсё отлично.
Рис.8

Подведём итоги. За небольшим различием в части других используемых компонентов и некоторого дизайна настроек практически ничего изменилось. А при создании таблицы "Корзина" совсем ничего не поменялось.

Просмотр и удаление блюда из корзины заказов

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

Рис.9
Рис.10

Откроем «Layout» и создадим новую вкладку, для этого последовательно выбираем NAVIGATION → (+) → Screen from data → Корзина (здесь в отличии от Glide Pages, мы можем сразу указать в качестве источника нашу таблицу Корзина. По умолчанию Glide нам создал вкладку с компонентом Collection - Корзина со стилем «Card», который я сразу поменяю на List. И ещё в «Title» я поменяю “Корзина” на Корзина заказа. Если изображение определено правильно, то в строках «Title» и «Description» блока ITEMS DATA указаны “User ID” и “Menu ID”, а мне бы хотелось указать наименование и цену, которые находятся в столбцах Look_menu_name и Look_menu_price, но Glide не даёт такой возможности (примечание, почему-то в списке для строки “Image” они отображаются, хотя там совсем не нужны?). Правда стоимость блюда у меня ещё есть в столбце SV_цена заказа, его я и выберу в строке «Description». Для того чтобы решить эту проблему, и чтобы пользователь смог увидеть наименование блюда, я создам ещё один дополнительный столбец в таблице Корзина типа Single Value (столбцы этого типа в списке отображаются), и назову его SV_название блюда, где в строке “From” укажу Look_menu_name. В блоке ACTIONS я отключу кнопки Allow users to add items и Allow users to edit items, но включу кнопку Allow users to delete items, что позволит пользователю удалять блюда из корзины (Эта операция стала проще, чем в “Glide Pages”), при этом появляется окно подтверждения (которого не было ранее). Теперь всё нормально (см. Рис. 9).

Ещё я добавлю два компонента, это TEXT → Headline, где в строке «Text» напишу Сумма заказа, и TEXT → Text, где в строке «Text» выберу из списка столбец Roll_сумма заказа. Теперь пользователь может видеть сумму всего заказа и что-то удалять (см. Рис. 10).

Фильтрация данных в корзине заказов

Рис.12

На рис.10 отображена вся корзина (ещё я вошёл от имени пользователя Виктор, и выбрал кофе и десерт). Теперь мне надо сделать фильтр, чтобы каждый пользователь (вошедший по своему email) видел только свою корзину.

Рис.11 Для этого выберем наш компонент Collection - Корзина, откроем вкладку Options, и в блоке FILTER DATA жмём Add Filter. По умолчанию Glide мне создал фильтр Время заполнения is not empty. Нажимаю на него и в открывшейся вкладке выбираю: Look_user_email и is signet-in user (рис. 11). Проверяем. Входим от имени Виктор и смотрим (рис. 12).

Пользователь Александр видит только свою корзину (а Виктор только свою). У меня здесь два салата из помидор, нажимаю на три точки справа и в появившейся вкладке нажимаю на Delete, и блюдо удалено.