Сервиата
ВитриныУслуги и разделы

Как устроена витрина

Услуги и группы, три панели редактора и то, как карточки раскладываются по странице.

Витрина — это страница из карточек. Карточка называется виджет, и видов ровно два:

  • Услуга — то, что гость может заказать. У неё есть цена, фотография и собственная страница.
  • Группа — раздел, который содержит другие карточки. Гость нажимает на неё и попадает внутрь; у группы нет цены и заказать её нельзя.

Это весь словарь. Маленькая витрина — это пять услуг и ни одной группы. Большая обычно состоит из нескольких групп — спа, рестораны, экскурсии, — в каждой свои услуги, чтобы первый экран у гостя оставался коротким.

Три панели

Как устроена витрина screenshot
  1. 1
  2. 2
  3. 3
  4. 4
  1. Переключатель устройства, «Предпросмотр», «Открыть как гость» и «Опубликовать»
  2. Все карточки с той вложенностью, в какой их найдёт гость
  3. Страница, по одному уровню за раз
  4. Свойства — выбранная карточка или настройки витрины

Центральная панель — и есть настоящая страница

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

Слева — что есть на витрине. Сверху Настройки витрины: название, ссылка, валюта, изображения. Ниже Виджеты: все карточки с той же вложенностью, какую увидит гость. Это структурный вид — самый быстрый способ найти карточку, когда их пятьдесят.

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

Справа — панель «Свойства». Всё о выбранной карточке или настройки самой витрины, когда ничего не выбрано. Кнопка в углу убирает панель, чтобы страница стала шире; оставшаяся полоска возвращает её обратно.

Над всеми тремя — переключатель Телефон / Компьютер: он перерисовывает центральную панель в нужной форме. Гости чаще приходят с телефона, поэтому редактор открывается на Телефоне, — но перед публикацией загляните и в Компьютер: страница, которая прекрасно читается в один столбец, в четырёх может оказаться пустоватой.

Как добавить карточку

Для добавления нового элемента используется кнопка Добавить виджет, расположенная над списком: она позволяет выбрать тип — Услуга или Группа. Новая карточка создаётся на текущем уровне иерархии, после чего автоматически открываются «Свойства» для заполнения наименования.

Полная информация о карточке услуги — текстовое описание, цена, фотографии, бейджи — размещается на странице карточка услуги.

Как разложить страницу

Перемещение карточек осуществляется двумя различными способами в зависимости от решаемой задачи.

1. Изменение структуры — левая панель. В списке слева производится редактирование иерархии. Перетаскивание карточки за специальный маркер («ручку») позволяет изменить порядок следования; перемещение карточки на группу обеспечивает её вложение в данную группу. Группа, содержащая вложенные элементы, снабжена стрелкой для свёртывания и развёртывания и кнопкой Вложить, которая открывает содержимое группы в центральной панели для дальнейшей работы внутри неё. Для извлечения карточки из группы необходимо перетащить её на область Перетащить на верхний уровень, расположенную вверху. Недопустимые попытки перемещения блокируются с подсказкой «Сюда нельзя перетащить».

2. Настройка раскладки — центральная панель. В центральной области страницы осуществляется изменение визуального расположения карточек. Перетаскивание за ручку позволяет изменить позицию элемента. Размер карточки не изменяется перетаскиванием — данный параметр задаётся в поле Размер панели «Свойства». Каждая карточка занимает целое число ячеек сетки в соответствии с заданным размером:

РазмерФорма
1 x 1Квадрат — значение по умолчанию и то, чем должно быть большинство услуг.
2 x 1Вдвое шире, чем выше, — баннер поперёк страницы.
1 x 2Высокая и узкая.
2 x 2Большой квадрат. Берите его редко — для того, что хотите продать в первую очередь.

Сетка — четыре колонки на компьютере и две на телефоне, поэтому карточка 2 x 1 занимает половину ряда на компьютере и всю ширину экрана телефона.

Одно различие между панелями лучше узнать заранее, чем обнаружить внезапно: пока вы собираете витрину, карточки остаются там, где вы их поставили, вместе с пустотами. На странице гостя пустоты закрываются — карточки поджимаются кверху без дыр. Если вы оставили зазор специально, гость его не увидит.

Группа, не содержащая элементов, отображает соответствующее информационное сообщение, что исключает её восприятие как некорректного состояния.

Копирование и удаление карточек

В верхней части панели «Свойства» размещена кнопка Дублировать, которая создаёт полную копию карточки со всеми заданными параметрами. Это наиболее быстрый способ создания новых услуг на основе существующих — например, четвёртой спа-процедуры из третьей.

Кнопка Удалить, расположенная в нижней части панели «Свойства», перед выполнением операции запрашивает подтверждение. При удалении группы все вложенные элементы также удаляются — в диалоге подтверждения явно указывается название удаляемой карточки и содержится предупреждение о потере содержимого. Рекомендуется предварительно извлечь из группы те элементы, которые подлежат сохранению.

Как проверить результат

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

Что дальше

На этой странице