ウィジェットは、CMSのページブロックやページにコンテンツを挿入したり編集したりするための優れたツールなので、Magento 2でウィジェットを作成するというトピックをお届けできてとても嬉しいです。この記事を読めば、理解が深まるでしょう。”この記事を読むと、「Magento 2のウィジェットとは何か」「Magento 2のストアでウィジェットを使用するにはどうすればよいか」を理解することができます。この記事を読めば、Magento 2で新しいウィジェットをカスタマイズすることができます。
目次
1. Magento 2のウィジェットとは？
まず最初に、Magento 2のウィジェットについて説明します。
ウィジェットは、Magento 2 の設定において強力な機能を提供します。ストア管理者は、ウィジェットを活用して、生き生きとしたインターフェイスの下でストアフロントを改善することができます。ウィジェットは、静的な情報を表示したり、動的なコンテンツマーケティングを行うことができます。ここでは、Magento ウィジェットの実装例をご紹介します：
- ダイナミックな製品データ
- 最近見た商品のダイナミックリスト
- プロモーションバナー
- インタラクティブなナビゲーション要素とアクションブロック
- コンテンツページに挿入されるダイナミックなフラッシュエレメント
Magento 2 のウィジェットのカスタマイズは、シンプルなモジュールで最適化されたフロントエンドエクステンションに似ています。Magento 2のウィジェットを作るのは簡単ですか？それは、いくつかの追加ファイルを除けば、helloworldを作成するのと同じですから、絶対にイエスです。したがって、技術的な経験がなくても、ダイナミックなコンテンツのブロックによって、簡単に店頭を改善することができます。
2. Magento 2でウィジェットを作成するための4つのステップ
ステップ 1: ウィジェットを宣言する widget.xml
以下の内容のファイルetc/widget.xmlを作成します：
<?xml version="1.0" ?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:helloworld:Magento_Widget:etc/widget.xsd">
<widget class="Mageplaza\HelloWorld\Block\Widget\Posts" id="mageplaza_helloworld_posts">
<label>Blog Posts</label>
<description>Posts</description>
<parameters>
<parameter name="posts" sort_order="10" visible="true" xsi:type="text">
<label>Custom Posts Label</label>
</parameter>
</parameters>
</widget>
</widgets>ステップ2：Magento 2でのウィジェットテンプレートファイルの作成
ファイル：view/frontend/templates/widget/posts.phtml
<?php if($block->getData('posts')): ?>
<h2 class='posts'><?php echo $block->getData('posts'); ?></h2>
<p>This is sample widget. Perform your code here.</p>
<?php endif; ?>ステップ3：Widget Blockクラスの作成
ブロックファイルを作成します: Block/Widget/Posts.php
<?php
namespace Mageplaza\HelloWorld\Block\Widget;
use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;
class Posts extends Template implements BlockInterface {
protected $_template = "widget/posts.phtml";
}ステップ4：キャッシュとポストをフラッシュする
管理画面の「コンテンツ」「ページ」「ホームページ」「編集」を開きます。
コンテンツ」タブ内の「ウィジェットの挿入」アイコンをクリックします。
ブログ記事がウィジェットリストに表示されます。
