Ответ гарантирован в течение 36 часов

Позвонить

Ответ гарантирован круглосуточно

Виджет с блоками

В данном уроке мы создадим виджет с блоками (blockListWidgetType), который будет содержать несколько блоков, внутри которых будут картинка и ссылка, и несколько настроек виджета. В данном виджете мы будем использовать шаблон привязанных блоков - system-banner-7. Поля: Картинка (Файл - image), Ссылка (Универсальная ссылка - link)

Шаг 1 (создание виджета)

Создаем виджет в панели администратора:

Переходим в панель администратора Вашего сайта -> Настройки -> Настройки сайта -> Виджеты. Нажимаем кнопку "Создать".
В адресной строке должно быть - Имя_Вашего_Магазина.myinsales.ru/admin2/widget_types/new
Выбираем тему в которой будем использовать виджет. Вводим название: banner_test_block, описание: banner_descr_block.
Выбираем категорию - баннеры, тип - Виджет с блоком. Артикул: BBT1.2, Идентификатор: BB102, Типы страниц - все. Типы списков виджетов - основной контент. Шаблон блока - Универсальная ссылка + Картинка
Нажимаем сохранить и переходим в раздел дизайн и выбираем указанную тему, нажимаем "редактировать шаблон". В левой панели редактора выбираем "Контент". Нажимаем кнопку "Добавить виджет". Выбираем группу "баннеры" и выбираем виджет с артикулом BBT1.2.
В левой панели редактора нажимаем кнопку "редактировать код"
Добавляем код из примеров ниже.

Шаг 2. HTML (snippet.liquid)

Редактируем snippet.liquid.

Пример кода:

<div class="banner-list grid-list">
  {% for slide in data.blocks %}
  {% if slide.link != "" %}
  <a href="{{ slide.link }}" class="banner-list__item">
    {% else %}
    <div class="banner-list__item">
      {% endif %}
      <div class="img-ratio img-fit banner-list__item-photo">
        <div class="img-ratio__inner">
          {% assign image_title = slide.name | escape %}
          {% if slide.image %}
              {% assign img_width = 686 %}
              <picture>
                <img data-src="{{ slide.image | image_url: img_width, resizing_type: 'fill-down', quality:100 }}" class="lazyload" alt="{{ image_title }}">
              </picture>
            {% endif %}
        </div>
      </div>
      {% if slide.link != "" %}
  </a>
  {% else %}</div>{% endif %}
  {% endfor %}
</div>
{% assign image_title = null %}

{% for slide in data.blocks %} - цикл для перебора блоков slide.
{% if slide.link != "" %} - проверка передачи пустого строкового значения в ссылке блока slide.
{{ slide.link }} - внутри атрибута href мы указываем поле link блока slide. В редакторе будет отображаться пустое поле для ссылки.
{% if slide.image %} - проверка передачи пустого значения в поле с изображением блока slide.
data-src="{{ slide.image }} - поле image блока slide. В редакторе будет отображаться поле с загрузкой изображения.

Шаг 3. Настройки блоков JSON (setup.json)

В файле setup мы прописываем блоки с параметрами image и link, в примере ниже 6 блоков с пустыми ссылками и одинаковыми изображениями.

Пример:

{
  "blocks": [{
      "image": "23802459",
      "link": "#"
    },
    {
      "image": "23802459",
      "link": "#"
    },
    {
      "image": "23802459",
      "link": "#"
    },
    {
      "image": "23802459",
      "link": "#"
    },
    {
      "image": "23802459",
      "link": "#"
    },
    {
      "image": "23802459",
      "link": "#"
    }
  ]
}

Шаг 4. Форма настроек JSON (settings_form.json)

Редактируем settings_form.json.

Пример кода:

{
  "{{ messages.banner }}":[
    {
      "group_name":"{{ messages.indentation }}",
      "items": [
        {
          "class":"range",
          "name":"grid-list-row-gap",
          "min":0,
          "max":10,
          "step":0.5,
          "unit":"rem",
          "label":"{{ messages.vertical_padding_between_blocks }}",
          "type":"number",
          "with_btns": true
        },
        {
          "class":"range",
          "name":"grid-list-column-gap",
          "min":0,
          "max":10,
          "step":0.5,
          "unit":"rem",
          "label":"{{ messages.horizontal_padding_between_blocks }}",
          "type":"number",
          "with_btns": true
        }
      ]
    }
  ],
  "{{ messages.label_widget }}": [
    {
      "group_name":"{{ messages.background }}",
      "items": [
        {
          "name":"bg",
          "label":"{{ messages.widget_background_color }}",
          "value":"",
          "type":"color",
          "clearable": true
        }
      ]
    },
    {
      "group_name":"{{ messages.adaptive }}",
      "items": [
        {
          "class": "checkbox",
          "name": "hide-desktop",
          "label": "{{ messages.hide_desktop }}",
          "value": null,
          "type": "checkbox"
        }
      ]
    }
  ]
}

{{ messages.content }} - является заголовком группы - "Контент".
"banner-img" - типа файл, предлагает загрузить пользователю картинку в редакторе.
"general": true - основная настройка.
"general_position": 1 - порядок в списке основных настроек.
"name": "font-size" - размер текста.
"name": "hide-title" - скрыть заголовок в редакторе.

Шаг 5. Переводы сообщений для формы (messages.json)

В файле messages мы прописываем перевод ключа hide_desktop из settings_form.json на 4 языках. Более подробно можно почитать здесь.

Пример:

{
  "ru": {
    "hide_desktop": "Скрыть на десктопе"
  },
  "ua": {
    "hide_desktop": "Сховати на робочому столі"
  },
  "en": {
    "hide_desktop": "Hide on Desktop"
  },
  "es": {
    "hide_desktop": "Para Mostrar u ocultar favoritos, vaya a la configuración de la plantilla y Active favoritos"
  }
}

Шаг 6 Настройки по умолчанию JSON (settings_data.json)

Редактируем settings_data.json.
Пример:

{
  "hide-desktop": false,
  "grid-list-row-gap": 2,
  "grid-list-column-gap": 2,
  "bg": "#ddd9d6"
}

hide-desktop - скрыть на детскопе, по умолчанию false, что означает что мы не скрываем на детскопе виджет.
grid-list-row-gap - отступ по вертикали, в 2 rem.
grid-list-column-gap - отступ по горизонтали, в 2 rem.
bg - цвет фона по умолчанию "#ffda33"

Шаг 7 (info.json)

Панель администратора -> настройки -> Настройки сайта -> Виджеты, выбираем виджет с артикулом BBT1.1 и нажимаем на иконку карандаша. Подключаем зависимости: jquery, my-layout, vanilla-lazyload.

Шаг 8. JS (snippet.js)

Редактируем snippet.js.
Пример:

$widget.each(function(index, el) {
  new LazyLoad({
    container: $(el).get(0),
    elements_selector: '.lazyload'
  });
});

В данном примере реализуем ленивую загрузку изображений с помощью плагина LazyLoad | Github

Шаг 9. SCSS (snippet.scss)

Пропишем стили виджета и не забудем прописать стили для разных значений настроек. Интегрируем миксин @include background-color(--bg) и посмотрим как он работает на практике:

@include background-color(--bg);

&[style*="--img-fit:contain"] {
  .banner-list__item .img-ratio img {
    object-fit: contain;
  }
}

.banner-list {
  grid-template-columns: repeat(2, 1fr);
}

.banner-list__item {
  grid-column: auto /span 1;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .banner-list__item {
    grid-column: auto /span 2;
    text-decoration: none;
  }
}

.banner-list__item {
  .img-ratio img {
    transition: all .5s;
  }
}

.banner-list__item-photo {
  position: relative;
  z-index: 1;
}

Оставить оценку

Оцените статью

Перед публикацией все оценки проходят модерацию

Оценки: 0

Еще нет своего магазина?
Создайте интернет-магазин на платформе inSales
Всё для продаж уже внутри!

Недавно просмотренные статьи

Остались вопросы?

Отправьте обращение в техподдержку!

Создать обращение

С 01 ноября по 31 декабря: скидки до 50 % в течение 7 дней после регистрации!

Скидки до 50 % в течение 7 дней после регистрации

Согреем вас подарками этой осенью!

Согреем вас подарками этой осенью!

Документация

Оставить оценку

Оценки: 0

Еще нет своего магазина?
Создайте интернет-магазин на платформе inSales
Всё для продаж уже внутри!

С 01 ноября по 31 декабря: скидки до 50 % в течение 7 дней после регистрации!

Скидки до 50 % в течение 7 дней после регистрации

Согреем вас подарками этой осенью!

Согреем вас подарками этой осенью!

Документация

Виджет с блоками

Шаг 1 (создание виджета)

Шаг 2. HTML (snippet.liquid)

Шаг 3. Настройки блоков JSON (setup.json)

Шаг 4. Форма настроек JSON (settings_form.json)

Шаг 5. Переводы сообщений для формы (messages.json)

Шаг 6 Настройки по умолчанию JSON (settings_data.json)

Шаг 7 (info.json)

Шаг 8. JS (snippet.js)

Шаг 9. SCSS (snippet.scss)

Оставить оценку

Оценки: 0

Еще нет своего магазина?Создайте интернет-магазин на платформе inSalesВсё для продаж уже внутри!

Еще нет своего магазина?
Создайте интернет-магазин на платформе inSales
Всё для продаж уже внутри!