Как устроена витрина
Услуги и группы, три панели редактора и то, как карточки раскладываются по странице.
Витрина — это страница из карточек. Карточка называется виджет, и видов ровно два:
- Услуга — то, что гость может заказать. У неё есть цена, фотография и собственная страница.
- Группа — раздел, который содержит другие карточки. Гость нажимает на неё и попадает внутрь; у группы нет цены и заказать её нельзя.
Это весь словарь. Маленькая витрина — это пять услуг и ни одной группы. Большая обычно состоит из нескольких групп — спа, рестораны, экскурсии, — в каждой свои услуги, чтобы первый экран у гостя оставался коротким.
Три панели
- 1
- 2
- 3
- 4
- Переключатель устройства, «Предпросмотр», «Открыть как гость» и «Опубликовать»
- Все карточки с той вложенностью, в какой их найдёт гость
- Страница, по одному уровню за раз
- Свойства — выбранная карточка или настройки витрины
Центральная панель — и есть настоящая страница
То, что вы видите по центру, — не приблизительный набросок, а сама страница, нарисованная ровно так же, как она нарисуется гостю. Выглядит хорошо здесь — значит, выглядит хорошо и у него.
Слева — что есть на витрине. Сверху Настройки витрины: название, ссылка, валюта, изображения. Ниже Виджеты: все карточки с той же вложенностью, какую увидит гость. Это структурный вид — самый быстрый способ найти карточку, когда их пятьдесят.
По центру — страница. Витрина в том виде, в каком её получает гость, по одному уровню за раз: сначала верхний, а содержимое группы — когда вы её откроете. Клик по карточке выбирает её точно так же, как клик в списке слева.
Справа — панель «Свойства». Всё о выбранной карточке или настройки самой витрины, когда ничего не выбрано. Кнопка в углу убирает панель, чтобы страница стала шире; оставшаяся полоска возвращает её обратно.
Над всеми тремя — переключатель Телефон / Компьютер: он перерисовывает центральную панель в нужной форме. Гости чаще приходят с телефона, поэтому редактор открывается на Телефоне, — но перед публикацией загляните и в Компьютер: страница, которая прекрасно читается в один столбец, в четырёх может оказаться пустоватой.
Как добавить карточку
Для добавления нового элемента используется кнопка Добавить виджет, расположенная над списком: она позволяет выбрать тип — Услуга или Группа. Новая карточка создаётся на текущем уровне иерархии, после чего автоматически открываются «Свойства» для заполнения наименования.
Полная информация о карточке услуги — текстовое описание, цена, фотографии, бейджи — размещается на странице карточка услуги.
Как разложить страницу
Перемещение карточек осуществляется двумя различными способами в зависимости от решаемой задачи.
1. Изменение структуры — левая панель. В списке слева производится редактирование иерархии. Перетаскивание карточки за специальный маркер («ручку») позволяет изменить порядок следования; перемещение карточки на группу обеспечивает её вложение в данную группу. Группа, содержащая вложенные элементы, снабжена стрелкой для свёртывания и развёртывания и кнопкой Вложить, которая открывает содержимое группы в центральной панели для дальнейшей работы внутри неё. Для извлечения карточки из группы необходимо перетащить её на область Перетащить на верхний уровень, расположенную вверху. Недопустимые попытки перемещения блокируются с подсказкой «Сюда нельзя перетащить».
2. Настройка раскладки — центральная панель. В центральной области страницы осуществляется изменение визуального расположения карточек. Перетаскивание за ручку позволяет изменить позицию элемента. Размер карточки не изменяется перетаскиванием — данный параметр задаётся в поле Размер панели «Свойства». Каждая карточка занимает целое число ячеек сетки в соответствии с заданным размером:
| Размер | Форма |
|---|---|
| 1 x 1 | Квадрат — значение по умолчанию и то, чем должно быть большинство услуг. |
| 2 x 1 | Вдвое шире, чем выше, — баннер поперёк страницы. |
| 1 x 2 | Высокая и узкая. |
| 2 x 2 | Большой квадрат. Берите его редко — для того, что хотите продать в первую очередь. |
Сетка — четыре колонки на компьютере и две на телефоне, поэтому карточка 2 x 1 занимает половину ряда на компьютере и всю ширину экрана телефона.
Одно различие между панелями лучше узнать заранее, чем обнаружить внезапно: пока вы собираете витрину, карточки остаются там, где вы их поставили, вместе с пустотами. На странице гостя пустоты закрываются — карточки поджимаются кверху без дыр. Если вы оставили зазор специально, гость его не увидит.
Группа, не содержащая элементов, отображает соответствующее информационное сообщение, что исключает её восприятие как некорректного состояния.
Копирование и удаление карточек
В верхней части панели «Свойства» размещена кнопка Дублировать, которая создаёт полную копию карточки со всеми заданными параметрами. Это наиболее быстрый способ создания новых услуг на основе существующих — например, четвёртой спа-процедуры из третьей.
Кнопка Удалить, расположенная в нижней части панели «Свойства», перед выполнением операции запрашивает подтверждение. При удалении группы все вложенные элементы также удаляются — в диалоге подтверждения явно указывается название удаляемой карточки и содержится предупреждение о потере содержимого. Рекомендуется предварительно извлечь из группы те элементы, которые подлежат сохранению.
Как проверить результат
- Предпросмотр в верхней панели открывает витрину в новой вкладке без элементов редактора.
- Открыть как гость позволяет перейти к актуальной публичной версии страницы. Кнопка становится активной только после публикации; в неактивном состоянии отображается пояснение причины.
Что дальше
- Карточка услуги — все поля услуги и что каждое делает со страницей.
- Что спросить у гостя — дополнительные вопросы, которые прикладываются к заказу.