如何創建自定義 Magento 2 小部件

已發表: 2022-03-11

小部件允許 Magento 2 商店管理員向 CMS 頁面和塊添加靜態/動態內容，提供大量功能和簡單的實現。 小部件是可重用的組件，可以添加到 Magento 2 的任何 CMS 塊中。

因此，它們允許 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 支持的標準小部件範圍：

  • 最近比較的產品——您一定在瀏覽您最喜歡的電子商務網站上的產品時觀察到了這個小部件。 此小部件用於在目錄頁面的側欄中顯示最近查看或比較的產品。 根據主題，它們也可能出現在您的商店中。 關鍵點之一是可以配置每個塊中列出的產品數量。
  • 訂單和退貨- 每當您在線購買產品時，都有一個必備的小部件可以快速訪問訂單和退貨。 如果用戶想要查看已訂購或退回的產品，他們可以填寫必要的詳細信息，例如訂單 ID、結算最後日期、查找訂單依據、電子郵件等。
  • 目錄產品列表——這是另一個廣泛使用的小部件； 每個人都熟悉電子商務網站上的“特色產品”部分，因為幾乎每個網站都有一個。 特色產品通常放置在主頁上，以進行產品推廣。 特定產品會顯示簡要詳細信息，例如價格、功能和添加到購物車、添加到願望清單和添加到比較功能等選項。
  • 目錄產品鏈接——目錄產品鏈接小部件的主要目的是允許管理員管理產品鏈接，包括相關產品、交叉銷售、追加銷售和分組產品。 當您訪問目錄產品鏈接頁面時，您將看到以介紹開頭的不同目錄類別。 在那裡，您會找到帶有各種子鏈接的目錄產品鏈接，例如目錄產品鏈接分配、目錄產品鏈接屬性、目錄產品鏈接刪除、目錄產品鏈接類型等等。
  • 目錄類別鏈接——在電子商務網站，尤其是基於產品的網站中，您會發現不乏目錄類別鏈接小部件。
  • 自定義塊小部件- 可以組合塊、小部件和自定義頁面來顯示部分目錄或客戶可能認為有用的其他信息。

這些可用於改善用戶體驗並為商店添加功能。 塊和小部件是大多數電子商務網站的重要元素。 它們允許用戶快速生成和控制內容，並可用於執行以下操作：

  • 在側邊欄中添加動態/信息塊
  • 在 CMS 頁面中添加橫幅
  • 添加自定義菜單
  • 添加交互式用戶界面

Magento 2 自定義小部件的案例

任何網站或網頁都需要大量功能才能順利運行並吸引更多訪問者，而在電子商務中創造引人入勝的用戶體驗是必須的。 這就是自定義 Magento 2 小部件發揮作用的地方，這就是它們應該做的事情。

小部件是我們可以添加到商店的更小的代碼集。 使用指向動態代碼的簡單鏈接，小部件可以顯示為幫助訪問者和改善他們的體驗而量身定制的各種有用數據。 使用低開銷、可重複使用的小部件來提高參與度的能力顯然意義重大，但有時不僅僅是選擇和添加現成的小部件的問題。

使用 Magento 2 中的自定義小部件功能，我們可以創建自己的小部件模板。 自定義小部件有時可以提供更好的方式在 CMS 塊或頁面內編輯或添加高質量內容。

但是，在我們繼續自定義小部件之前，我們需要檢查 Magento 2 中小部件的標準用例。讓我們看一些基本且廣泛使用的東西，例如：

如何使用小部件將新產品列表添加到主頁

這個簡單的小部件允許我們在網站上任何需要的地方添加新產品列表，並且可以通過多種方式在 Magento 2 中列出新產品。

要將 Magento 產品列表添加到主頁，您只需要遵循一個簡單的過程：

  • 登錄 Magento 2 管理頁面並轉到 Content > Widget

內容 > 小部件菜單樹的圖像

  • 單擊添加小部件按鈕。 之後，我們將被重定向到“設置”選項卡，我們必須在其中選擇“類型”和“設計”選項和主題。

  • 我們可以看到下面的屏幕截圖，其中我們已經選擇了我們將在前端顯示的目錄新產品列表。

類型菜單中的 Magento 新產品列表選項的圖像

  • 我們選擇 LUMA 作為設計主題選項。

設計主題菜單中的 Magento Luma 主題選擇的圖像

  • 選擇這兩個值後，我們必須繼續第二步，我們必須填寫店面屬性。 現在我們要設置Widget Title和Storefront Properties ，例如Widget Title和Store View 。 我們正在使用Toptal 新產品列表和所有商店視圖。

Magento 店面屬性選項卡的圖像

  • 最重要的部分是佈局更新部分，它將告訴我們這個小部件將出現在哪裡（例如，主頁、列表頁面、結帳頁面等）。 還可以定義容器將出現的區域——例如，在頁眉下方、頁腳上方、頁腳等。

佈局更新設置為您提供以下選項：

  • 顯示在：指定頁面或所有頁面。
  • 頁面： CMS主頁
  • 容器：主要內容區
  • 模板：在這裡，您可以選擇您希望以哪種樣式顯示新產品網格模式或列表模式

Magento 2 中“佈局更新”選項卡的圖像

一旦我們選擇了指定頁面選項，我們就可以繼續設置屬性，允許我們在特定頁面上顯示小部件。 這裡我們有Page下拉菜單，它允許我們選擇CMS Home Page 。 接下來，我們需要選擇將用於在特定部分顯示小部件的容器和模板。

最後，我們移至最後一個選項卡，其中包括小部件選項。 在這裡，我們可以設置Condition ，例如要展示什麼類型的產品，或者包括對產品數量的限制等等。

如果我們選擇All Products ，那麼最近添加的產品將顯示在此部分中。 如果我們選擇新產品，那麼只有那些我們標記為“新”的產品才會顯示在這個部分。 如果我們想讓我們的客戶控制多個列表的導航，我們需要將顯示頁面控制設置為“是”。 如果我們選擇了“是”，則需要在列表中輸入產品數量。

在Number of Products to Display中，我們可以定義在New Products部分可以顯示多少產品。 此外，如有必要，我們可以更改Cache Lifetime設置。

現在我們必須保存這個小部件並刷新 Magento 2 緩存。 這可以從管理員或命令行完成。 我們可以使用以下命令來刷新緩存：

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

用於設置 Magento 2 Widget 參數的 Widget Options 部分

然後我們就可以在首頁看到新品了。

Magento 2 新產品展示，來自上一張圖片的選擇

如何在 Magento 2 中創建自定義小部件

現在，我們將學習如何為 Magento 2 創建自定義小部件。自定義小部件提供了在 CMS 塊或頁面中添加和編輯內容的最佳方式，因為它們可以根據您的要求進行定制。

Magento 2 自定義 CSS 和自定義模塊提供了一系列可能性

讓我們從基礎開始。 我們都知道如何創建一個模塊，對吧？ 萬一您不熟悉在 Magento 2 中創建自定義模塊，我們提供了一個很好的教程，深入介紹了該過程。

現在，讓我們繼續在 Magento 2 中創建自定義小部件的分步過程。

首先，我們需要創建一個需要命名空間和模塊文件夾的新模塊。 對於這個例子，我們將使用Toptal作為命名空間，使用CustomWidget作為模塊名稱。 所以，讓我們像往常一樣從composer.json 、 registration.php和etc/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>

在上面的代碼中，我們將Title和Content作為參數，在調用小部件的任何地方顯示。 <widget>標籤包含塊類Toptal\CustomWidget\Block\Widget\Samplewidget 。 此類在Block/Widget/Samplewidget.php中減速。 該類指示我們的小部件使用哪個模板。

在 Magento 2 Type 菜單中選擇的 Toptal Sample Widget

下一段代碼展示瞭如何為小部件定義一個塊； 我們將在這裡設置我們的模板。 讓我們看看它的外觀。

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 中的樣子：

Magento 2 Widget 參數，如 Magento 2 Admin 中所示

Magento 2 小部件選項中的 Toptal 自定義標題和 Toptal 自定義內容輸入

現在我們必須保存這個小部件並刷新緩存。 如前所述，這可以從管理員或命令行使用php bin/magento cache:clean和php bin/magento cache:flush完成

Magento 2 中帶有自定義標題和內容的 Toptal 主頁圖像

你可以在這裡下載這個簡單的模塊。 它顯然不是一個完整的 Magento 2 小部件模板，但它仍然是一個學習輔助工具。 如果您需要更多資源，或者您對 Magento 比較陌生，那麼 Magento 2 官方文檔是顯而易見的起點。

最後，我想提幾個我覺得非常有用的個人開發博客。 在學習 Magento 方面，Alan Storm 可能是最具教育意義的內容，我認為您也應該查看 Alan Kent 的博客。

小部件：大圖的關鍵部分

本文的目的是提供一個在 Magento 2 中創建小部件的指南，從涵蓋 Magento 2 小部件開發和自定義小部件創建的基本分步教程開始。 我顯然是後者的粉絲，因為定制解決方案往往提供更多的靈活性和功能。

Magento 小部件提供了關鍵的前端功能，因此可以毫不誇張地說，聰明的自定義小部件可以幫助您的下一個 Magento 項目更上一層樓。 這允許我們實現更多功能，使用不同的小部件將不同類型的項目添加到主頁，最終，它們只是為開發人員提供了更多的創作自由。

自定義小部件、Magento 2 網絡表單和聯繫表單可以改善用戶體驗並促進轉化

但這不僅僅是改善用戶體驗和轉換，或做出令人敬畏的設計的問題。 顯然，所有這些都是任何客戶的優先事項，但也有較小的、不太明顯的收益。 例如，Magento 小部件也可以節省大量時間和管理方面的麻煩，並且每個客戶都希望節省工時。

但是，這超出了本文的範圍。 我的目的是提供一個快速的技術概述，一個易於遵循的 Magento 2 小部件教程，而不是討論投資回報率和營銷。