カスタムMagento2ウィジェットを作成する方法

公開: 2022-03-11

ウィジェットを使用すると、Magento 2ストア管理者は静的/動的コンテンツをCMSページおよびブロックに追加して、多くの機能と簡単な実装を提供できます。 ウィジェットは再利用可能なコンポーネントであり、Magento2の任意のCMSブロックに追加できます。

したがって、Magento 2の開発者とストア管理者は、プログラミングについてあまり知らなくても、フロントエンドにインタラクティブなインターフェイスと機能を追加できます。 もちろん、ウィジェットを作成するには、Magentoの使い方を知る必要があります。

この記事の目的は、カスタムウィジェットに重点を置いて、Magento2でウィジェットを作成する方法を示すことです。

Magento2ウィジェット

Magento 2は、今日の主要なeコマースプラットフォームの1つであるMagentoの最新バージョンです。 ウィジェットは、特に機能の観点から、Magento2で重要な役割を果たします。 より多くのユーザー側機能を提供することに加えて、Magentoウィジェットは、管理者が静的または動的コンテンツをCMSページおよびブロックに追加するのに役立ちます。

しかし、技術的な観点からは…Magentoウィジェットとは何ですか?

Magento 2ウィジェットは、基本的に、一連の高度な構成オプションを使用して設計されたMagento拡張機能です。 柔軟性と制御性が高いため、Magento管理者パネルを介して情報とマーケティングコンテンツを提供するために使用されます。 Magento 2ウィジェットの利点の1つは、サイトのどこからでもウィジェットを「呼び出す」ことができることです。

ウィジェットを使用すると、管理者はコーディングしなくても(実際には、コーディング方法さえ知らなくても)、Magentoフロントエンドにインタラクティブなインターフェイスや機能を追加できます。

Magento2は複数のタイプのウィジェットを提供します

実装に移る前に、Magento2でサポートされているウィジェットの標準範囲を詳しく見てみましょう。

  • 最近比較した製品—お気に入りのeコマースサイトで製品を閲覧しているときに、このウィジェットを観察した必要があります。 このウィジェットは、カタログページのサイドバーに最近表示または比較された製品を表示するために使用されます。 テーマによってはお店にも出てくる場合があります。 重要なポイントの1つは、すべてのブロックにリストされている製品の数を構成できることです。
  • 注文と返品—オンラインで商品を購入するときはいつでも、注文と返品にすばやくアクセスできる必須のウィジェットがあります。 ユーザーが注文または返品された製品を確認したい場合は、注文ID、最終日の請求、注文の検索、電子メールなどの必要な詳細を入力できます。
  • カタログ製品リスト—これはもう1つの広く使用されているウィジェットです。 ほとんどすべてのサイトに1つあるので、誰もがeコマースサイトの「注目の製品」セクションに精通しています。 注目の商品は通常、商品の宣伝を目的としてホームページに掲載されます。 特定の製品は、価格、機能、カートへの追加、ウィッシュリストへの追加、比較機能への追加などのオプションなどの簡単な詳細とともに表示されます。
  • カタログ製品リンク—カタログ製品リンクウィジェットの主な目的は、管理者が関連製品、クロスセル、アップセル、グループ化された製品などの製品のリンクを管理できるようにすることです。 カタログ製品のリンクページにアクセスすると、紹介から始まるさまざまなカタログカテゴリが表示されます。 ここには、カタログ製品リンクの割り当て、カタログ製品リンクの属性、カタログ製品リンクの削除、カタログ製品リンクの種類など、さまざまなサブリンクを持つカタログ製品リンクがあります。
  • カタログカテゴリリンク— eコマースWebサイト、特に製品ベースのWebサイトでは、カタログカテゴリリンクウィジェットに不足はありません。
  • カスタムブロックウィジェット—ブロック、ウィジェット、カスタムページを組み合わせて、カタログの一部や顧客が役立つと思われるその他の情報を表示することができます。

これらは、ユーザーエクスペリエンスを向上させ、ストアに機能を追加するために使用できます。 ブロックとウィジェットは、ほとんどのeコマースWebサイトの重要な要素です。 これにより、ユーザーはコンテンツをすばやく生成および制御でき、次のようなことを行うために使用できます。

  • サイドバーに動的/情報ブロックを追加する
  • CMSページにバナーを追加する
  • カスタムメニューを追加する
  • インタラクティブなユーザーインターフェイスを追加する

Magento2カスタムウィジェットの場合

どのウェブサイトやウェブページもスムーズに運営し、より多くの訪問者を引き付けるために多くの機能を必要とし、魅力的なユーザーエクスペリエンスを作成することはeコマースの必需品です。 そこで、カスタムMagento 2ウィジェットが登場し、それが彼らが行うことになっていることです。

ウィジェットは、ストアに追加できる小さなコードセットです。 ウィジェットは、動的コードへの単純なリンクを使用して、訪問者を支援し、エクスペリエンスを向上させるために調整されたあらゆる種類の有用なデータを表示できます。 オーバーヘッドの少ない再利用可能なウィジェットを使用してエンゲージメントを高める機能は、明らかに多くのことを意味しますが、既成のウィジェットを選択して追加するだけの問題ではない場合もあります。

Magento 2のカスタムウィジェット機能を使用すると、独自のウィジェットテンプレートを作成できます。 カスタムウィジェットは、CMSブロックまたはページ内の高品質のコンテンツを編集または追加するためのさらに優れた方法を提供する場合があります。

ただし、カスタムウィジェットに進む前に、Magento 2のウィジェットの標準的なユースケースを検討する必要があります。たとえば、基本的で広く使用されているものを見てみましょう。

ウィジェットを使用してホームページに新しい製品リストを追加する方法

このシンプルなウィジェットを使用すると、Webサイトの必要な場所に新しい製品リストを追加できます。また、Magento2で新しい製品をリストする方法はさまざまです。

Magentoの製品リストをホームページに追加するには、次の簡単なプロセスに従うだけです。

  • Magento 2管理ページにログインし、[コンテンツ]>[ウィジェット]に移動します

コンテンツの画像>ウィジェットメニューツリー

  • [ウィジェットの追加]ボタンをクリックします。 その後、 [設定]タブにリダイレクトされます。ここで、[タイプ]と[デザイン]のオプションとテーマを選択する必要があります。

  • 以下のスクリーンショットを見ると、フロントエンドに表示するカタログ新製品リストがすでに選択されています。

[タイプ]メニューで選択したMagentoの新製品リストの画像

  • デザインテーマオプションとしてLUMAを選択しました。

デザインテーマメニューのMagentoLumaテーマ選択の画像

  • 両方の値を選択した後、2番目のステップに進み、ストアフロントのプロパティを入力する必要があります。 次に、ウィジェットのタイトルストアビューなどのウィジェットのタイトルとストアフロントのプロパティを設定する必要があります。 Toptalの新製品リストすべてのストアビューを使用しています。

Magentoストアフロントの[プロパティ]タブの画像

  • 最も重要な部分は、このウィジェットが表示される場所(ホームページ、リストページ、チェックアウトページなど)を示す[レイアウトの更新]セクションです。 コンテナが表示される領域を定義することもできます。たとえば、ヘッダーの下、フッターの上、フッターなどです。

レイアウト更新設定には、次のオプションがあります。

  • 表示オン:指定されたページまたはすべてのページ。
  • ページ: CMSホームページ
  • コンテナ:メインコンテンツエリア
  • テンプレート:ここでは、新製品を表示するスタイルを選択できますグリッドモードまたはリストモード

Magento2の[レイアウトの更新]タブの画像

[指定されたページ]オプションを選択すると、プロパティの設定に進むことができ、特定のページにウィジェットを表示できるようになります。 ここに[ページ]ドロップダウンがあり、 CMSホームページを選択できます。 次に、特定のセクションにウィジェットを表示するために使用するコンテナとテンプレートを選択する必要があります。

最後に、ウィジェットオプションを含む最後のタブに移動します。 ここでは、表示する商品の種類などの条件を設定したり、商品数の制限を含めたりすることができます。

[すべての製品]を選択すると、最後に追加された製品がこのセクションに表示されます。 [新製品]を選択すると、「新製品」とマークした製品のみがこのセクションに表示されます。 顧客が複数のリストのナビゲーションを制御できるようにする場合は、[ページの表示]コントロールを[はい]に設定する必要があります。 「はい」を選択した場合は、製品数をリストに入力する必要があります。

[表示する製品の数]で、[新製品]セクションに表示できる製品の数を定義できます。 また、必要に応じてキャッシュの有効期間の設定を変更できます。

次に、このウィジェットを保存して、Magento2キャッシュをフラッシュする必要があります。 これは、管理者またはコマンドラインから実行できます。 次のコマンドを使用して、キャッシュをフラッシュできます。

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

Magento2ウィジェットパラメーターの設定に使用されるウィジェットオプションセクション

その後、ホームページで新製品を見ることができます。

前の画像を選択した結果、Magento2の新製品が表示されます

Magento2でカスタムウィジェットを作成する方法

ここでは、Magento 2のカスタムウィジェットを作成する方法を学習します。カスタムウィジェットは、要件に合わせて調整できるため、CMSブロックまたはページ内にコンテンツを追加および編集するための最良の方法を提供します。

Magento 2カスタムCSSおよびカスタムモジュールは、さまざまな可能性を提供します

基本から始めましょう。 私たちは皆、モジュールを作成する方法を知っていますよね? Magento 2でのカスタムモジュールの作成に慣れていない場合に備えて、プロセスを詳細に説明する優れたチュートリアルがあります。

それでは、Magento2でカスタムウィジェットを作成するステップバイステップのプロセスに移りましょう。

まず、名前空間とモジュールフォルダを必要とする新しいモジュールを作成する必要があります。 この例では、名前空間にToptalを使用し、モジュール名にCustomWidgetを使用します。 それでは、通常どおり、 composer.jsonregistration.phpetc/module.xmlから始めましょう。

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>

上記のコードでは、ウィジェットが呼び出された場所に表示されるパラメーターとしてTitleContentを取得しています。 <widget>タグには、ブロッククラスToptal\CustomWidget\Block\Widget\Samplewidgetが含まれています。 このクラスは、 Block/Widget/Samplewidget.php内で減速されます。 このクラスは、使用するテンプレートをウィジェットに指示します。

Magento2Typeメニューで選択されたToptalサンプルウィジェット

次のコードスニペットは、ウィジェットのブロックを定義する方法を示しています。 ここでテンプレートを設定します。 それがどのように見えるか見てみましょう。

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');

私たちの最終結果は何ですか? MagentoAdminでどのように表示されるかをお見せしましょう。

Magento2管理者に表示されるMagento2ウィジェットパラメーター

Magento2ウィジェットオプションでのToptalカスタムタイトルとToptalカスタムコンテンツの入力

次に、このウィジェットを保存してキャッシュをフラッシュする必要があります。 前に概説したように、これは、 php bin/magento cache:cleanおよびphp bin/magento cache:flushを使用して、管理者またはコマンドラインから実行できます。

Magento2のカスタムタイトルとコンテンツを含むToptalホームページの画像

この簡単なモジュールはここからダウンロードできます。 これは明らかに完全なMagento2ウィジェットテンプレートではありませんが、それでも学習支援です。 より多くのリソースが必要な場合、またはMagentoに比較的慣れていない場合は、Magento2の公式ドキュメントから始めるのがよいでしょう。

最後に、私が非常に役立つと思った個人的な開発ブログをいくつか紹介したいと思います。 Alan Stormは、Magentoの学習に関しておそらく最も教訓的なコンテンツを持っています。また、AlanKentのブログもチェックする必要があると思います。

ウィジェット:全体像の重要な部分

この記事の目的は、Magento 2ウィジェットの開発とカスタムウィジェットの作成をカバーする基本的なステップバイステップのチュートリアルから始めて、Magento2でウィジェットを作成するためのガイドを提供することでした。 カスタムソリューションはより柔軟性と機能性を提供する傾向があるため、私は明らかに後者のファンです。

Magentoウィジェットは重要なフロントエンド機能を提供するため、巧妙なカスタムウィジェットが次のMagentoプロジェクトを次のレベルに引き上げるのに役立つと言っても過言ではありません。 これにより、さらに多くの機能を実装し、さまざまなウィジェットを使用してさまざまな種類のアイテムをホームページに追加できます。最終的には、開発者に創造性の自由を提供するだけです。

カスタムウィジェット、Magento 2 Webフォーム、および連絡先フォームは、ユーザーエクスペリエンスを向上させ、コンバージョンを促進します

しかし、それはユーザーエクスペリエンスとコンバージョンを改善したり、見栄えの良いデザインを作成したりするだけの問題ではありません。 すべてのクライアントにとって明らかに優先事項ですが、より小さく、あまり明白ではない利点があります。 たとえば、Magentoウィジェットは、管理者側でも多くの時間と頭痛の種を節約でき、すべてのクライアントは工数も節約しようとしています。

ただし、これはこの記事の範囲を超えています。 私の意図は、ROIやマーケティングについて説明するのではなく、簡単な技術概要、わかりやすいMagento2ウィジェットチュートリアルを提供することでした。