Проверка перед выпуском

Тема считается готовой не тогда, когда написаны все файлы, а когда каждую страницу открыли и каждую кнопку нажали. Ниже — список, по которому это делают.

Страницы: открыть каждую#

• Главная
• Категория: с товарами, второй страницей списка, применённым фильтром
• Категория без товаров — отдельное сообщение, а не пустое место
• Фильтр, который ничего не нашёл — тоже отдельное сообщение
• Карточка товара: с вариантами покупки, с услугами, с аксессуарами, продающегося упаковками
• Товар без фотографии — заглушка на месте, сетка не разъехалась
• Поиск: с находками, без находок, с исправленным запросом
• Поиск из одной буквы — подсказка «введите хотя бы два символа»
• Бренд, список брендов, метка, список меток
• Информационная страница
• Избранное и сравнение — заполненные и пустые
• Корзина — заполненная и пустая
• Оформление: контакты, доставка, оплата, подтверждение
• «Заказ принят» и ошибка оформления
• Оплата по ссылке и ошибка оплаты
• Кабинет: вход, регистрация, восстановление пароля, подтверждение почты, подтверждение телефона, обзор, список заказов, один заказ, профиль
• 404 — со своей шапкой и подвалом
• Заглушка закрытого магазина — включите обслуживание и посмотрите её глазами гостя

Пустые состояния — половина списка не случайно. Именно их забывают, и именно они встречают владельца в первый день, когда каталог ещё не заполнен.

Что нажать#

• Добавить товар в корзину с карточки и из списка — счётчик в шапке меняется, пометка «в корзине» появляется и переживает перезагрузку
• Изменить количество и удалить позицию в корзине
• Дробное количество: 30,8 м² — через запятую, без разделителя разрядов, поле ввода принимает
• Товар упаковками: переключить «упаковками / поштучно», набрать пачки, проверить подпись «6 пачек — это 8,4 м²»
• Собрать комплект из аксессуаров — сумма пересчитывается, кнопка добавляет все позиции
• Живой поиск: подсказки, разделы, бренды, товары
• Фильтры: ползунок цены, флажки, снятие чипсом, сброс, «Показать ещё»
• Избранное и сравнение: добавить, убрать, счётчики
• Оформление до конца: пересчёт при смене доставки, выбор отделения на карте, промокод, баллы, отправка заказа
• Вход, регистрация, восстановление пароля
• Формы с проверкой «я не робот»: отзыв, вопрос

Адаптив#

Ширины: 390, 430, 768, 992, 1200, 1440.

Критерий один и он проверяемый: страница не должна прокручиваться вбок. Ширина отдельного элемента ни о чём не говорит — вылезти может картинка, таблица, длинный артикул или блок глубоко внутри.

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

Отдельно на телефоне:

• Шапка в одну строку: меню, логотип, значки
• Каталог — выезжающей панелью, фильтры — кнопкой
• Сетка товаров в две колонки
• Липкая полоса покупки на карточке товара
• Вкладки прокручиваются вбок, и видно, что они прокручиваются
• Размер текста в полях ввода не меньше 16px при ширине до 480 — иначе Safari увеличивает страницу, когда покупатель ставит курсор в поле

Языки#

• Каждый язык витрины открывается
• Переключатель ведёт на ту же самую страницу, а не на главную
• В разметке не осталось ключей вида storefront.something
• Числа со склонением звучат по-человечески: 1 товар, 2 товара, 5 товаров, 21 товар, 22 товара
• Длинные украинские и немецкие подписи не рвут кнопки

Настройки темы#

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

Дополнения#

• Все точки встраивания стоят — их полный список на странице Точки для дополнений
• Поставьте хотя бы одно дополнение с витринной разметкой и убедитесь, что его блок появился и выглядит уместно

Напоследок#

• Консоль браузера чистая: нет 404 на файлы темы, нет ошибок скриптов
• Ни одного обращения к внешним адресам — вся статика своя
• Ни одного забытого {dump} или {dumpc}
• Заглянуть в журнал магазина: «Undefined array key» — это опечатка в имени настройки, «неизвестный обработчик значения» — опечатка в имени обработчика. Обе ошибки тихие, страница из-за них не падает
• Открыть витрину гостем в отдельном окне. То, что видит вошедший сотрудник, идёт мимо кэша, и его картина добрее настоящей

Последний пункт стоит последним не случайно: почти всё, что «работало у меня и сломалось у клиента», ловится именно им.