ShopEngine 與 Gutenberg 的 WooCommerce 商店集成

終於，等待結束了！ 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 的自定義塊之前，讓我闡明為什麼我們將 ShopEngine 與古騰堡的 WooCommerce 集成。

為什麼將 ShopEngine 與 Gutenberg 集成：

ShopEngine 最初是專為 Elementor 設計的。 這意味著您可以僅為 Elementor 構建您的 WooCommerce 頁面。 但是現在，正如我之前提到的，ShopEngine 在與 Gutenberg 集成後又向前邁進了一步。

那麼，是什麼讓我們將 ShopEngine 與 Gutenberg 集成到 WooCommerce 中呢？ 為了回答這個問題，讓我向您展示一些數據-

根據gutenstats.blog，到目前為止，古騰堡已經收到了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 塊的經驗。

非常歡迎您對 WooCommerce 的 Gutenberg 集成提供任何正面或負面的反饋。 我們也非常感謝您提出建議以簡化我們的集成流程。 但是，我們在ShopEngine 與 Gutenberg 集成方面的工作仍在進行中。 很快，我們將完成該項目。