理解并定制您的购物车、结帐和订单确认。
购物车。这个隐喻源自20世纪中期一种叫做购物车的发明。
在本视频中,我们将介绍如何选择购物车类型(这是一堆不同的购物车设计起点)。我们将介绍如何自定义购物车上的动画。最后,我们将讨论在不同状态下对购物车进行样式化。
让我们从顶部开始。那么,这一切从何开始呢?它从一个购物车按钮开始。把它从添加面板拖到项目中。我们要做的是什么?就是转到元素设置。这里有很多内容,但我们主要关注的是:购物车类型。这就是为什么我们在屏幕上放了一个巨大的数字,上面写着“推车类型”。
这是我们的默认推车。我们可以通过按“打开购物车”来预览。如果我们想改变它?也许我们想让它在左边?我们在这里也可以这么做。右边也一样。最后一个呢?我们可以把手推车做成下拉式。
关于下拉菜单的一个注意事项:我们获得了设置对齐的能力(即我们希望它对齐到购物车按钮的左侧还是右侧)。我们获得了点击打开购物车的能力。或者,如果你想让它在悬停时打开,选择悬停。
让我们谈谈动画。我们切换到预览模式看看。点击购物车?这就是动画。让我们结束。其他类型的推车呢?这是左边的默认值(购物车在左边)。右边是购物车的默认值。最后,让我们来看下拉动画。
您可能对默认设置没有意见,但也有可能想要更加前卫。或实验。在下拉菜单中,我们可以控制缓动类型,在那下面,我们可以调整持续时间。1000毫秒?以秒为单位是多少?让我们找出答案。
这是1秒。我们可以通过切换到预览模式来测试效果。点击我们的车吗?这是1000毫秒的四倍弛豫。
那么在不同的州进行设计呢?有三个。默认值,空,错误。
但让我们在一个空白的项目中看看这个。您可能会注意到,我们不能立即对默认值和错误设置样式。那是因为我们要加积。欧宝体育在线首页我们将在这里使用一个快速功能-我们将使用CSV导入。如果我们没有东西可以进口呢?如果我们没有自己的CSV文件呢?我们可以使用这个CSV模板。
该模板是如何在CSV中格式化批量项的一个很好的示例。但现在,我们不打算做任何改变。我们会把它导入回Webflow。为什么?好问题。
因为:我们什么时候做?我们可以使用示例内容。样品(产品)。欧宝体育在线首页一旦导入了它,(或者一旦我们在项目中创建了产品),我们就解锁了使用其他状态的能力。欧宝体育在线首页
所以。违约。这是默认状态。我们可以对购物车中一定数量的商品进行抽样。想要模拟添加到购物车中的三个项目吗?去三个。想要模拟15?
我们还可以设计任何样式。字体,布局,对齐-我们在这里有相同的控制,我们有在CMS集合。因此,这意味着对一个购物车商品的更改将影响到其他商品。移动里面的东西?它会更新-它会移动到所有其他的。
还有那个推车集装箱呢?想要圆角?我们可以简单地添加圆角。想要改变背景-购物车容器的背景颜色为蓝色?不。因为那看起来很可怕。
那么空状态呢?当我们的购物车里没有东西时,就会出现这种情况。我们可以更改或添加项目——在本例中,我们将把文本更改为“您的购物车中实际上什么也没有”。我们可以添加一个GIF。什么样的动图?一个我们可以直接拖进购物车的动图。这将显示当我们的购物车是空的。
这是空态。错误呢?一旦我们进入错误状态,让我们点击错误消息本身。所以有一个吨这里的选项。一吨是指三吨。您可以选择您想要的样式,但是您也可以从三种类型的消息中进行选择。根据所发生的事情产生了三个错误。数量不可用,签出被禁用,或者只是一个一般的错误消息。
现在。拥有所有这些选项的好处是,您可以按照您想要的样子和感觉来设置整个程序。你对投影感兴趣吗?我们也是。你喜欢添加大量的顶部空白到你的元素吗?去做吧。想让你的价格高?让我们做它。你的购物车会对鼠标的位置做出反应吗?你当然可以这么做。 This is Webflow.
我们有大量关于交互(和其他主题)的内容——以及CMS。这都是在Webflow大学上,所以:点击查看,你可以学到更多关于如何使用所有东西的知识。
与此同时,这张幻灯片展示了我们刚刚讨论的内容。我们在Keynote中做了这些。
有了Webflow电子商务,你可以让结账体验与整个购物体验无缝结合。让我们看看如何定制和样式您的电子商务实用程序页面——购物车、结帐和订单确认。
在添加、自定义和样式化Cart按钮之后,您可以自定义Cart本身。您可以选择打开和关闭动画的类型、缓和和持续时间,以及要在Cart预览中显示的项目数量。还可以指定在添加产品时是否要打开Cart。欧宝体育在线首页
在画布上选择Cart元素并打开车从元素设置面板(D).然后,选择车类型.
通过设置转换来修改购物车的打开和关闭方式宽松而且持续时间的动画。你可以在预览模式下测试效果。
现在你已经设置了购物车的打开方式,你可以在它的3个状态中设置不同的元素样式:
控件中的这些状态之间切换车包装器设置.
了解更多:Cart元素
为默认的状态,您可以指定应该在购物车预览中显示多少项。
为错误状态,自定义签出失败时可能出现的错误消息。选择错误消息文本块来访问错误消息设置.选择设置中的每条消息以在画布上查看它。要编辑消息,请单击铅笔图标当您将鼠标悬停在消息上时,它会出现在设置中的消息旁边。
你可以恢复默认下的错误消息编辑错误消息.
一旦您完成了Cart的样式化和自定义,关闭它的方式与打开它的方式相同元素设置面板>打开车.
当您打开购物车时,您将看到围绕购物车的页面上有一个半透明的覆盖层。这是“Cart包装器”。
更改包装器的背景颜色:
通过从Cart包装器的background-color属性中删除应用的样式,您可以随时恢复默认样式。
从产品页面或产欧宝体育在线首页品列表中,购物者可以选择任何一种添加到购物车或直接带您到收银台立即购买选择。
请注意:由于PayPal结帐使用不同的流程,立即购买只在支持条纹的商店上工作。
了解更多:添加到购物车和现在购买
一旦顾客将商品添加到购物车中,他们可以通过3种方式完欧宝体育在线首页成结帐,这取决于你的商店设置:
请注意:您也可以添加网络支付而且贝宝按钮达到你母语的最高水平结帐页面,为购物者提供更多的选择后,他们导航离开购物车。
一旦在线购物者向购物车中添加了产品并准备提交订单,他们将打开购物车欧宝体育在线首页,选择继续结帐,并被带到结帐页面(/checkout)。
这是您可以自定义的第一个电子商务实用程序页面。它被发现在页面的面板并附带默认组件。你亦可更新所有电子商贸网页,包括:
您可以通过重新排序和样式化组件和元素来定制结帐页面。请注意,删除或隐藏带有必需字段的组件会破坏签出表单。您可以重新添加订单项,订单汇总,网络支付只要你愿意添加面板在结帐页面.
包含整个签出页表单模板元素。如果您想恢复默认的签出页面模板,可以添加它。
显示购物车中的所有产品和变体欧宝体育在线首页。在完成结账过程之前,购物者可以确认这些是他们想要购买的产品。欧宝体育在线首页
显示购物车的小计、任何税金和运费以及订单的总额。这有助于购物者看到他们所支付的价格的细目。
允许你的顾客跳过默认的结账过程,使用他们的数字钱包(如Apple Pay或谷歌Pay)快速结账离开你的商店。
了解更多关于启用网络支付.
显示在结帐时收集的任何附加信息字段中输入的信息。注意:确保更新订单和结帐确认,因为它们包含独立的标签和字段,不会自动同步。
设计提示:你还可以在这个页面上添加导航栏和页脚,甚至可以添加一个“继续购物”按钮,将用户带回主商店页面。
如果你想使用PayPal,你需要设计一个单独的Checkout (PayPal)模板页面。
如果你不打算在你的网站上使用PayPal,你不需要担心这个页面。如果不启用PayPal作为支付提供商,就无法访问PayPal。
在发布的网站上,当使用PayPal时,购物流程将是这样的:
的结帐页面(贝宝)在启用电子商务时自动创建。
请注意:对于在PayPal功能可用之前已启用电子商务的项目,在向车或结帐页面.如果你错过了这个页面,试着在购物车中添加一个PayPal按钮。
类似于结帐页面, Paypal页面自带默认元素,但您可以从添加面板.
上面的元素结帐页面(贝宝)工作原理和结帐页面,但这两个页面没有链接。您需要手动给它们一个类似的结构和外观。
如果你想用折扣或收集额外的信息签出时,确保将这些元素添加到结帐而且付款(贝宝)页面.
请注意:贝宝不会将您的购物者的整个账单地址发送到Webflow -在发布的网站上付款信息部分将只显示名称和账单地址国家
如果结账时出现错误,购物者将看到各种错误消息。选项可以预览和自定义这些消息付款形式元素并切换到错误在设置面板中的状态。
然后,单击错误消息元素来访问错误消息设置.选择设置中的每条消息以在画布上查看它。若要编辑邮件,请单击当鼠标悬停在邮件上方时出现在设置中邮件旁边的铅笔图标。
请注意:如果您的商店使用PayPal,您将需要自定义相同的错误消息在结帐页面(贝宝)也
提交订单后,在线购物者将被带到订单确认页面。这是另一个电子商务实用程序页面页面的面板>电子商务页面部分.
的订单确认页面附带一个默认模板,您可以完全自定义和风格。不像结帐页面,此页面上的所有组件都可以从添加面板.您可以通过拖拽订单确认组件来添加包含所有块的整个模板。
您可以在订单确认容器中单独添加以下组件:
包含整个订单确认页面模板元素。如果要恢复默认页面模板,可以添加它。
显示购物车中的所有产品和变体欧宝体育在线首页。在完成结账过程之前,购物者可以确认这些是他们想要购买的产品。欧宝体育在线首页
显示了电子邮件而且送货地址客户在结帐表单中提供的。
显示了送货方式选择在结帐。
显示了付款信息而且帐单地址客户在结账时提供的。
请注意:对于PayPal订单,这将只显示名称和账单地址国家,因为PayPal不会发送完整的账单地址到Webflow。
显示了小计马车的任何一个税而且运费,总计的订单。这有助于购物者看到他们所支付的价格的细目。
可用于收集客户数据,如电话号码、礼物信息和个性化说明。
按顺序列出所有可下载文件的列表。了解更多关于数字下载.
设计提示:您可以在该页面上添加导航栏和页脚。你还可以添加一个按钮,将用户带回主商店页面或你的主页。
支付处理器有交易限制。如果购物者的订单总额低于最低或高于最高,他们将在结帐时得到一条错误消息。
交易限制取决于支付处理器和商店货币:
当订单低于最小值时,购物者将在结帐时看到“订单最小值未满足”错误,您可以自定义该错误。了解关于自定义错误消息的更多信息。
有时候,顾客的订单总额可能为零,因为你在赠送东西,或者他们申请了100%的折扣。在本例中,Webflow将从结帐处处理订单,而不将其发送到支付处理器。
免费订单将显示在您的Webflow订单管理器中,但不会显示在您的Stripe或PayPal仪表板中,因为我们不会将这些订单发送到支付处理器。
由于是计算发货前的PayPal checkout启动,所以当发货前的小计为0时,我们无法启动PayPal checkout。这意味着,在仅使用paypal的商店中,当订单小计为0时,购物者将无法完成交易,但他们需要支付运费。
我们建议只使用贝宝的商店提供免运费,或者只使用不需要运费的产品的免运费订单。欧宝体育在线首页在这种情况下,购物者将使用本机结帐页面而不是结帐页面(贝宝).