回到所有的课程
课程库

添加到购物车

获取添加到购物车组件和设置的概述。

这个视频的特点是一个旧的UI。更新版本即将发布!

控件连接的集合列表中可以添加到产品页或集合列表中的特殊元素欧宝体育在线首页欧宝体育在线首页产品类别是添加到购物车元素。这个元素包含两个按钮,允许用户向购物车中添加产品,或者立即进行结帐。欧宝体育在线首页

在这节课中:

  1. 添加到购物车组件
  2. 添加到购物车设置
  3. 对添加到购物车组件的剖析

添加到购物车元素

添加到购物车元素存在于添加面板电子商务.您可以添加添加到购物车元素上的产品页或连接到产品集合中的集欧宝体育在线首页合列表中添加面板或使用快速的找到(CMD / CTRL + E)。

从“添加”面板中添加“添加到购物车”按钮。

添加到购物车设置

您可以自定义添加到购物车元素设置面板中的元素。

添加到购物车设置

状态

在三个状态之间切换(默认的缺货错误)的添加到购物车组件,以分别样式每个状态。

数量

默认情况下是“开”的。您可以禁用数量字段,以对“添加到购物车”包装器隐藏数量输入字段。

添加到购物车

默认情况下是“开”的。您可以禁用“添加到购物车”以从“添加到购物车”包装器中隐藏按钮。

立即购买

默认情况下是“开”的。您可以禁用立即购买,以隐藏按钮从添加到购物车包装。

请注意:现在购买目前只与Stripe作为您的支付提供商(从您的网站的客户接受付款的提供商)合作。如果条纹没有连接-现在购买按钮将隐藏在发布的网站。

对添加到购物车组件的剖析

许多元素构成了添加到购物车组件。每个状态都有自己的一组元素。了解它们是什么,以及如何定制它们。

默认状态

这是消费者默认看到的。默认状态包含以下组件:

  • 选项列表-这是一组下拉菜单或按钮,出现的产品变种,并允许用户选择他们想要添加到他们的购物车的变种。欧宝体育在线首页
  • 数量-这允许用户指定他们想要添加到购物车的产品的数量。欧宝体育在线首页你可以把数量隐藏在添加到购物车设置.阅读更多。
  • 添加到购物车按钮这是真正的“添加到购物车”按钮,你可以定制样式。选择“提交按钮”更改默认文本而且等待文本添加到购物车按钮设置.当购物者单击添加到购物车按钮-它将添加产品到购物者的购物车,在那里他们可以欧宝体育在线首页稍后完成购买。
  • 〇立即购买按钮这是一个“立即购买”按钮,您可以定制样式。选择立即购买按钮,更改默认文本立即购买按钮设置.的立即购买Button将购物者直接带到结帐页面来完成他们的购买——允许他们在更少的步骤中结帐。
选项列表

欧宝体育在线首页具有变体的产品有几个选项,我们可以使用它们让客户选择产品的不同选项。与我们的选项列表元素选中后,我们有几个选项来定制列表:

  • 变体选择器
  • 预选默认变体

使用选择允许您在下拉元素中有产品变体选项,同时欧宝体育在线首页使用按钮让您在可选择按钮选项中有您的产品变体选欧宝体育在线首页项。

你可以设置一个变量,每个产品都可以开始使用欧宝体育在线首页预选默认变体

请注意:如果你添加到购物车元素中缺少立即购买按钮或变体选择器-重新添加一个新的添加到购物车元素添加到设计器中的项目中。

缺货状态

这是当商品脱销时,将出现在添加到购物车按钮的位置的消息。在设计器中查看此状态时,可以自定义此消息并设置其样式。

错误状态

当系统向购物车中添加产品失败时,可能会出现错误消息。欧宝体育在线首页您可以自定义和样式错误消息。要编辑错误消息,请选择错误消息文本块来访问错误消息设置.选择设置中的每条消息以在画布上查看它。要编辑消息,请单击铅笔图标当您将鼠标悬停在消息上时,它会出现在设置中的消息旁边。

尝试Webflow——它是免费的
Baidu
map