Создайте интерактивный каталог товаров

Производитель постельного белья готовит новый комплект. Покупатели спрашивают, подойдёт ли он для высокого матраса, чем отличаются цвета и что меняется между Queen и King. Одна фотография с ценой не отвечает ни на один из этих вопросов.

Интерактивный каталог полезен, когда до обращения или заявки человеку нужно изучить товар и выбрать вариант. Даже каталог с одним товаром оправдан, если показывает результат выбора: соответствующую фотографию, размеры и цену рядом с выбранной комплектацией.

Кратко

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

Начните с решений посетителя

Подготовьте варианты и сведения о них до запроса приложения. Отделяйте отображаемые цены от обещаний об оплате или наличии. Для первого черновика явно укажите учебные значения:

Создай интерактивный каталог условного комплекта льняного белья.
Предложи цвета Oat и Clay, размер Queen за $140 и King за $160.
Явно пометь фотографии и цены как учебные. Покажи размеры, пояснение
о кармане для матраса высотой 15 дюймов, состав и уход. Посетитель
выбирает цвет, размер и количество, затем добавляет выбор в учебную
корзину с суммой по позициям. Добавь явно обозначенные примеры отзывов
и фильтр отзывов только с фотографиями. Приложение нужно для изучения
товара: не добавляй оформление покупки и не заявляй актуальное наличие.

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

Попробуйте пример льняного белья

Страница комплекта Slowfield объединяет фотографии, выбор цвета и размера, количество, корзину и фильтры отзывов покупателей.

Сделайте два сравнения:

1. Переключитесь между Queen и King, измените количество и проверьте сумму на кнопке добавления. Добавьте вариант и откройте Bag, чтобы проверить содержимое.
2. Оставьте в отзывах только записи с фотографиями. Сравните информацию на них со студийными снимками выше.

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

Ответьте на вопрос, который остался у посетителя

После проверки черновика спросите, какое решение человеку так и не удалось принять. Превратите ответ в конкретную доработку:

Добавь рядом с выбором размера сравнение точного состава и размеров
комплектов Queen и King. Выбранный размер должен оставаться видимым,
пока сравнение открыто. Сохрани текущее содержимое корзины.

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