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

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

Сторінки: відкрити кожну#

• Головна
• Категорія: з товарами, другою сторінкою списку, застосованим фільтром
• Категорія без товарів — окреме повідомлення, а не порожнє місце
• Фільтр, який нічого не знайшов — теж окреме повідомлення
• Картка товару: з варіантами купівлі, з послугами, з аксесуарами, того, що продається упаковками
• Товар без фотографії — заглушка на місці, сітка не роз'їхалася
• Пошук: зі знахідками, без знахідок, з виправленим запитом
• Пошук з однієї літери — підказка «введіть хоча б два символи»
• Бренд, список брендів, мітка, список міток
• Інформаційна сторінка
• Обране і порівняння — заповнені та порожні
• Кошик — заповнений і порожній
• Оформлення: контакти, доставка, оплата, підтвердження
• «Замовлення прийнято» і помилка оформлення
• Оплата за посиланням і помилка оплати
• Кабінет: вхід, реєстрація, відновлення пароля, підтвердження пошти, підтвердження телефону, огляд, список замовлень, одне замовлення, профіль
• 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» — це одруківка в імені налаштування, «невідомий обробник значення» — одруківка в імені обробника. Обидві помилки тихі, сторінка через них не падає
• Відкрити вітрину гостем в окремому вікні. Те, що бачить співробітник, який увійшов, іде повз кеш, і його картина добріша за справжню

Останній пункт стоїть останнім не випадково: майже все, що «працювало в мене і зламалося в клієнта», ловиться саме ним.