Возможности HTML-редактора

Пример добавления в корзину:

1<a
2  data-action="cart"
3  data-product-image="/img/9512942_1150.webp"
4  data-product-name="Чёрный свитшот"
5  data-product-price="15990"
6>
7  Добавить товар в корзину
8</a>

Пример открытия окна:

1<a data-action="modal" data-modal-id="form567">
2  Показать форму
3</a>

Пример срабатывания цели:

1<a data-action="none" data-goal="my_custom_goal" href="#anchor">
2  Перейти по якорю и выполнить цель my_custom_goal
3</a>

1.3 Открытие изображений во всплывающем окне

Вы можете открывать изображения в лайтбоксе всплывающих окон, для этого используйте атрибут [data-lightbox="IMAGE_URL"]. Указывайте атрибут alt для описания изображения.

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

Пример использования атрибутов:

1<div class="lightbox-container">
2  <img
3    alt="Изображение #1"
4    src="/img/2000018199_600.jpg"
5    data-lightbox="/img/2000018199_1920.jpg"
6  >
7  <img
8    alt="Изображение #2"
9    src="/img/2000018200_600.jpg"
10    data-lightbox="/img/2000018200_1920.jpg"
11  >
12</div>

1.4 LazyLoading изображений

Вы можете сделать Lazy Loading загрузку изображений.

Изображение начнет загружаться только при появлении на экране.

Используйте атрибуты:

[data-lazy-bg="IMAGE_URL"] — в элемент будет вставлен inline-стиль background-image при появлении изображения на экране

1<div data-lazy-bg="/img/2000018199_%optimalWidth%.jpg"></div>

[data-lazy-src="IMAGE_URL"] — в элемент будет вставлен src-атрибут при появлении изображения на экране

1<img width="100%" data-lazy-src="/img/2000018199_%optimalWidth%.jpg">

[data-inline-bg="IMAGE_URL"] — в элемент будет вставлен inline-стиль background-image при загрузке страницы

1<div data-inline-bg="/img/2000018199_%optimalWidth%.jpg"></div>

[data-inline-src="IMAGE_URL"] — в элемент будет вставлен src-атрибут при загрузке страницы

1<img width="100%" data-lazy-src="/img/2000018199_%optimalWidth%.jpg">

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

Подробнее о формате путей до изображений в разделе Вкладка Файлы

Для корректной работы LazyLoading у изображения должна быть явно указана ширина и высота в CSS-стилях.

2. CSS / LESS

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

2.1 Область видимости

Область видимости стилей ограничивается селектором :scope или :host. Однако если вы не укажете этот селектор, то весь код будет обернут в него автоматически. Таким образом, оба примера ниже полностью идентичны:

1:scope {
2  color: red;
3 
4  &:hover {
5    color: blue;
6  }
7}

1color: red;
2 
3&:hover {
4  color: blue;
5}

Селектор :scope применяется к контентной части элемента. Если вам потребуется задать стиль основного контейнера элемента, то используйте селектор :host.

1:host {
2  z-index: 2147483647;
3}

Использование :root позволит вам выйти за пределы текущего элемента и применить стили ко всей странице, например:

1:scope {
2  /* Стили текущего элемента */
3}
4 
5:root {
6  /* Стили всей страницы */
7}

2.2 Адаптив

Вы можете переопределить стили для мобильных, перейдя в режим редактирования мобильной версии в верхнем правом углу редактора HTML. Также вы можете опираться на классы .adaptive-desktop и .adaptive-mobile, применяемые к body.

Классы, применяемые к body:

Пример работы с классами:

1// В браузере Chrome на iPhone элемент красного цвета
2body.adaptive-mobile.is-ios.is-chrome {
3  :scope {
4    background: red;
5  }
6}

2.3 CSS-переменные

Вы можете использовать системные CSS-переменные в ваших стилях. Список доступных переменных:

3. JS / TSX

Используйте вкладку JS / TSX для написания собственной логики.

Убедитесь, что:

• ️ jQuery уже загружена.
• ️ Код исполняется после события DOMContentLoaded.
• ️ Вы можете использовать верхнеуровневый await и ESM синтаксис.
• ️ Для доступа к свойствам текущего HTML-элемента используется объект elementApi.

3.1 Загрузка зависимостей (ES Module Import)

Вы можете использовать ES Module Import синтаксис для подключения необходимых зависимостей в ESM-формате:

1import three from "https://esm.sh/three.js";
2 
3console.log('THREE.js loaded', three);

Рекомендуем использовать сеть доставки контента esm.sh.

Так же вы можете подгружать любые CSS и JS-файлы (в формате CJS) используя метод require. Использование этого метода работает аналогично вставке JS/CSS кода во вкладке HTML через теги script / link

Метод принимает два аргумента:

urls: string | string[] — п у ть или список путей для загрузки (CSS или JS файлы)

callback: () => void — ф ункция, которая будет выполнена по окончанию загрузки

Метод возвращает Promise

Пример:

1function main() {
2  console.log('THREE.js loaded', THREE);
3}
4 
5require(
6  ['https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'],
7  main
8);

3.2 JS Api

Появление элемента / секции на экране

Вам доступен объект elementApi для доступа к свойствам текущего HTML-элемента.

Также доступен объект родителя, sectionApi или modalApi — в зависимости от того где находится элемент.

Доступные поля этих объектов:

Пример использования API:

В этом примере мы откроем окно с якорем #my_fancy_modal, как только пользователь доскролит до текущего HTML элемента и тот станет видимым на экране.

1function triggerOnScreen() {
2  if (!flexbe_cli.is_admin) {
3    flexbe_cli.events.trigger('ui_modal_open', {
4      id: 'my_fancy_modal'
5    });
6  }
7}
8 
9// Если элемент уже на экране при загрузке страницы
10if (elementApi.inScreen) {
11  triggerOnScreen();
12}
13 
14// Подписываемся на событие появления на экране
15elementApi.on('screen', ({ state, first }) => {
16  if (state && first) {
17    triggerOnScreen();
18  }
19});

Доступные события внутри элемента/секции:

Пример подписки на события:

1elementApi.on('screen', ({ state, first }) => {
2  console.log('Элемент появился или исчез с экрана', { state, first });
3});
4 
5sectionApi.on('resize', () => {
6  console.log('У секции изменилась ширина или высота');
7});

3.3 Программное открытие / закрытие Окон или Корзины

1// Для открытия окна modal96352 (можно использовать якорь)
2flexbe_cli.events.trigger('ui_modal_open', {
3  id: 'modal96352'
4});
5 
6// Для закрытия окна (открытого или конкретного)
7flexbe_cli.events.trigger('ui_modal_close');
8 
9flexbe_cli.events.trigger('ui_modal_close', {
10  id: 'modal96352'
11});
12 
13// Для открытия корзины
14flexbe_cli.events.trigger('ui_cart_open');
15 
16// Для закрытия корзины
17flexbe_cli.events.trigger('ui_cart_close');

Открытие/закрытие окна или корзины порождает событие, на которое также можно подписаться

1// Открылось окно
2flexbe_cli.events.on('modal_opened', (payload) => {
3  console.log('Открылось окно ', payload.id);
4});
5 
6// Закрылось окно
7flexbe_cli.events.on('modal_closed', (payload) => {
8  console.log('Закрылось окно ', payload.id);
9});
10 
11// Открылась корзина
12flexbe_cli.events.on('cart_opened', () => {
13  console.log('Открылась корзина');
14});
15 
16// Закрылась корзина
17flexbe_cli.events.on('cart_closed', () => {
18  console.log('Закрылась корзина');
19});

4. Вкладка Файлы

Используйте эту вкладку для загрузки файлов, на которые вы планируете ссылаться из кода.

Учитывайте, что:

• Файлы не удаляются после удаления HTML-секции.
• Все файлы доступны на любых страницах проекта.
• Вес одного файла не должен превышать 15 МБ.

Опция Включить оптимизацию изображений влияет на отображение путей в списке. Если опция включена, то будут сформированы ссылки на изображения в оптимизированном формате в зависимости от настроек проекта в разделе Настройки → Оптимизация скорости

Вы можете сами сформировать путь до изображения.

Поддерживаемые форматы путей:

1/img/{id}_{size}_q{quality}.{extension}
2/img/{id}_{size}.{extension}
3/img/{id}.{extension}

Например:

/img/19790179_1280_q65.webp — HD изображение в формате webp с качеством 65 (1280x1021px, 250Kb)

/img/19790179_1920.jpg — FullHD изображение в формате jpg (1920x1532px, 460Kb)

/img/19790179.jpg — Оригинальное изображение (3024x2413px, 1558Kb)

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