Задача
Обжарочной мастерской нужен был интернет-магазин: каталог кофе, чая и посуды, подробная карточка товара, корзина, оформление заказа и личный кабинет. Двенадцать страниц, которые одинаково удобно работают на телефоне и на компьютере.
Что сделал
- Вынес шапку, подвал, корзину, поиск и всплывающие окна в один общий модуль. Он собирает их на каждой странице сам, поэтому меню правится в одном месте, а не в двенадцати файлах
- Сделал каталог с одиннадцатью группами фильтров: раздел, обжарка, страна, вкусовые ноты, способ обработки, цена, наличие, скидки, новинки и рейтинг
- Рядом с каждым значением фильтра показываю, сколько товаров под него подходит, и пересчитываю это число на лету — покупатель не попадает в пустую выдачу
- Настроил так, что выбранные фильтры попадают в адрес страницы: подборку можно сохранить в закладки или отправить другу, а кнопка «Назад» возвращает ровно к предыдущему набору условий
- Написал генератор товарной графики — упаковки, посуда и фоны рисуются прямо в браузере. В магазине нет ни одной загружаемой картинки, поэтому страницы открываются мгновенно даже на слабом интернете
- Собрал карточку товара: цена пересчитывается при выборе фасовки и помола, пять вкладок с описанием, характеристиками, рецептом заваривания и отзывами. Новый отзыв сразу меняет средний балл
- Сделал оформление заказа в три шага: контакты, доставка, оплата. Телефон и карта вводятся по маске, номер карты проверяется по контрольной сумме, срок действия — на актуальность
- Добавил сохранение черновика заказа: вкладку можно закрыть и вернуться позже, введённые данные не потеряются
- Добавил поиск с подсказками по ходу набора, быстрый просмотр товара без перехода на страницу, сравнение до четырёх позиций с подсветкой отличий, избранное и тёмную тему
Результат
- Двенадцать страниц и 32 товара: полный путь покупателя от главной до оформленного заказа
- Вёрстка проверена от 320 до 1440 пикселей — горизонтальной прокрутки нет ни на одной странице, чек корректно выводится на печать
- Товарная графика не требует фотосъёмки: новая позиция появляется в каталоге сразу после добавления в базу