Инструкция по созданию виджета галереи

by Мантас Павельчикас| in Инструкции on 06.03.2023 12:58 1034 /

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

• Создание галереи
• Создание альбома
• Товарная галерея

Создание галереи

1. Зайдите в ваш личный кабинет (далее — ЛК), используя ваши доступы к Frisbuy.
2. Перейдите в раздел “Виджеты” в меню слева (на десктопе).
3. Нажмите на окно “Галерея”.

4. Вам откроется окно с редактором. На верхнем меню расположены кнопки:
   — «Встроить» открывает попап с описанием и кодом для установки виджета;
   — «Сохранить» используйте после внесения изменений в настройки виджета.
5. Ниже настройки отображения виджета:
   — «Виден всем»- виджет доступен всем пользователям;
   — «Только мне» — виджет отображается только в том браузере, в котором вы залогинены в ЛК Frisbuy
   — «Выключен» — виджет не отображается.

6. Настройки отображения предпросмотра:
   — переключатель окна между светлым и темным режимами;
   — переключение между отображением виджета на Телефоне/ПК.
7. Колонка с настройками виджета:
   — в первом поле можно ввести название галереи, которое отображается в ЛК;
   — второе поле — выбор альбома, который закрепляется за галереей (подробнее об альбомах — ниже).

8. Далее идут настройки отображения галереи. Три варианта формы элементов:
   — горизонтальная карусель;
   — вертикальная галерея с форматом 1-ой большой пост к 4-м обычным;
   — вертикальная галерея с обычными постами, есть выбор количества колонок (максимум — 10).
9. Подгрузка постов — доступные настройки зависят от выбора формы элементов в п.8
   a. горизонтальная карусель — выбор максимума постов, которые выводятся в галерее (по умолчанию — 14);
   б. вертикальная галерея (1к4 и обычная):
   — «Нет» — посты не подгружаются, кол-во выводимых постов указано в поле «максимум постов»;
   — «По кнопке» — под галереей будет кнопка, которой можно задать текст и отступ, по нажатию подгружает новые посты, если количество показанных постов меньше значения «максимум постов»;
   — «Автоматически» — новые посты подгружаются при достижении низа галереи, если количество показанных постов меньше значения «максимум постов».
10. Расстояние между элементами-постами в галерее.
11. Отступы от виджета с четырёх сторон.

12. Настройки заголовка в режиме «текст», введение текста заголовка галереи.
13. Выбор настроек текста заголовка.
14. Размер шрифта и отступ снизу, от галереи.

15. Если вы знакомы с языком гипертекстовой разметки — HTML, то можете внести свой заголовок с дополнительными элементами во вкладке «Html» настроек заголовка.

После всех внесённых изменений в конструкторе — не забудьте нажать на кнопку сохранения.

Чтобы установить код галереи на сайт — нажмите на “Встроить” и следуйте инструкциям. Можете также посмотреть нашу инструкцию по установке кода для популярных CMS — Инструкция: как установить галереи Frisbuy на разных сайтах? — Блог Frisbuy.ru

Создание альбома

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

Посмотреть все альбомы, создать новые или удалить их можно во вкладке “Альбомы”.

1. Зайти в раздел «Медиабиблиотека».
2. Нажать на кнопку «Альбомы».

3. Введите название для вашего альбома
4. Нажмите на «создать альбом»

5. В новом окне отображается список постов, если они были опубликованы в альбом.
6. Для новых альбомов предлагается кнопка «Добавить пост», чтобы загрузить контент с вашего устройства.

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

Товарная галерея

Виджет товарной галереи позволяет внедрить разметку постов товарами из XML-фида. Вы сможете размечать ваши карточки товаров, категории или коллекции. В виджете посты можно сортировать по определенному товару или другому заданному критерию. (Подробнее про разметку — Инструкция по работе с личным кабинетом Frisbuy!)

1. Создание виджета. Процесс не отличается от описанного выше — на этапе добавления виджета — нажать на “товарная галерея”

2. После настройки внешнего вида галереи, при нажатии на кнопку “Встроить”, откроется попап с инструкцией по настройке фильтрации со списком необходимых параметров. Доступные параметры:
   • &group=<groupId> — группа товаров — будет выводиться весь контент по всем товарам данной группы (на пример, все цвета данной помады);
   • &sku=<offer_id> — будет выводиться контент только по заданному SKU (на пример, только определённый цвет данной помады);
   • &category=<categoryId> будет выводиться контент по всем товарам категории.
3. Значения для параметров берутся из товарного фида (каталога товаров), который подключается в личный кабинет.

4. В скрипте-загрузчике нужно найти URL. Именно в конец этой части добавляются параметры группировки со значением из фида.

Примеры итоговой ссылки:

https://www.frisbuy.ru/fb/widget?embed_id=7c559c37-8150-11e9-ace6-0242ac130002&sku=82000105

На сайте — Тушь NARS Тушь CLIMAX – купить в Москве по цене 1949 рублей в интернет-магазине Л’Этуаль с доставкой (letu.ru)

https://www.frisbuy.ru/fb/widget?embed_id=b2be60d6-d6b1-11ec-a074-0242ac130002&group=KD0046S

На сайте — Куртка в рубашечном стиле с утеплителем Elis (арт. KD0046S , цвет Бежевый) — купить за 3 899 ₽ в интернет-магазине elis.ru

https://www.frisbuy.ru/fb/widget?embed_id=00c1240c-ecc6-11ec-a074-0242ac130002&category=657

На сайте —Диваны голубые купить в Москве от производителя по цене от 26 253 ₽ — заказать мебель в магазине Lazurit

5. Установите скрипт-загрузчик с добавленным параметром.

Если у вас возникают сложности с инструментами — пишите нам на почту support@frisbuy.ru