ShopEngine与Gutenberg集成：构建更强大的WooCommerce__wordpress教程

ShopEngine现在与Gutenberg区块编辑器兼容。之前，您只能通过Elementor窗口访问ShopEngine小工具，对吧？

但是现在ShopEngine可以在此之外使用。除了通过Elementor访问ShopEngine小工具外，您还可以在Gutenberg中使用ShopEngine for WooCommerce。但是，在Gutenberg中，这些小工具将显示为区块。

事实上，Elementor小工具和Gutenberg区块的功能是相同的。那么，区别在哪里呢？区别在于应用程序。对于Elementor小工具，您必须将小工具拖放到指定区域才能查看输出。但是对于古腾堡，您只需单击区块即可完成工作。

• 古腾堡概述
• 为什么将ShopEngine与Gutenberg集成
• ShopEngine相关古腾堡区块
• 小结

古腾堡概览

作为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区块的经验。

内容没看懂？ 不太想学习？想快速解决？ 有偿解决： 联系专家

阿里云企业补贴进行中： 马上申请

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心。

购买腾讯云产品享受折上折，更有现金返利:同意关联，立享优惠