Как создать собственные виджеты Magento 2

Виджеты позволяют администраторам магазина Magento 2 добавлять статический/динамический контент на страницы и блоки CMS, обеспечивая множество функциональных возможностей и простую реализацию. Виджеты — это повторно используемые компоненты, которые можно добавить в любой блок CMS Magento 2.

Следовательно, они позволяют разработчикам Magento 2 и администраторам магазинов добавлять интерактивные интерфейсы и функции во внешний интерфейс без особых знаний о программировании. Конечно, им все еще нужно знать, как работать с Magento, чтобы создать виджет.

Цель этой статьи — продемонстрировать, как создавать виджеты в Magento 2, уделяя особое внимание пользовательским виджетам.

Magento 2 виджеты

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

Но с технической точки зрения… Что такое виджет Magento?

Виджет Magento 2, по сути, является расширением Magento, разработанным с набором расширенных параметров конфигурации. Из-за большей гибкости и контроля они используются для предоставления информации и маркетингового контента через панель администратора Magento. Одним из преимуществ виджетов Magento 2 является то, что вы можете «вызывать» их из любой точки сайта.

Виджеты также позволяют администраторам добавлять интерактивные интерфейсы и функции во внешний интерфейс Magento без необходимости кодирования (на самом деле, даже не зная, как кодировать).

Magento 2 предлагает несколько типов виджетов

Прежде чем мы перейдем к реализации, давайте подробнее рассмотрим стандартный набор виджетов, поддерживаемых в Magento 2:

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

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

• Добавляйте динамические/информационные блоки в боковые панели
• Добавляйте баннеры на страницы CMS
• Добавить пользовательские меню
• Добавьте интерактивные пользовательские интерфейсы

Случай с пользовательскими виджетами Magento 2

Любой веб-сайт или веб-страница нуждается в большом количестве функций для бесперебойной работы и привлечения большего количества посетителей, а создание привлекательного пользовательского интерфейса является обязательным условием в электронной коммерции. Вот где в игру вступают пользовательские виджеты Magento 2, и это то, что они должны делать.

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

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

Однако, прежде чем мы перейдем к пользовательским виджетам, нам нужно изучить стандартный вариант использования виджетов в Magento 2. Давайте рассмотрим что-то основное и широко используемое, например:

Как добавить новый список продуктов на главную страницу с помощью виджета

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

Чтобы добавить список продуктов Magento на домашнюю страницу, вам просто нужно выполнить простой процесс:

• Войдите на страницу администрирования Magento 2 и перейдите в раздел «Контент» > «Виджет».

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

• Мы можем видеть скриншот ниже, на котором мы уже выбрали список новых продуктов каталога , который мы будем отображать во внешнем интерфейсе.

• Мы выбрали LUMA в качестве темы дизайна.

• После выбора обоих значений мы должны перейти ко второму шагу, где мы должны заполнить свойства витрины. Теперь нам нужно установить заголовок виджета и свойства витрины , такие как заголовок виджета и вид магазина . Мы используем Toptal New Product List и All Store Views .

• Самая важная часть — это раздел « Обновления макета », в котором будет указано, где появится этот виджет (например, домашняя страница, страница со списком, страница оформления заказа и т. д.). Также можно определить область, в которой будет отображаться контейнер, например, под заголовком, над нижним колонтитулом, нижним колонтитулом и т. д.

В настройках обновлений макета доступны следующие параметры:

• Отображать: указанная страница или все страницы.
• Страница: Домашняя страница CMS
• Контейнер: Область основного содержимого
• Шаблон: здесь вы можете выбрать, в каком стиле вы хотите отображать новые продукты: режим сетки или режим списка.

Выбрав параметр « Указанная страница », мы можем приступить к установке свойств, позволяющих отображать виджет на определенной странице. Здесь у нас есть раскрывающийся список Page , который позволяет нам выбрать домашнюю страницу CMS . Далее нам нужно выбрать контейнер и шаблон, которые мы собираемся использовать для отображения виджета в определенном разделе.

Наконец, мы переходим к последней вкладке, которая включает в себя параметры виджета. Здесь мы можем установить Condition , например, какой тип продуктов будет отображаться, или включить ограничения на количество продуктов и так далее.

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

В разделе «Количество продуктов для отображения » мы можем определить, сколько продуктов может отображаться в разделе « Новые продукты ». Кроме того, при необходимости мы можем изменить параметры Cache Lifetime .

Теперь нам нужно сохранить этот виджет и очистить кеш Magento 2. Это можно сделать из админки или командной строки. Мы можем использовать следующую команду для очистки кеша:

php bin/magento cache:clean and php bin/magento cache:flush

Тогда мы сможем увидеть новые продукты на главной странице.

Как создать собственный виджет в Magento 2

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

Начнем с основ. Мы все знаем, как создать модуль, верно? На тот случай, если вы не знакомы с созданием пользовательских модулей в Magento 2, у нас есть отличное руководство, в котором подробно рассматривается этот процесс.

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

Во-первых, нам нужно создать новый модуль, для которого потребуются пространство имен и папки модуля. В этом примере мы собираемся использовать Toptal для пространства имен и CustomWidget для имени модуля. Итак, начнем, как обычно, с composer.json , Registration.php и etc/module.xml registration.php

app/code/Toptal/CustomWidget/composer.json

Этот файл будет загружаться Composer каждый раз, когда мы его запускаем, хотя на самом деле мы не используем Composer с нашим модулем.

Теперь нам нужно зарегистрировать наш модуль в Magento, поэтому нам необходимо создать файл register.php в следующем месте: app/code/Toptal/CustomWidget/registration.php .

 <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Toptal_CustomWidget', __DIR__ );

Теперь мы создадим последний регистрационный файл, module.xml .

app/code/Toptal/CustomWidget/etc/module.xml

 <?xml version="1.0" ?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Toptal_CustomWidget" setup_version="1.0.0"/> </config>

После завершения шага регистрации мы создаем файл конфигурации widget.xml .

app/code/Toptal/CustomWidget/etc/widget.xml

 <?xml version="1.0" ?> <widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd"> <widget class="Toptal\CustomWidget\Block\Widget\Samplewidget"> <label>Toptal Sample Widget</label> <description></description> <parameters> <parameter name="widgettitle" sort_order="10" visible="true" xsi:type="text"> <label>Title</label> </parameter> <parameter name="widgetcontent" sort_order="20" visible="true" xsi:type="textarea"> <label>Content</label> </parameter> </parameters> </widget> </widgets>

В приведенном выше коде мы получаем Title и Content в качестве параметров, которые будут отображаться везде, где вызывается виджет. Тег <widget> содержит класс блока Toptal\CustomWidget\Block\Widget\Samplewidget . Этот класс замедляется внутри Block/Widget/Samplewidget.php . Класс указывает нашим виджетам, какой шаблон использовать.

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

app/code/Toptal/CustomWidget/Block/Widget/Samplewidget.php

 <?php namespace Toptal\CustomWidget\Block\Widget; use Magento\Framework\View\Element\Template; use Magento\Widget\Block\BlockInterface; class Samplewidget extends Template implements BlockInterface { protected $_template = "widget/samplewidget.phtml"; }

Toptal\CustomWidget\Block\Widge\Samplewidget объявлен выше кода. В этом файле мы назначаем пользовательский файл шаблона внутри переменной $_template .

Далее мы посмотрим, что содержит наш шаблон виджета.

app/code/Toptal/CustomWidget/Block/view/frontend/templates/widget/samplewidget.phtml

 <?php if($block->getData('widgettitle')): ?> <h2 class='toptal-title'><?php echo $block->getData('widgettitle'); ?></h2> <?php endif; ?> <?php if($block->getData('widgetcontent')): ?> <h2 class='toptal-content'><?php echo $block->getData('widgetcontent'); ?></h2> <?php endif; ?>

Здесь мы можем увидеть, как получить значение из параметров виджета. Это просто:

$this->getData('widgettitle');

а также

$this->getData('widgetcontent');

Каков наш конечный результат? Позвольте мне показать вам, как это выглядит в Magento Admin:

Теперь нам нужно сохранить этот виджет и очистить кеш. Как указывалось ранее, это можно сделать с помощью администратора или командной строки, используя php bin/magento cache:clean и php bin/magento cache:flush

Вы можете скачать этот простой модуль здесь. Очевидно, что это не полный шаблон виджета Magento 2, но он все же является учебным пособием. Если вам нужно больше ресурсов, или если вы относительно новичок в Magento, официальная документация Magento 2 — это очевидное место для начала.

Наконец, я хотел бы упомянуть пару личных блогов разработчиков, которые я считаю весьма полезными. У Алана Шторма, пожалуй, самое дидактическое содержание, когда дело доходит до изучения Magento, и я думаю, что вам также стоит заглянуть в блог Алана Кента.

Виджеты: ключевая часть общей картины

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

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

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

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