# Как устроена витрина (https://docs.serviata.ru/ru/docs/storefronts/catalog) Услуги и группы, три панели редактора и то, как карточки раскладываются по странице. Витрина — это страница из карточек. Карточка называется **виджет**, и видов ровно два: * **Услуга** — то, что гость может заказать. У неё есть цена, фотография и собственная страница. * **Группа** — раздел, который содержит другие карточки. Гость нажимает на неё и попадает внутрь; у группы нет цены и заказать её нельзя. Это весь словарь. Маленькая витрина — это пять услуг и ни одной группы. Большая обычно состоит из нескольких групп — спа, рестораны, экскурсии, — в каждой свои услуги, чтобы первый экран у гостя оставался коротким. ## Три панели [#три-панели] ![Screenshot: storefronts/editor](https://docs.serviata.ru/screenshots/ru/storefronts/editor.png) 1. Переключатель устройства, «Предпросмотр», «Открыть как гость» и «Опубликовать» 2. Все карточки с той вложенностью, в какой их найдёт гость 3. Страница, по одному уровню за раз 4. Свойства — выбранная карточка или настройки витрины То, что вы видите по центру, — не приблизительный набросок, а сама страница, нарисованная ровно так же, как она нарисуется гостю. Выглядит хорошо здесь — значит, выглядит хорошо и у него. **Слева — что есть на витрине.** Сверху **Настройки витрины**: название, ссылка, валюта, изображения. Ниже **Виджеты**: все карточки с той же вложенностью, какую увидит гость. Это структурный вид — самый быстрый способ найти карточку, когда их пятьдесят. **По центру — страница.** Витрина в том виде, в каком её получает гость, по одному уровню за раз: сначала верхний, а содержимое группы — когда вы её откроете. Клик по карточке выбирает её точно так же, как клик в списке слева. **Справа — панель «Свойства».** Всё о выбранной карточке или настройки самой витрины, когда ничего не выбрано. Кнопка в углу убирает панель, чтобы страница стала шире; оставшаяся полоска возвращает её обратно. Над всеми тремя — переключатель **Телефон** / **Компьютер**: он перерисовывает центральную панель в нужной форме. Гости чаще приходят с телефона, поэтому редактор открывается на **Телефоне**, — но перед публикацией загляните и в **Компьютер**: страница, которая прекрасно читается в один столбец, в четырёх может оказаться пустоватой. ## Как добавить карточку [#как-добавить-карточку] Для добавления нового элемента используется кнопка **Добавить виджет**, расположенная над списком: она позволяет выбрать тип — **Услуга** или **Группа**. Новая карточка создаётся на текущем уровне иерархии, после чего автоматически открываются «Свойства» для заполнения наименования. Полная информация о карточке услуги — текстовое описание, цена, фотографии, бейджи — размещается на странице [карточка услуги](https://docs.serviata.ru/ru/docs/storefronts/catalog/services/). ## Как разложить страницу [#как-разложить-страницу] Перемещение карточек осуществляется двумя различными способами в зависимости от решаемой задачи. **1. Изменение структуры — левая панель.** В списке слева производится редактирование иерархии. Перетаскивание карточки за специальный маркер («ручку») позволяет изменить порядок следования; перемещение карточки на группу обеспечивает её вложение в данную группу. Группа, содержащая вложенные элементы, снабжена стрелкой для свёртывания и развёртывания и кнопкой **Вложить**, которая открывает содержимое группы в центральной панели для дальнейшей работы внутри неё. Для извлечения карточки из группы необходимо перетащить её на область **Перетащить на верхний уровень**, расположенную вверху. Недопустимые попытки перемещения блокируются с подсказкой «Сюда нельзя перетащить». **2. Настройка раскладки — центральная панель.** В центральной области страницы осуществляется изменение визуального расположения карточек. Перетаскивание за ручку позволяет изменить позицию элемента. Размер карточки не изменяется перетаскиванием — данный параметр задаётся в поле **Размер** панели «Свойства». Каждая карточка занимает целое число ячеек сетки в соответствии с заданным размером: | Размер | Форма | | --------- | ---------------------------------------------------------------------------------- | | **1 x 1** | Квадрат — значение по умолчанию и то, чем должно быть большинство услуг. | | **2 x 1** | Вдвое шире, чем выше, — баннер поперёк страницы. | | **1 x 2** | Высокая и узкая. | | **2 x 2** | Большой квадрат. Берите его редко — для того, что хотите продать в первую очередь. | Сетка — четыре колонки на компьютере и две на телефоне, поэтому карточка **2 x 1** занимает половину ряда на компьютере и всю ширину экрана телефона. Одно различие между панелями лучше узнать заранее, чем обнаружить внезапно: пока вы собираете витрину, карточки остаются там, где вы их поставили, вместе с пустотами. На странице гостя пустоты закрываются — карточки поджимаются кверху без дыр. Если вы оставили зазор специально, гость его не увидит. Группа, не содержащая элементов, отображает соответствующее информационное сообщение, что исключает её восприятие как некорректного состояния. ## Копирование и удаление карточек [#копирование-и-удаление-карточек] В верхней части панели «Свойства» размещена кнопка **Дублировать**, которая создаёт полную копию карточки со всеми заданными параметрами. Это наиболее быстрый способ создания новых услуг на основе существующих — например, четвёртой спа-процедуры из третьей. Кнопка **Удалить**, расположенная в нижней части панели «Свойства», перед выполнением операции запрашивает подтверждение. При удалении группы все вложенные элементы также удаляются — в диалоге подтверждения явно указывается название удаляемой карточки и содержится предупреждение о потере содержимого. Рекомендуется предварительно извлечь из группы те элементы, которые подлежат сохранению. ## Как проверить результат [#как-проверить-результат] * **Предпросмотр** в верхней панели открывает витрину в новой вкладке без элементов редактора. * **Открыть как гость** позволяет перейти к актуальной публичной версии страницы. Кнопка становится активной только после публикации; в неактивном состоянии отображается пояснение причины. ## Что дальше [#что-дальше] * [Карточка услуги](https://docs.serviata.ru/ru/docs/storefronts/catalog/services/) — все поля услуги и что каждое делает со страницей. * [Что спросить у гостя](https://docs.serviata.ru/ru/docs/storefronts/catalog/questions/) — дополнительные вопросы, которые прикладываются к заказу.