回到所有的课程
课程库

车的概述

定制购物车按钮和购物车包装——Webflow电子商务中的购物车组件概述。

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

购物车组件允许您向项目中添加购物车。您可以自定义购物车按钮的外观和感觉,这不仅允许在线购物者打开购物车,还可以为他们提供购物车中商品数量和小计的快速概述。

您还可以自定义和样式购物车本身。在这里,在线购物者可以编辑他们的购物车内容,并在他们准备完成购买时结账。

在这节课中
  1. 购物车组件
  2. 购物车按钮
  3. 购物车

购物车组件

您可以从添加面板或使用快速查找(CMD/CTRL+E)添加一个购物车组件。

从Add面板添加购物车。
从Add面板添加购物车。
使用快速查找添加一个购物车。按CMD/CTRL+E并搜索“购物车”。
使用快速查找添加一个购物车。按CMD/CTRL+E并搜索“购物车”。

马车的解剖

cart组件由两个包装器组成:

  1. 购物车按钮
  2. 购物车包装器——它包括购物车容器
领航员车上的解剖图。
领航员车上的解剖图。
推车按钮和推车包装
推车按钮和推车容器

购物车按钮

默认情况下,购物车按钮有一个图标、一个文本块和车的数量元素。您可以添加其他元素,例如不同的图像或文本块,并按您的意愿设置购物车按钮的样式。

对象中的任何文本元素都可以连接购物车按钮数量购物车欧宝体育在线首页里的产品小计购物车项目的数量。

将购物车按钮中的任何文本块连接到购物车中产品的总数或购物车项目的小计金额。欧宝体育在线首页

车的数量

购物车数量元素显示购物车中物品的总数。控件中关闭该元素可以隐藏该元素购物车按钮设置元素设置面板。设置时可用购物车按钮在画布上选择包装器。

隐藏车的数量元素设置→推车按钮设置。

车空了就藏起来

你也可以选择只当购物车为空时隐藏购物车数量.要访问购物车数量设置,请双击车的数量元素在画布上。

当购物车为空时隐藏购物车数量在元素设置下>购物车数量设置。

了解更多:定制购物车按钮

购物车

购物车包装器是包含购物车容器的div块。推车容器是许多较小组件的一个组件。它有一个标题和一个表单包装器。表单包装器包含购物车列表,马车行项目,付款操作.您可以自定义和样式化大多数这些包装器及其子元素。推车也有空的状态而且错误状态您可以自定义的消息。

必须知道:有些物品不能从购物车中移除,以保留购物车的功能。

购物车列表

这是一个连接到产品集合的集合列表,显示添加到购物车中的项目(或项目的示例)。欧宝体育在线首页除了一些限制之外,您可以更新购物车列表项的结构和设计。

马车行项目

这显示了购物车的小计。您可以复制这个包装器并自定义它以显示项目的总数。

很高兴知道:购物车行项目中的任何文本链接都可以从元素设置面板连接到购物车的小计或数量。

付款操作

付款操作包装器允许用户最终完成购买。默认情况下,它包含结帐按钮而且网络支付按钮,您可以从元素设置面板.你也可以添加一个贝宝按钮添加面板

注意:如果您的商店只使用贝宝,结帐按钮在购物车中会自动隐藏在发布的站点上,因为贝宝付款使用不同的页面。

了解更多关于网络支付而且贝宝付款。

购物车包装器设置

要编辑和自定义购物车,请在画布上选择购物车,然后打开车车包装器设置元素设置面板(D).在这里,你可以选择车类型,宽松而且持续时间的打开和关闭动画,以及要在购物车中显示的项目数量预览.如果您愿意,也可以指定在添加产品时打开购物车欧宝体育在线首页到它。并访问购物车的各种状态,分别设置它们的样式。

编辑购物车设置

打开车

打开或关闭购物车以查看和编辑购物车包装器。

车类型

从预定义的推车类型中选择:

  • 模态(默认)-如果你想在你的页面中间弹出购物车
  • Sidebar-left-如果你想让购物车显示为左边的侧边栏
  • Sidebar-right-如果你想让购物车显示为右侧的侧边栏
  • 下拉-如果你想让购物车作为一个下拉菜单打开,就在购物车按钮的右边。对于这种推车类型,您还可以指定推车是否对齐正确的购物车按钮。您还可以指定推车是否将于点击或在徘徊

宽松

设置宽松动画如何播放,推车何时打开和关闭。默认的缓动是“缓出四轴”。

持续时间

设置持续时间以毫秒(ms)为单位的动画。默认值为300ms。

添加产品时打开欧宝体育在线首页

如果您想在每次新产品添加到购物车时打开购物车,请选中此框。欧宝体育在线首页

状态

在购物车的不同状态之间切换,以编辑和自定义每种状态。

  • 默认的-查看和样式的推车时,它有项目。您将在Designer中看到样例项目,因此很容易对购物车的默认状态设置样式。
  • -查看和自定义的外观和感觉,您的购物车时,它是空的
  • 错误-查看和自定义可能出现的错误消息,当签出失败。选择错误消息文本块来访问错误消息设置.选择设置中的每条消息以在画布上查看它。要编辑消息,请单击铅笔图标当您将鼠标悬停在消息上时,它会出现在设置中的消息旁边。

你可以恢复默认来自错误消息编辑器的错误消息。

预览

选择要在购物车中显示的商品数量。您可以选择显示单个项目或最多显示15个项目。默认为“3”项。

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