回到所有的课程
课程库

有条件的可见性

使用条件可见性来显示或隐藏动态设计中的元素,并根据不同的条件为Collection项创建独特的设计。

本视频采用了旧的用户界面。更新版本即将到来!
克隆这个项目


条件可见性是在动态设计中显示或隐藏元素以及基于不同标准为不同Collection项创建独特设计的最通用方法。不像过滤器条件指定任何元素(静态或动态)在集合列表或集合页面中何时可见。

在这节课中:
  1. 设置条件的可见性
  2. 理解条件规则
  3. 了解条件与过滤器
  4. 支持您的电子商务项目有条件的可见性
示例用例:
  • 显示或隐藏集合列表中的元素
  • 显示或隐藏标签
  • 高亮显示当前项目
  • 显示或隐藏“收集”页上的某个部分
  • 如果产品不能发货,添加一个“在商店中挑选”的徽章(电子商务)欧宝体育在线首页
  • 显示或隐藏销售标识,取决于是否设置了比较价格(电子商务)
  • 显示或隐藏“免费送货”徽章取决于订单小计(电子商务)
  • 在向特定国家发货时显示或隐藏特定信息(电子商务)

设置条件的可见性

条件可见性指定元素何时可见。条件基于所处的“收集”列表或“收集”页中的字段或项的值。

每个Collection字段类型都有不同的条件可供选择。

条件可见性面板包含一个加号图标,用于添加条件。如果当前没有添加任何条件,在“条件”部分将显示“None”。

设置条件:

  1. 在集合列表内或集合页上选择您希望仅在满足特定条件时才显示的元素(静态或动态)
  2. 新闻D打开设置面板
  3. 有条件的可见性节中,添加一个条件点击加号(+)按钮
  4. 在第一个下拉框中,选择您希望可见性基于的字段
  5. 在第二个下拉列表中选择条件
  6. 如果需要,请指定一个值
  7. 点击保存

您可以添加任意数量的条件。当应用多个条件时,这意味着它必须满足所有条件才能可见。单击条件旁边的垃圾图标可以删除条件。

理解条件规则

与筛选规则一样,条件规则要么基于字段,要么基于项。

实地条件

基于字段的条件在给定字段时生效:

  • 设置没有设置
  • =不等于一个特定的值
  • 包含不包含一个特定的值
  • 大于不到,或一个数字之间的两个数值
  • 是在
  • 属于某个日期范围

基于项目的条件

当收集项时应用基于项的条件不是当前的项目。

了解条件与过滤器

收藏列表过滤允许您根据规则在集合列表中显示或隐藏集合项。

添加过滤器下拉菜单包括日期写,文章主体,文章摘要,主图像,缩略图,特色?和博客文章。

而条件可见性则使用相同的规则来显示或隐藏集合列表中或集合页面上的元素。

在左侧,选择了一个特色文本块标记。在右边,文本块设置有一个条件“Featured?”在“条件可见性”面板下。

例如,您可以使用规则“Featured (switch) is on”来为特色博客文章显示一个“Featured”文本标签,并为那些将特色开关设置为关闭的元素隐藏这个标签。

另一方面,如果您希望只在列表中显示有特色的帖子,您可以将此规则设置为Collection列表中的过滤器。

在左侧的Collection List包装器中显示了两篇特色博客文章。在右边,集合列表设置使用一个名为Blog posts的源,并有一个“Featured?””。

例子

下面是一些应用条件和过滤器的方法。

显示或隐藏集合列表中的元素

假设您有一个包含团队成员的Collection列表,其中一些成员有电子邮件地址,而另一些则没有。在Collection列表中,有一个文本链接,用于从电子邮件字段中提取URL。

让我们看看如何为没有列出电子邮件地址的团队成员隐藏文本链接:

  1. 选择文本链接
  2. 添加一个条件声明当设置电子邮件地址字段时,元素是可见的
  3. 保存
添加条件面板包括元素的两个下拉菜单,当。条件设置包括“电子邮件(作者)”、“已设置”。在面板的底部有一个保存按钮。
此条件在连接到电子邮件字段的文本链接上设置。

显示或隐藏标签

假设您有一个博客文章的Collection列表,您希望为特色条目显示一个“Featured”标签。因为在集合列表中添加的任何元素都会出现在所有集合项中,所以您可以使用条件可见性来对不满足条件的项隐藏此元素:“Featured is on”。

  1. 在你的博客文章收集列表中创建一个“特色”标签
  2. 选择标签
  3. 添加一个条件说明元素是可见的功能?(开关)
  4. 点击保存

高亮显示当前项目

假设在博客文章Collection页面上有一个博客文章列表。此列表还包括当前博客文章的博客文章项,即您当前所在的页面。您可以使用隐藏当前的博客文章过滤器,或者,您可以通过为Collection项创建第二个设计来突出显示它。

收集列表包装包括8张博客明信片。其中两个很快就会出现,而另外六个则带有阅读按钮进入帖子。

现在,在Collection列表的每个Collection项中,每个博客文章都有两个表示形式。

在导航器中,集合项包括发布项包装器和博客发布列表项。

因为你想显示独特的设计仅为当前的博客文章,你需要做两件事:

  1. 添加一个条件来隐藏第一个设计:在本例中为当前项添加“Post item wrapper”
  2. 添加一个条件来显示新的设计:在本例中为“当前post项目包装器”,仅针对当前项目
在左侧,选择了一个邮件项包装器。在右边,编辑条件面板包括设置博客文章不是为“元素是可见的时候”。
在左侧,选择了一个博客文章列表项。在右边,编辑条件面板包括设置博客文章是“元素是可见的时候”。

显示或隐藏“收集”页上的某个部分

您可能有一个部分只想在特定的集合页面上显示。您可以创建一个条件,使该节及其所有子节仅在类别为“Christmas”时可见。

  1. 选择的部分
  2. 添加一个条件
  3. 选择类别字段在第一个下拉列表中
  4. 选择=在第二个下拉列表中
  5. 指定圣诞节作为价值
  6. 保存
您可以在各种集合字段指南中看到更多示例和用例。

支持您的电子商务项目有条件的可见性

在您的电子商务商店创造独特的设计。使用条件可见性根据产品或订单数据显示或隐藏元素-在签出时突出显示产品属性或提供附加信息。欧宝体育在线首页

显示或隐藏基于产品和产品变量字段的元素欧宝体育在线首页

通过在不同字段(如主图像、价格比较、长度、宽度、SKU等)上设欧宝体育在线首页置条件可见性,将特定设计与独特的产品变体联系起来。

显示或隐藏特定产品变体的元素:欧宝体育在线首页

  1. 选择您希望在满足特定条件时可见的元素
  2. 在设置面板中,添加一个条件
  3. 在下拉菜单中选择一个产品字段(例如,欧宝体育在线首页compare-at-price)
  4. 设置一个条件(例如,存在或等于一个特定值)
  5. 保存

使用SKU条件可见性选项,可以将相同的横幅或标注概念应用于产品变体。欧宝体育在线首页创建您心中的标注元素,并将其设置为仅在选择产品变体时显示。欧宝体育在线首页

示例用例:

  • 如果产品无法发货,可以添加“在商店领取”的标识欧宝体育在线首页
  • 显示或隐藏销售徽章取决于是否设置比价


示例将销售徽章添加到具有比较价格字段集的产品。欧宝体育在线首页

添加条件面板在设计器的右下方突出显示。
左边的例子一,条件设置为“当Name等于一个值时元素可见”。右边的第二个例子,一个条件被设置为“设置比较价格时元素可见”。


在浏览产品时实时更新销售标识的例子。欧宝体育在线首页

根据产品订单数据显示或隐藏签出流程中的元素欧宝体育在线首页

您可以添加依赖于签出信息的横幅或标注。例如,可以根据购物车总数、小计总数或运输信息显示横幅。

设置签出页面的条件可见性:

  1. 选择您希望在满足特定条件时可见的元素
  2. 添加一个条件
  3. 在下拉菜单中选择一个发货字段(例如,Subtotal)
  4. 设置一个条件(例如,存在或等于一个特定值)
  5. 保存

示例用例

  • 显示或隐藏“免费送货”徽章取决于订单小计
  • 显示或隐藏特定的消息时,航运到某些国家
要知道:当基于国家或账单地址设置条件可见性时,必须将国家输入为分别由两个字母组成的缩写.例如,美国需要以US的身份进入。
重要的是要知道:当添加基于价格的条件时,金额应该格式化为1000.00—使用点分隔符作为小数点—无论您的商店的价格格式化设置如何。例如,100,50€应该输入为100.50
试一试!

在学习如何使用条件可见性的乐趣这个活动项目

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