Magento 塊和小部件的初學者指南

塊和小部件是 Magento 中的關鍵佈局功能。 這兩個功能聯繫非常緊密，並且經常一起使用。

考慮塊的一種方法是它們是迷你頁面。 塊還可以包含文本、圖像、視頻等。 但是由於塊更小，您會在站點的邊緣看到它們。 塊通常插入到頁眉、側邊欄和頁腳中。

但是，塊是使用小部件放置的。 首先，您創建一個塊，然後使用一個小部件來決定該塊將顯示在哪裡。

讓我們通過一些示例向您展示塊和小部件如何在 Magento 中工作。

本指南摘自 Magento 2 的暢銷書 Magento 2 Explained。我們在該書中使用了一家名為“Orangeville”的商店的示例，因此您會在此處看到它的引用。

創建 Magento 塊解釋

讓我們來看看創建我們的第一個塊的過程。 這將包含一個 HTML 鏈接。

• 轉到“內容”，然後轉到“塊”。
• 點擊右上角的“添加新塊”。

• 輸入“關鍵鏈接”作為“塊標題”。 這是訪客將在屏幕上看到的內容。
• 輸入“key_links”作為標識符。 這個字符串是 Magento 用來識別區塊的，但訪問者永遠不會看到它。

• 單擊編輯器工具欄中的項目符號圖標：

• 鍵入“About Orangeville”作為要點：
• 選擇“About Orangeville”文本並單擊鏈接圖標。

• 您現在將看到一個彈出窗口。 輸入“關於奧蘭治維爾”頁面的 URL。 如果您不確定這是什麼，您可以在新的瀏覽器選項卡中打開您的 Magento 站點並找到 URL，它可能是 example.com/about-orangeville/。
• 單擊“插入”。
• 現在，您的 Block 中有一個“About Orangeville”鏈接：

• 單擊“保存塊”。

創建 Magento 小部件解釋

我們現在面臨的挑戰是將您的塊放入您的網站設計中。 這就是 Magento 的小部件派上用場的地方。 在 Magento 中，塊只是一個內容。 它是控制塊放置的小部件。

然而，這並不是 Widget 所能做的全部。 Widget 可以放置我們簡單的新塊，但它也可以放置許多其他功能。

• 轉到“內容”，然後轉到“小部件”。
• 單擊“添加小部件”。
• 對於“類型”，選擇“CMS 靜態塊”。
• 對於“設計主題”，選擇“Magento Luma”。
• 點擊“繼續”。

• 為“Widget Title”輸入“Key Orangeville Links”。
• 在“分配給商店視圖”下，選擇“所有商店視圖”。

接下來，我們將控制該塊出現在哪些 URL 上。

• 單擊“添加佈局更新”。

• 選擇“所有頁面”。

• 為“容器”選項選擇“CMS 頁腳鍊接”。

這兩個選項，“所有頁面”和“CMS 頁腳鍊接”，對您來說可能還沒有多大意義。 但是，我們將完成小部件的創建，在本章後面的“Magento 小部件放置說明”一節中，我們將更多地解釋我們做出這些選擇的原因。

在“佈局更新”下，我們將選擇放置小部件的位置。

• 選擇“所有產品類型”。
• 再次選擇“CMS 頁腳鍊接”。
• 添加這兩個選項後，您的屏幕將如下圖所示。

此時，您已經創建了 Widget 並告訴 Magento 它應該出現在您網站的哪個位置：這個 Widget 將出現在我們所有的頁面和所有產品上。

現在是時候選擇 Widget 的內容了，這將是您之前創建的 Block。

• 單擊邊欄中的“小部件選項”。
• 單擊“選擇塊”。

• 現在您可以選擇之前創建的“關鍵鏈接”塊：

• 點擊“保存”。
• 訪問您網站的前端，您會看到您的鏈接現在已發佈在頁腳中。 您使用內容創建了一個塊，並將其發佈到一個小部件中。

一起創建塊和小部件

創建塊和小部件時肯定有一些棘手的步驟。 因此，讓我們一起嘗試整個過程。 我們將創建第二個塊，並在小部件的幫助下將其放置在我們的網站上。 這個 Block 會告訴人們我們有 100% 的滿意保證。

• 轉到“內容”，然後轉到“塊”。
• 單擊“添加新塊”。
• 標題：滿意保證
• 標識符：保證

• 為您的塊輸入文本。 我寫道：“在奧蘭治維爾，您的滿意是我們的首要任務。如果您不滿意，我們將退還您的錢。”

接下來，我們將為我們的區塊上傳一張圖片。

• 將光標放在您剛剛編寫的文本下方的主要內容區域。
• 單擊編輯器工具欄中的樹形圖標。
• 當您看到彈出框時，單擊小框圖標。
• 找到可以上傳的圖片。 我選擇了 100% 的徽章。

• 單擊“插入文件”。
• 圖片說明：滿意保證
• 單擊“插入”。

• 您現在有一個包含文本和新圖像的塊。
• 單擊“保存塊”以完成創建此塊。

接下來，讓我們創建將在我們的網站上顯示此塊的小部件。

• 轉到“內容”，然後轉到“小部件”。
• 單擊“添加小部件”。
• 類型： CMS 靜態塊
• 設計主題： Magento Luma

• 小部件標題：保證滿意
• 分配給商店視圖：所有商店視圖

• 佈局更新：錨類別
• 容器：側邊欄主
• 單擊“Widget Options”並選擇您剛剛創建的“Satisfaction Guaranteed”塊。

• 點擊“保存”。
• 訪問您網站的前面。 單擊頂部菜單中的類別鏈接之一。 在下圖中，我點擊了“水果”。 您現在將在左側邊欄中看到您的保證塊：

Magento 小部件放置說明

我從 Magento 學習者那裡得到的一個常見問題是關於 Widget 的放置。

你怎麼知道為容器選擇“CMS 頁腳鍊接”或“側邊欄主”？ 畢竟，有 22 種不同的選擇，如下圖所示。

“在頁眉之後”和“在頁眉頂部之後”有什麼區別？ “頁腳”和“頁腳容器”有什麼區別？ 這些名稱是如此相似，以至於它們肯定會令人困惑。

不幸的是，沒有辦法提前告訴你，雖然這個名字會讓你對位置有一個很好的了解：

• 頁眉之後：這很可能在主菜單下。
• 主要內容底部：這可能位於屏幕中央部分的下方，位於我們的產品或頁面內容下方。
• 頁面頂部：這將出現在頁面的較高位置，但不會出現在產品屏幕上。

值得注意的是，即使在同一個站點上，這些選項也會發生變化。 如果您嘗試放置一個塊並為小部件的“佈局選項”選擇“所有產品類型”，那麼您將獲得一組不同的選擇，如下圖所示。 這些選項提供了一些僅對您的產品屏幕有意義的展示位置。 例如，您現在看到的選項包括“產品社交鏈接容器”和“之前查看表單字段”。 除了在產品屏幕上，這些小部件放置在任何地方都沒有意義。

另一方面，此列表有時可能要短得多。 在本章的下一部分中，我們將看到一些 Widget 僅帶有三個 Container 選項。

因此，如果您選擇特定的 Container，則無法保證您的 Widget 將出現在哪裡。 當您測試這些不同的選項時，將涉及一些測試和實驗。

Magento 塊和小部件摘要

塊和小部件允許您將新項目添加到您網站的設計中。 但是，您網站上的某些元素無法從 Magento 的管理界面輕鬆修改或替換。 它們看起來應該是塊和小部件，但 Magento 並沒有那樣創建它們。 因此，我創建了一個頁面，其中包含更新其中一些默認元素的說明。

如果您準備好了解有關 Magento 的更多信息，請查看 Magento 2 Explained，這是 Magento 2 的暢銷書。

我們還有一些更棒的 Magento 在線教程，包括：

• 了解 Magento 稅的初學者指南
• Magento 中的基本、小、縮略圖和样本圖像
• 了解 Magento 2 索引是什麼以及如何管理它們