ShopEngine与Gutenberg集成:构建更强大的WooCommerce插图

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插图1

那么,是什么让我们将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区块。

ShopEngine与Gutenberg集成:构建更强大的WooCommerce插图2

根据您选择为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区块的经验。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。