0% Complete
0/0 Steps
  1. Developers
    Работа с шопифай
    7 Topics
    |
    6 Quizzes
  2. Designers
    Shopify basics
    11 Topics
    |
    1 Quiz
  3. Введение по Liquid
    8 Topics
    |
    1 Quiz
  4. Liquid basics
    1 Quiz
Lesson 1, Topic 3
In Progress

Работа с Шопифай: Создание динамической секции

11.01.2022
Lesson Progress
0% Complete

Шаги создания динамической секции:

  1. Перейти в папку Section и нажать на «Добавление новой секции»

2. Создать файл Section_name.liquid с начальным кодом. Можно удалить CSS и JavaScript блоки

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

  • name – задается имя секции, которое отображается в Customizer.
  • class – задается дополнительный класс для секции.
  • tag – задается тег для секции.
  • settings – задаются настройки для секции, которые могут редактироваться через Customizer.
  • id – задается id для поля, которое используется для разметки в файле.
  • type – задается тип для поля. (text – текст, image_picker – прикрепить фото, color – цвет)
  • label – задается подпись для поля в Customizer.
  • default – задается значение по умолчанию для поля.
  • presets – задаются настройки для создания динамической секции.
  • category – задается категория для секции для отображения в Customizer.
  • block – задаются настройки для создания динамических блоков внутри секции.

4. Указанные поля в схеме, можно использовать в разметке секции. HTML разметка помещается над схемой. Для вывода применяются фигурные скобочки, в которых указывается {{ section.settings.name }}, где name – это элемент в схеме. К примеру, если в схему поместить изображение (image picker), то для его вывода в шаблоне надо будет написать

<img src="{{ section.settings.image-name | img_url: "master" }}">

Видео по теме: