Задача
Пиццерия, которая продаёт через агрегатор, платит комиссию с каждого заказа и не видит клиента. Свой сайт оставляет и то, и другое, если пользоваться им так же быстро, как привычным приложением.
Поэтому планку задали крупные сети: меню открывается сразу, размер и добавки выбираются в окне поверх страницы, а корзина никого не уводит на отдельный экран. Тёмная тема, крупные фото, всё читается с телефона.
Что сделали
Первый экран: город, время доставки и разделы меню
В шапке стоит то, что голодный человек проверяет первым: город доставки, обещанное время, рейтинг, корзина и вход. Под ней три промо-плитки под текущие акции.
Ниже вкладки разделов, которые прилипают к верху окна: пиццы, комбо, закуски, напитки, кофе, десерты. Нажатие прокручивает каталог к нужному блоку, а не грузит новую страницу.
Каталог и карточка пиццы
Пиццы стоят в сетке по четыре, у каждой фото, название и цена от. Плашки отмечают то, что кухня продвигает: хит, новинка, лучшая цена. Пометки об остроте, вегетарианском составе и детском варианте стоят рядом с названием.
Клик открывает карточку поверх каталога. Размер от десяти до шестнадцати дюймов, классическое или тонкое тесто, шесть добавок со своими ценами и кнопка, где уже видна цена собранной пиццы.
Остальное меню и корзина
На одной пицце заказ не собрать, поэтому каталог идёт дальше: комбо, закуски, напитки, кофе, десерты, соусы. Все блоки живут в одной сетке и с одной вёрсткой карточки, а новый раздел добавляется данными, а не новой страницей.
Корзина открывается панелью справа, каталог остаётся за ней. Количество меняется на месте, сумма пересчитывается сразу, строка над кнопкой показывает, сколько осталось до бесплатной доставки, а соусы и напитки предлагаются тут же в одно нажатие.
Подвал под сеть, а не под одну точку
В самом низу собрано то, что растущей сети нужно где-то держать: франшиза, инвесторы, поставщики, форма «предложить помещение», раздел о кухнях и справка по аллергенам, дальше телефон, почта и документы.
Ниже бренд публикует свои цифры, число кухонь и штаты, где они работают. Тёмный фон, белый текст и один акцентный цвет держат всю страницу, остальное делают фотографии блюд.
Техническая часть
Это демо-витрина, поэтому в технической части прямо сказано, что подключено, а что нет. Два языка, SEO-блок в коде страницы, корзина в браузере и проверки на телефоне.
Поиск и ИИ-ответы
Английский и бразильский португальский
Португальская версия — отдельная страница /pt-br/ с ценами в реалах, английская остаётся в долларах. Открыть португальскую версию
Заголовок и описание под выдачу
Заголовок, описание и canonical прописаны на обеих языковых версиях, а длина заголовка и описания такая, что в выдаче они помещаются целиком.
Превью ссылки в мессенджерах
В коде страницы стоят og:image и twitter:card со значением summary_large_image, плюс фавиконки и веб-манифест.
Каталог и корзина
Меню лежит в одном файле
Пятьдесят два блюда и двенадцать добавок лежат в одном JSON-файле, который вшивается в сайт при сборке.
Корзина живёт в браузере
Корзина и промокод хранятся в памяти браузера, поэтому перезагрузка страницы или закрытая вкладка их не обнуляет.
Оплата
Оплата здесь заглушка
За кнопкой оплаты здесь нет платёжного провайдера, и она сама об этом говорит, а не делает вид, что принимает деньги: эта страница — демо.
Мобильная версия
Проверено на экране телефона
На ширине 390 пикселей ничего не вылезает за край экрана, поэтому горизонтальной прокрутки нет.
Надёжность
Чисто по лучшим практикам
Lighthouse ставит странице 100 за лучшие практики и на мобильном, и на десктопе, ни один пункт раздела не проваливается.
Обычная статика по HTTPS
Сайт — это написанные руками HTML, CSS и JavaScript без фреймворка, отдаются через сеть доставки контента.
Мобильная версия
Что получилось
- От выбора пиццы до корзины — два клика, без перехода на другие страницы.
- Размер, тесто и добавки выбираются в одном окне, цена пересчитывается по ходу.
- Корзина показывает порог бесплатной доставки и предлагает допозиции там же.
Сайт принимает заказы сам, поэтому комиссия и клиент остаются у кухни. Меню лежит данными, поэтому цены, фото и целые разделы меняются без правки вёрстки.
