Там Сям: сайт доставки роллов в Краснодаре — меню на 102 позиции, конструктор сета, бонусы и оплата

Клиент: «Там Сям» — семейное кафе и доставка роллов в Краснодаре. Кафе работает ежедневно с 10:00 до 23:00, самовывоз — с улицы Артюшкова, 2А/1. В меню 102 позиции в 11 категориях: суши, роллы, горячие и мини-роллы, сеты, закуски, вок, соусы, напитки и бургеры.

Ситуация: на сумму заказа влияет много правил. Доставка бесплатна от 1 200 ₽, до этой суммы стоит 200 ₽. За самовывоз — скидка 10%, в день рождения — 15% на заказ от 2 200 ₽. За каждые 500 ₽ начисляется 25 баллов, ими можно оплатить до 30% заказа. Есть промокоды. Скидки не суммируются и не действуют на сеты недели. Гость должен видеть точный итог до оформления, а меню, цены и акции на главной должны обновляться без правки вёрстки.

Задача: спроектировать и разработать сайт, на котором гость быстро находит блюдо, собирает собственный сет, видит сумму с доставкой, скидками и баллами, выбирает доставку или самовывоз и время и платит картой онлайн или наличными. Критерии: меню и слайды приходят с сервера и не пропадают при его сбое, корзина пересчитывает заказ при каждом изменении, а заказ с оплатой наличными можно повторить одной кнопкой.

Структура и главная

Главная отвечает на три вопроса гостя: что сегодня предлагают, где нужное блюдо и как быстро заказать. Она открывается тремя слайдами с сервера — «Яркий вкус для всей семьи», «Быстрая доставка» и «Скидка 20% на все сеты» — они сменяются каждые 5 секунд. Ниже — категории меню и популярные блюда, на телефоне категории идут строкой чипсов.

Поиск в шапке срабатывает с двух букв и показывает до пяти подходящих позиций с фото, весом, калориями и ценой. По запросу «фила» он находит «Сет Фила», «Филадельфию», «Филадельфию микс» и «Филадельфию с угрём».

Визуальный стиль

Интерфейс построен на фирменных элементах кафе: красные кнопки и подвал, логотип с пандой, которая держит палочки с роллами, крупные скругления карточек. Фото меню — роллы на деревянной доске с гравировкой «Там Сям» на ярко-жёлтом фоне. В конце главной — красный блок «ТАМ СЯМ», где рука с палочками держит ролл на месте буквы «С».

• Шрифты: Inter для текста, заголовков и логотипа, Unbounded — для заголовков бонусов и крупных процентов.

• Цвета: красный #D92B2E для кнопок и акцентов, #E53027 для красного блока и подвала, #0A0A0A для текста и тёмных карточек, #F7F6F4 для фона, #F2F1EF для карточек блюд, зелёный #2E7D32 для отметки о бесплатной доставке.

Меню на 102 позиции

Меню разбито на 11 категорий: специальное меню (10 позиций), суши (15), роллы (11), горячие роллы (11), мини-роллы (7), сеты (12), закуски (4), вок (7), соусы (10), напитки (14) и бургеры (1). Каждое блюдо — карточка с фото, весом и ценой и кнопкой «+».

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

Карточка блюда

По нажатию на карточку открывается лист блюда:

• калории и описание с предупреждением, что соевый соус, имбирь и васаби не входят в стоимость;

• раскрывающийся блок «Состав»;

• белки, углеводы и жиры на порцию в виде столбиков;

• добавки к заказу: палочки, имбирь и васаби бесплатно, соевый соус за 30 ₽;

• итог и кнопка «Добавить в корзину».

Конструктор сета

Гость выбирает размер сета — 3, 6 или 9 роллов — и набирает его из 11 позиций: Филадельфия и Калифорния в нескольких вариантах, темпура с креветкой, «Чикен спайси», «Бонито с лососем», «Сливочная креветка», «Свежесть» и чизбургер. Каждое нажатие кладёт в сет одну штуку, слоты заполняются, сумма растёт.

Кнопка «Добавить сет в корзину» становится активной, только когда сет собран полностью. Смена размера сбрасывает выбор. В корзине сет отображается как «Собственный сет» со списком состава.

Корзина и правила скидок

Корзина пересчитывает заказ при каждом изменении и показывает итог до оформления:

• полоса над списком показывает, сколько осталось до бесплатной доставки от 1 200 ₽; до этой суммы доставка стоит 200 ₽;

• самовывоз убирает доставку и даёт скидку 10%;

• за каждые 500 ₽ начисляется 25 баллов — гость видит, сколько получит за этот заказ;

• скидки не складываются: из промокода и самовывоза применяется бо́льшая;

• промокод проверяет сервер — по коду и номеру телефона;

• под списком — добавки к заказу и блок «Рекомендуем попробовать».

Оформление и оплата

В колонке оформления гость выбирает способ получения, время — «Как можно скорее», около 40 минут, или слот из списка, — способ оплаты и оставляет комментарий. Заказ уходит на сервер сайта. При оплате картой сервер возвращает ссылку на онлайн-оплату, после неё гость возвращается на сайт и видит, прошла ли оплата. После оформления сайт показывает «Заказ принят» и очищает корзину.

Заказ с оплатой наличными сайт сохраняет в браузере. На главной появляется блок «Ваш последний заказ» с датой, суммой и кнопкой «Повторить», которая возвращает тот же набор в корзину.

Акции и частые вопросы

Условия акций на главной собраны в три карточки: −10% за самовывоз, −15% в день рождения на заказ от 2 200 ₽ в течение трёх дней до и после даты, бонусы — баллы оплачивают до 30% заказа и действуют 6 месяцев. Отдельно указано, что акции не суммируются и не распространяются на сеты недели.

В частых вопросах собрано то, что гости уточняют до заказа: стоимость доставки, способы оплаты — наличные, карты Visa, Mastercard и МИР, СБП, Apple Pay и Google Pay при получении, — безглютеновые роллы по запросу, время доставки по зонам (центр — 30 минут, средняя зона — 45, дальняя — до 60), адрес самовывоза и правила программы лояльности.

Технологии

Макеты — в Figma, вёрстка — HTML и CSS с отдельной мобильной версией. Блюда, цены и слайды главной сайт загружает со своего сервера; если сервер не отвечает, страница показывает встроенную копию меню и слайдов. Приём заказов, проверка промокодов и создание ссылки на онлайн-оплату — на сервере сайта. Последний заказ с оплатой наличными хранится в браузере гостя.

Сайт tamsiam.ru принимает заказы на доставку и самовывоз. Гость выбирает из 102 позиций в 11 категориях, собирает свой сет, видит итог с доставкой, скидками и баллами и платит картой онлайн или наличными.

Правила акций — бесплатная доставка от 1 200 ₽, −10% за самовывоз, баллы и промокоды — корзина применяет сама при каждом изменении заказа. Меню и слайды главной обновляются с сервера.

Что получил клиент

• Главную со слайдами с сервера и поиском по блюдам с двух букв

• Каталог на 102 позиции в 11 категориях с закреплённой строкой категорий

• Лист блюда с описанием, составом, КБЖУ и добавками

• Конструктор сета из 3, 6 или 9 роллов на выбор из 11 позиций

• Корзину с бесплатной доставкой от 1 200 ₽, самовывозом со скидкой 10%, баллами и промокодами

• Оформление со временем доставки и оплатой наличными или картой онлайн

• Кнопку «Повторить» для последнего заказа с оплатой наличными

• Блок акций и частые вопросы о доставке, оплате и бонусах

Сайт: https://tamsiam.ru/