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

ウィジェットは、Magento 2 WebサイトのCMSページとブロックに動的または静的コンテンツを追加できる素晴らしい機能です。これらは、Magento 2ストアのCMSブロックで利用できる複数の機能を提供する再利用可能な不可欠なツールです。.


ウィジェットをMagentoストアに追加すると、訪問者はあなたのストアを簡単にサーフィンおよび表示できます。彼らは、管理パネルで前例のない制御と柔軟性を提供しながら、ユーザー体験を豊かにする目を引くウェブサイトのテンプレートとデザインを作成します.

このチュートリアルは、Magento 2ストアにカスタムウィジェットを作成して、訪問者のエクスペリエンスを向上させ、ストア内のナビゲーションを改善するのに役立ちます.

準備はいい?始めましょう.

ステップ1-新しいモジュールの作成

Magento 2でカスタムウィジェットを作成するときの最初のステップは、新しいモジュールを確立することです。モジュールには、モジュールフォルダーと名前空間が必要です。 HostAdvice 名前空間として CustomWidget モジュールフォルダ名として。モジュールフォルダは、タイトルが付けられたベンダーフォルダにあります アプリ/コード.

このチュートリアルでは、以下を使用します app / code / HostAdvicel / CustomWidget / composer.json. モジュールでコンポーザーを使用しない場合でも、コンポーザーは実行時にこのファイルをロードします.

ステップ2-registration.phpの作成

モジュールをMagentoに登録する必要があります。これを行うには、まず、 register.php 場所で app / code / HostAdvice / CustomWidget / registration.php 以下のコードを使用して.

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

次に、以下のコードを使用して、場所に登録ファイルmodule.xmlを作成します app / code / HostAdvice / CustomWidget / module.xml.

<?xmlバージョン="1.0" ?>

ステップ3-ウィジェットの初期化

必要な登録ファイルを作成したら、次のステップはウィジェットの初期化です。を作成する widget.xml 場所にある構成ファイル app / code / HostAdvice / CustomWidget / etc / widget.xml. 次のコマンドを使用します。

<?xmlバージョン="1.0" ?>

HostAdviceサンプルウィジェット

題名

コンテンツ

上記のコマンドでは、2つの入力フィールドにラベルを付けています, 題名, そして コンテンツ. 新しいウィジェットが呼び出されるたびに、両方のフィールドの値が表示されます。また、タグでは、ブロッククラスを宣言しました, HostAdvice \ CustomWidget \ Block \ Widget \ Samplewidget 新しいウィジェットに特定のテンプレートを利用するように指示する.

ステップ4-ウィジェットブロックの作成

次に、タイトルのブロックフィールドを作成します Samplewidget.php, 場所で HostAdvice / CustomWidget / Block / Widget /, 以下のコードを使用:

<?php

名前空間HostAdvicel \ CustomWidget \ Block \ Widget;

Magento \ Framework \ View \ Element \ Templateを使用します。
Magento \ Widget \ Block \ BlockInterfaceを使用します。

クラスSamplewidgetはテンプレートを実装し、BlockInterfaceを実装します
{

保護された$ _template = "widget / samplewidget.phtml";

}

上記のコマンドで, HostAdvice \ CustomWidget \ Block \ Widge \ Samplewidget が適切に宣言され、カスタムテンプレートが $ _template 変数.

では、以下のコマンドを使用してテンプレートファイルを作成します samplewidget.phtml, 場所で HostAdvice / CustomWidget / view / frontend / templates / widget.

<?php if($ block->getData( ‘widgettitle’)): ?>

<?php echo $ block->getData( ‘widgettitle’); ?>

<?php endif; ?>
<?php if($ block->getData( ‘widgetcontent’)): ?>

<?php echo $ block->getData( ‘widgetcontent’); ?>

<?php endif; ?>
上記のコードでは、ウィジェットのパラメーターは$ thisを呼び出すことで選択されています。->getData( ‘widgettitle’);そして$ this->getData( ‘widgetcontent’);値.

ステップ5-ウィジェットの投稿

これで、カスタムウィジェットが正常に作成されました。 Magento 2の管理領域にログインし、 コンテンツ その後 ページ.

クリック 選択する [ホームページ]オプションで、 編集する.

拡大する コンテンツ セクションをクリックして、 ウィジェットを挿入 カスタムウィジェットを投稿するためのアイコン.

これにより、 ウィジェットを挿入 範囲。ウィジェットタイプの矢印をクリックし、 HostAdviceサンプルウィジェット, ドロップダウンリストから.

の中に ウィジェットのオプション, 入力します コンテンツ そして 題名 ホームページに表示され、ウィジェットの挿入をクリックします.

最後に、変更を加えるには、CLIを起動して以下のコマンドを実行し、Magento 2キャッシュをフラッシュします。

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

店舗のフロントエンドを読み込む.

結論

それでおしまい! Magento 2ストアに新しいカスタムウィジェットを開発して投稿しました。新しいウィジェットは、より創造的な自由を提供し、製品を簡単に販売できるようにするため、フロントエンドオペレーションに不可欠です。.

これらの上位3つのMagentoホスティングサービスを確認してください。

FastComet

開始価格:
$ 2.95


信頼性
9.7


価格
9.5


使いやすい
9.7


サポート
9.7


特徴
9.6

レビューを読む

FastCometにアクセス

A2ホスティング

開始価格:
$ 3.92


信頼性
9.3


価格
9.0


使いやすい
9.3


サポート
9.3


特徴
9.3

レビューを読む

A2 Hostingにアクセス

ScalaHosting

開始価格:
$ 4.95


信頼性
9.4


価格
9.5


使いやすい
9.5


サポート
9.5


特徴
9.4

レビューを読む

ScalaHostingにアクセス

関連するハウツー記事

  • Magento 2でバンドル製品を作成する方法
    中間
  • Magentoで新製品を作成する方法
    初心者
  • MagentoでSSL / TLS暗号化を設定する方法
    中間
  • 新しいMagentoテーマを作成する方法
    中間
  • CpanelにMagentoをインストールする方法
    初心者
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me