View Categories

Карточки (табы + слайдер)

1 min read

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

На странице этот этаж может выглядеть так.

Настройки этажа #

Количество карточек (широкоформатный монитор). Значение от 1 до 4. Позволяет задать количество отображаемых карточек для широкоформатных мониторов (окно браузера шире 1200px).

Количество карточек (пк). Значение от 1 до 4. Позволяет задать количество отображаемых карточек для остальных мониторов ПК (ширина окна браузера от 1024px до 1200px).

Для мобильных телефонов и планшетов количество одновременно отображаемых карточек в слайдере будет неименно. Одна карточка для мобильного телефона и две для планшета.

АВН: Добавлять кнопку? — данная настройка отвечает за вывод дополнительной кнопки с переходом на витрину новых автомобилей.

Если для карточке используются настройки «Предзагруженные данные», то этаж будет пытаться вывести кнопку, ведущую на список автомобилей в наличии, отфильтрованный под конкретно необходимую модель.
Если вы не используете витрину или автомобиль этой модели не присутствует на вашей витрине, то кнопка выведена не будет.
Например, если нажать на кнопку, изображенную на снимке экрана, то пользователь попадет на список АВН, на котором сразу же будут отфильтрованы и выведены только BMW X4

АВН: Кнопка — Текст
АВН: Кнопка — На всю ширину?
АВН: Кнопка — Стиль
АВН: Кнопка — Вариант

Группа настроек, позволяющая настроить кнопку АВН. Для настройки текста можно использовать плейсхолдеры, по аналогии с тем, как это описано в статье. В данном примере поле «Текст» заполнено так: «В наличии (${cars.count})». Ширина, стиль и вариант регулируют визуальные составляющие кнопки АВН. Подробнее о настройках кнопок можно узнать в этой статье.

Табы #

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

Заголовок. Текстовое название для текущего таба.

Карточки #

Раздел, в котором добавляются новые карточки, меняется их последовательность, происходит их наполнение.

Предзагруженные данные — если вам предстоит выводить на этом этаже кнопку АВН (о ней говорилось выше), то необходимо для каждой карточки указать, с какой моделью она будет работать. Для этого выпадающем списке укажите бренд/модель/поколение и т.д.

Ссылка — указывает путь, на который будет вести клик по изображению и тексту на конкретной карточке. Можно указывать относительный или абсолютный путь (/all-models/bmw-x1/ или https://yoursite.ru/all-models/bmw-x1/)

Заголовок — текстовый заголовок карточки. Помещается сразу под изображением. Для него можно задать html-тег, текст, жирность текста.

Изображение — окно для загрузки изображения карточки. После загрузки изображения его можно обрезать, либо оставить оригинал. Тут же можно задать атрибуты Alt и Title для изображения, если это необходимо.

Видео — этаж позволяет в карточках использовать видео, вместо изображений. Обратите внимание, что изображение все-равно потребуется загрузить.

Тип видео — три варианта источника видео: вы можете загрузить его самостоятельно, указать ссылку на youtube и vimeo.

Пропорции видео — соотношения сторон для видео на карточке. Возможны варианты: 4:3, 16:9, 1:1.

Разметка schema.org — если активировать этот переключатель, позволяет задать настройки для добавления микроразметки загруженного видео.

Текст и Свойства (0-3) — необязательные поля. Вы можете добавить текст и до трех свойств на каждой карточке:

Кнопки (0-3) — необязательное поле. Позволяет добавить до 3 кнопок на каждой из карточек. Подробнее о настройках кнопок можно узнать в этой статье.