ShopEngine現在與Gutenberg區塊編輯器相容。之前，您只能通過Elementor視窗訪問ShopEngine小工具，對吧？
但是現在ShopEngine可以在此之外使用。除了通過Elementor訪問ShopEngine小工具外，您還可以在Gutenberg中使用ShopEngine for WooCommerce。但是，在Gutenberg中，這些小工具將顯示為區塊。
事實上，Elementor小工具和Gutenberg區塊的功能是相同的。那麼，區別在哪裡呢？區別在於應用程式。對於Elementor小工具，您必須將小工具拖放到指定區域才能檢視輸出。但是對於古騰堡，您只需單擊區塊即可完成工作。
古騰堡概覽
作為WordPress使用者，您必須熟悉術語Gutenberg。它是一個WordPress內容編輯器，也稱為WordPress區塊編輯器。如今，由於其易用性，Gutenberg是WordPress使用者中最受歡迎的WordPress編輯器。許多WordPress Gutenberg外掛也可從3rd方開發人員處獲得。
以前，人們更習慣於使用另一個WordPress編輯器“經典編輯器”。自從古騰堡問世以來，與經典編輯器相比，人們更喜歡區塊編輯器（這未必，也有人感覺經典編輯器更好用）。古騰堡的特色是其基於區塊的內容。
無論是段落、影象還是按鈕，這些元素中的每一個都是一個區塊。與經典編輯器不同的是，這款基於區塊的內容編輯器讓您可以更好地控制內容。這個塊編輯器最好的部分是它允許3rd方開發人員嵌入自定義塊。
這正是我們將重點關注這個資訊豐富的部落格的內容，因為從現在開始，您可以在Gutenberg for WooCommerce中使用ShopEngine的大量功能。在我們擴充套件ShopEngine在Gutenberg中的自定義塊之前，讓我闡明為什麼我們將ShopEngine與Gutenberg整合到WooCommerce中。
為什麼將ShopEngine與Gutenberg整合：
ShopEngine最初是專為Elementor設計的。這意味著您可以僅為Elementor構建您的WooCommerce頁面。但是現在，正如我之前提到的，ShopEngine在與Gutenberg整合後又向前邁進了一步。
那麼，是什麼讓我們將ShopEngine與Gutenberg整合到WooCommerce中呢？為了回答這個問題，讓我向您展示一些資料-
根據gutenstats.blog，到目前為止，Gutenberg已經收到了7600萬次活躍安裝。最重要的是，迄今為止，有2.645億篇由古騰堡撰寫的文章。
我認為這些資料足以讓任何人相信我們為什麼將ShopEngine的範圍擴充套件到古騰堡。數百萬人正在部署Gutenberg來開發他們的內容，我們不希望他們錯過ShopEngine提供的引人入勝的功能。
ShopEngine與Gutenberg整合的更多原因：
讓我強調一點，古騰堡不僅僅是一個內容編輯器。Gutenberg專案旨在在不久的將來將塊編輯器變成一個全站點編輯工具。
這個想法是讓您使用Gutenberg編輯器設計100%的WooCommerce網站。如果發生這種情況，對古騰堡的需求可能會飆升。所以，值得將ShopEngine與Gutenberg整合到WooCommerce，對嗎？
- 使用古騰堡，您不必使用簡碼來嵌入內容。相反，您可以部署塊以新增必要的頁面元素。
- Gutenberg沒有相容性問題，因此開發人員可以輕鬆地將Gutenberg支援合併到他們的外掛中。
- Gutenberg輸出輕量級程式碼，同時也是一個快速載入工具。
古騰堡一些著名的ShopEngine區塊：
在闡明ShopEngine區塊之前，讓我澄清一下ShopEngine帶有65多個小工具、 13多個模組以及為滿足Elementor使用者需求的WooCommerce商店頁面的無數模板。在將ShopEngine與Gutenberg for WooCommerce整合後，您現在可以訪問Gutenberg中的45多個ShopEngine區塊。
根據您選擇為WooCommerce商店構建模板的頁面型別，Gutenberg區塊將相應顯示。此外，您還可以訪問快速檢視、變化樣本、產品比較和願望清單等模組。
讓我們來看看Gutenberg中用於WooCommerce商店的一些ShopEngine區塊 –
產品標題：
產品標題欄顯示在特定產品的單個頁面上。選擇單一頁面型別來構建模板後，您只需單擊側欄中的產品標題塊。
之後，您的產品標題將立即出現在頁面上。從右側邊欄中，您可以修改標題標籤、對齊方式、顏色和排版。
產品列表：
產品列表顯示您在WooCommerce商店中銷售的所有型別的產品。產品列表塊出現在所有型別的頁面中，包括單頁、商店、結帳和購物車頁面。選擇頁面型別後，從彈出視窗或側邊欄中單擊產品列表。
確保選擇要顯示的產品的產品類別。從右側邊欄中，您可以選擇和自定義產品列表的不同元素。您可以選擇每頁的產品數量、標籤、顯示/隱藏銷售徽章、折扣百分比等。
產品描述：
如果您建立單頁模板，產品描述塊將顯示在側邊欄上。要使產品描述出現在您的頁面上，請單擊產品描述塊。您可以自定義描述，也可以通過修改排版、顏色、對齊方式等對其進行樣式化。
結帳付款：
與Elementor中的Checkout Payment小工具一樣，Checkout Payment區塊也適用於Gutenberg。如果您進入結帳頁面的構建模板，您可以檢視“結帳付款”塊。之後，您可以根據需要為您的WooCommerce商店新增結帳付款塊。
您可以選擇更改內容樣式、支付方式、按鈕等。您可以調整覈取方塊位置、按鈕顏色、排版、邊框等。
存檔產品：
存檔產品頁面包含所有已釋出的產品在一個地方。要為WooCommerce在Gutenberg中的存檔頁面建立模板，只需轉到左側邊欄並單擊存檔產品塊。庫存的所有產品都會一個接一個地出現。
存檔產品頁面擁有豐富的細分，包括佈局、內容、分頁、評級等。頁面包含大量元素，如產品標題、產品圖片、產品價格、產品描述、產品頁尾等。
購物車列表：
在購物車表中，您選擇的產品的所有詳細資訊都會彈出，包括產品名稱、價格、數量、小計和總金額。使用ShopEngine的購物車列表區塊，您可以通過WooCommerce購物車頁面中的購物車表向買家展示與您的產品相關的所有資訊。
為了自定義內容和風格化購物車表的不同元素，您將在右側邊欄上獲得引數。您可以調整產品頁首和頁尾顏色、邊框顏色、文字顏色，以及定製內容部分，包括標題、價格、數量、總計等。
最近瀏覽的產品：
使用ShopEngine的最近檢視的產品區塊，您可以展示您的使用者最近在您的WooCommerce商店中瀏覽或檢視的產品。您可以在商店頁面、產品頁面、購物車頁面等顯示最近檢視的產品。
與其他塊一樣，您可以在右側欄中注意到與最近檢視的產品相關的引數。利用引數，您可以指定要顯示的產品數量、顯示/隱藏銷售徽章、設定列和行間距、調整產品影象的高度等。
小結
那麼，您對我們將ShopEngine和Gutenberg與WooCommerce整合的舉措有何看法？請告訴我們您在Gutenberg for WooCommerce商店中部署ShopEngine區塊的經驗。
評論留言