Руководство для начинающих по блокам и виджетам Magento

Блоки и виджеты являются ключевыми функциями макета в Magento. Эти две функции очень тесно связаны и часто используются вместе.

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

Однако блоки размещаются с помощью виджетов. Сначала вы создаете блок, а затем используете виджет, чтобы решить, где этот блок будет отображаться.

Давайте рассмотрим несколько примеров и покажем, как блоки и виджеты работают в Magento.

Это руководство взято из книги «Объяснение Magento 2», самой продаваемой книги для Magento 2. В этой книге мы используем пример магазина под названием «Оранжвилль», поэтому вы увидите ссылку на него здесь.

Объяснение создания блоков Magento

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

• Перейдите в «Контент», а затем в «Блоки».
• Нажмите «Добавить новый блок» в правом верхнем углу.

• Введите «Ключевые ссылки» в качестве «Заголовка блока». Это то, что посетители увидят на экране.
• Введите «key_links» в качестве идентификатора. Эта строка используется Magento для идентификации блока, но посетители никогда ее не увидят.

• Щелкните значок маркера на панели инструментов редактора:

• Введите «Об Оранжвилле» в качестве маркированного списка:
• Выберите текст «Об Orangeville» и щелкните значок ссылки.

• Теперь вы увидите всплывающее окно. Введите URL-адрес вашей страницы «Об Orangeville». Если вы не уверены, что это такое, вы можете открыть свой сайт Magento в новой вкладке браузера и найти URL-адрес, который, скорее всего, будет example.com/about-orangeville/.
• Нажмите «Вставить».
• Теперь у вас есть ссылка «Об Orangeville» внутри вашего блока:

• Нажмите «Сохранить блок».

Объяснение создания виджетов Magento

Теперь перед нами стоит задача разместить ваш блок в дизайне вашего сайта. Вот где пригодятся виджеты Magento. В Magento блок — это просто часть контента. Это виджет, который управляет размещением блока.

Однако это не все, на что способен виджет. Виджет может размещать наши простые новые блоки, а также многие другие функции.

• Перейдите в «Содержание», а затем в «Виджеты».
• Нажмите «Добавить виджет».
• В поле «Тип» выберите «Статический блок CMS».
• Для «Design Theme» выберите «Magento Luma».
• Нажмите «Продолжить».

• Введите «Ключевые ссылки Orangeville» в поле «Название виджета».
• В разделе «Назначить представления магазина» выберите «Все представления магазина».

Далее мы собираемся контролировать, на каких URL-адресах появляется этот блок.

• Нажмите «Добавить обновление макета».

• Выберите «Все страницы».

• Выберите «Ссылки нижнего колонтитула CMS» для параметра «Контейнер».

Оба этих варианта, «Все страницы» и «Ссылки нижнего колонтитула CMS», могут пока не иметь для вас особого смысла. Тем не менее, мы закончим создание виджета, а позже в главе, в разделе «Объяснение размещения виджета Magento», мы подробнее объясним, почему мы сделали такой выбор.

В разделе «Обновления макета» мы собираемся сделать второй выбор места для размещения нашего виджета.

• Выберите «Все типы продуктов».
• Снова выберите «Ссылки нижнего колонтитула CMS».
• После добавления обеих этих опций ваш экран будет выглядеть как на изображении ниже.

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

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

• Нажмите «Параметры виджета» на боковой панели.
• Нажмите «Выбрать блок».

• Теперь вы можете выбрать созданный ранее блок «Ключевые ссылки»:

• Нажмите «Сохранить».
• Посетите переднюю часть своего сайта, и вы увидите, что ваша ссылка теперь опубликована в нижнем колонтитуле. Вы создали блок с контентом и опубликовали его внутри виджета.

Создание блоков и виджетов вместе

Определенно есть несколько сложных шагов при создании блоков и виджетов. Итак, давайте попробуем весь этот процесс вместе. Мы создадим второй блок и разместим его на нашем сайте с помощью виджета. Этот блок расскажет людям, что у нас есть 100% гарантия удовлетворения.

• Перейдите в «Контент», а затем в «Блоки».
• Нажмите «Добавить новый блок».
• Название: Удовлетворение гарантировано
• Идентификатор: гарантия

• Введите текст для вашего блока. Я написал: «Здесь, в Orangeville, ваше удовлетворение является нашим главным приоритетом. Если вы недовольны, мы вернем вам деньги».

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

• Поместите курсор в область основного содержимого под текстом, который вы только что написали.
• Щелкните значок дерева на панели инструментов редактора.
• Когда вы увидите всплывающее окно, щелкните значок маленькой коробки.
• Найдите изображение, которое вы можете загрузить. Я выбрал значок 100%.

• Нажмите «Вставить файл».
• Описание изображения: Гарантия удовлетворения
• Нажмите «Вставить».

• Теперь у вас есть блок, который содержит как текст, так и ваше новое изображение.
• Нажмите «Сохранить блок», чтобы завершить создание этого блока.

Далее создадим виджет, который будет отображать этот Блок на нашем сайте.

• Перейдите в «Содержание», а затем в «Виджеты».
• Нажмите «Добавить виджет».
• Тип: Статический блок CMS
• Тема дизайна: Magento Luma

• Название виджета: Удовлетворение гарантировано
• Назначить представлениям магазина: все представления магазина

• Обновление макета: якорные категории
• Контейнер: Основная боковая панель
• Нажмите «Параметры виджета» и выберите блок «Гарантия качества», который вы только что создали.

• Нажмите «Сохранить».
• Посетите переднюю часть вашего сайта. Нажмите на одну из ссылок категории в верхнем меню. На изображении ниже я нажал на «Фрукты». Теперь вы увидите свой гарантийный блок на левой боковой панели:

Объяснение размещения виджета Magento

Один из частых вопросов, который я получаю от изучающих Magento, касается размещения виджетов.

Откуда вы знаете, что выбрать «Ссылки нижнего колонтитула CMS» или «Основную боковую панель» для контейнера? В конце концов, есть 22 разных варианта, как вы можете видеть на изображении ниже.

В чем разница между «После верхнего колонтитула страницы» и «После верхнего колонтитула страницы»? В чем разница между «нижним колонтитулом страницы» и «контейнером нижнего колонтитула страницы»? Эти имена настолько похожи, что могут сбить с толку.

К сожалению, нет точного способа сказать заранее, хотя название даст вам хорошее представление о месте размещения:

• После заголовка страницы: это, вероятно, будет в главном меню.
• Основное содержимое внизу: это, вероятно, внизу в центральной части экрана, под нашими продуктами или содержимым страницы.
• Верх страницы: это будет отображаться вверху на страницах, но не на экранах продуктов.

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

С другой стороны, этот список иногда может быть намного короче. В следующей части этой главы мы увидим, что некоторые виджеты поставляются только с тремя вариантами контейнеров.

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

Обзор блоков и виджетов Magento

Блоки и виджеты позволяют добавлять новые элементы в дизайн вашего сайта. Однако на вашем сайте есть некоторые элементы, которые нельзя легко изменить или заменить из административного интерфейса Magento. Похоже, что они должны быть блоками и виджетами, но Magento не создал их такими. Итак, я создал страницу с инструкциями по обновлению некоторых из этих элементов по умолчанию.

Если вы готовы узнать больше о Magento, ознакомьтесь с «Объяснением Magento 2», самой продаваемой книгой по Magento 2.

У нас также есть еще несколько отличных онлайн-руководств по Magento, в том числе:

• Руководство для начинающих по пониманию налогов Magento
• Базовые, маленькие, эскизы и образцы изображений в Magento
• Узнайте, что такое индексы Magento 2 и как ими управлять