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 集成方面的工作仍在进行中。 很快，我们将完成该项目。