回所有课程
课程库

有条件的可见性

使用条件的可见性来显示或隐藏元素在动态设计和创建独特的设计集合项目基于不同的标准。

这个视频老UI特性。更新版本即将到来!
克隆这个项目


能见度条件的最通用的方法是显示或隐藏元素在动态设计和创建独特的设计基于不同的标准不同的收集物品。不像过滤器——指定集合项集合列表中可见——条件指定当任何元素(静态或动态)是可见的集合列表或一组页面。

在这节课中:
  1. 设置条件的可见性
  2. 理解条件规则
  3. 理解环境与过滤器
  4. 支持你的电子商务项目条件的可见性
示例用例:
  • 显示或隐藏集合中的一个元素列表
  • 显示或隐藏一个标签
  • 突出当前项
  • 一组页面上显示或隐藏部分
  • 添加一个“商店”接徽章如果产品不是可交付(电子商务)欧宝体育在线首页
  • 显示或隐藏一个销售徽章取决于compare-at-price设置(电子商务)
  • 显示或隐藏“免费送货”徽章根据订单小计(电子商务)
  • 显示或隐藏特定消息当航运到某些国家(电子商务)

设置条件的可见性

能见度条件指定当一个元素是可见的。条件是基于一个字段的值或集合中的项目列表页面或集合。

每个集合字段类型有不同的条件你可以选择从。

能见度条件面板包括一个+图标以添加一个条件。如果没有条件目前补充道,没有消息显示条件下部分。

设置一个条件:

  1. 静态或动态,选择一个元素在集合列表或一组页面上,你想要只显示当一个特定的条件满足
  2. 新闻D打开设置面板
  3. 有条件的可见性节中,添加一个条件通过单击+(+)按钮
  4. 在第一个下拉,选择你想要的字段可见性的基础上
  5. 在第二个下拉选择条件
  6. 如果需要指定一个值
  7. 点击保存

你可以添加你想要尽可能多的条件。当多个应用条件,这意味着所有条件必须得到满足是可见的。你可以点击旁边的垃圾桶图标删除条件的条件。

理解条件规则

条件规则,过滤规则一样也有实地或基于项目。

实地条件

实地条件给定的字段时生效:

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

基于项目的条件

基于项目条件适用于项目集合时不是当前的项目。

理解环境与过滤器

收藏列表过滤允许您显示或隐藏集合集合中的项目列表基于规则。

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

能见度条件时使用相同的规则来显示或隐藏元素在集合列表或收藏页面。

在左边,一个有特色的文本块标签被选中。在右边,文本块设置一个条件”了吗?“能见度条件下面板。

例如,您可以使用规则”特色(开关)是在“显示“特色”文本标签为特色的博客帖子和隐藏这个标签元素的特色开关设置为关闭。

另一方面,如果您希望只显示文章列表中,您可以设置相同的规则过滤器在收藏列表。

在左边,两个特色博文显示在列表集合包装。在右边,收藏列表设置使用一个源称为博客和过滤器”特色?”。

例子

以下是一些方法可以应用条件和过滤器。

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

假设有一组列表包含团队成员和一些有一个电子邮件地址,但其他人没有。在你的收藏列表中,你有一个文本链接,将URL从电子邮件字段。

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

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

显示或隐藏一个标签

说你有一个收集博客文章的列表,你想展示特色项目的“特色”的标签。因为任何元素添加到收藏列表出现在所有收集项目,您可以使用条件能见度隐藏这个元素项不符合条件:“特色”。

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

突出当前项

假设你有一个博客在一篇博客文章列表页面集合。这个列表还包括当前博客的博客条目,你目前的页面。您可以隐藏当前博客使用过滤器,或者,你可以强调它通过创建第二个设计项目集合。

集合包装包括8张博文列表。两人很快和六发布与阅读更多按钮进入。

现在,你将有2表示每个集合中的每个博客条目集合列表中。

在navigator项目包括一篇项目集合包装和博客列表项。

既然你想展示独特的设计只对当前的博客,你需要做两件事:

  1. 添加一个条件隐藏第一设计:“发布项目包装”在本例中,为当前项目
  2. 添加一个条件显示新的设计:“当前项目包装”在本例中,只对当前项
在左边,一篇项目包装被选中。在右边,编辑条件面板包括设置博客不是“时”元素是可见的。
在左边,一篇博文列表项被选中。在右边,编辑条件面板包括博客的设置是“时”元素是可见的。

一组页面上显示或隐藏部分

你可能有一个部分,你只需要显示在某些页面集合。您可以创建一个条件,本节和所有的孩子只有可见的,例如,当类别是“圣诞节”。

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

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

创造出独特的设计在你的电子商务商店。使用条件的可见性来显示或隐藏元素根据产品或订单数据,突出产品属性在付款或提供额外的信息。欧宝体育在线首页

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

领带的具体设计独特的产品变体通过设置条件可见性等不同领域的主要欧宝体育在线首页形象,compare-at-price,长度,宽度,SKU等等。

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

  1. 选择您想要的元素是可见的,当满足一定的条件
  2. 在设置面板,添加一个条件
  3. 选择一个产品领域(例如,compar欧宝体育在线首页e-at-price)下拉菜单
  4. 设置一个条件(例如,存在或等于一个特定的值)
  5. 保存

相同的横幅或调出概念可以应用于产品变体使用SKU能见度条件选项。欧宝体育在线首页你想创建callout元素并将其设置为只显示如果产品变体被选中。欧宝体育在线首页

示例用例:

  • 添加一个“商店”接徽章如果产品不是可交付欧宝体育在线首页
  • 显示或隐藏设置销售取决于compare-at-price徽章


例子与compare-at-price字段标记添加到产品集。欧宝体育在线首页

添加条件面板右下角的设计师突出显示。
左边的一个例子,一个条件是设置为”元素是可见的,当名字=值”。右边的第二个例子,是设置为”元素是可见的,当Compare-at价格设置”。


销售的例子徽章更新生活在浏览产品时。欧宝体育在线首页

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

您可以添加横幅或插图的编号,取决于付款信息。例如,横幅可以根据显示购物车,小计,或航运信息。

设置条件能见度在结帐页面:

  1. 选择您想要的元素是可见的,当满足一定的条件
  2. 添加一个条件
  3. 选择一个航运领域(例如,小计)的下拉菜单
  4. 设置一个条件(例如,存在或等于一个特定的值)
  5. 保存

示例用例

  • 显示或隐藏“免费送货”徽章根据订单小计
  • 显示或隐藏特定消息当航运到某些国家
要知道:当设置条件根据国家或能见度帐单地址,国家必须输入分别由两个字母组成的缩写。例如,美国需要进入美国。
重要的知道:当添加一个条件基于价格、数量应格式化为1000.00 -使用一个点分离器作为十进制不管价格格式设置为你的商店。例如,100年,50 100.50€应该进入
试一试!

学习如何使用条件能见度玩儿得开心吗这个活动项目

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