# 有條件的可見性

有條件的可見性是在動態設計中顯示或隱藏元素的最適用的方法，並根據不同的標準為不同的集合項目創建獨特的設計。

與過濾器不同--過濾器指定哪些集合項目在集合列表中可見--條件指定任何元素（靜態或動態）在集合列表或集合頁面中何時可見。

本文會提到：

1. 設置條件的可見性
2. 理解條件規則
3. 理解條件與過濾器
4. 用條件可見性支持您的電子商務項目

**舉例**

• 在一個集合列表中顯示或隱藏元素

• 顯示或隱藏標籤

• 突出當前項目

• 顯示或隱藏集合頁面中的一個部分

• 如果產品不能運輸，添加"到店取貨"的徽章（電子商務）

• 根據是否設置了價格比較，顯示或隱藏銷售徽章(電子商務)

• 根據訂單小計顯示或隱藏"免運費"徽章（電子商務）

• 在向某些國家發貨時，顯示或隱藏特定的信息（電子商務）

## 設置條件的可見性

有條件的可見性指定元素何時可見。這個條件是基於一個字段的值或您所處的集合列表或集合頁面中的項目。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FUDII3IgjTHm5SfKONoWh%2Fimage.png?alt=media\&token=1d4ebe36-feb3-4f51-9d44-f931f04be867)

如何設定條件：

1. 選擇一個元素，靜態的或動態的，在集合列表內或集合頁面上，您想在滿足特定條件時才顯示的元素
2. 按D鍵，打開設置面板
3. 在條件可見性部分，通過點擊加號（+）按鈕添加一個條件
4. 在第一個下拉選單中，選擇想要的可見性所基於的領域
5. 在第二個下拉選單中選擇條件
6. 如果需要，指定一個值
7. 點擊保存

您可以根據您的需要添加條件。 當應用多個條件時，必須滿足所有的條件，才能使其可見。您可以通過點擊條件旁邊的垃圾桶圖標來刪除條件。

## 理解條件規則

條件規則像過濾規則一樣，基於字段或是基於項目。

**基於字段的條件**

• 被設置或未被設置

• 等於或不等於某個值

• 包含或不包含某個值

• 大於，小於，或者是兩個數值之間的一個數字

• 開或關

• 屬於某個日期範圍

**基於項目的條件**

基於項目的條件適用於當一個集合項目是或不是當前項目時。

## 理解條件與過濾器

集合列表過濾器允許您根據一個規則在集合列表中顯示或隱藏集合項目。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F8lZKwmSxbYump5BK3xH8%2Fimage.png?alt=media\&token=0ce1ecf0-9334-4260-bce8-46cea70a11fb)

而條件性可見性使用相同的規則來顯示或隱藏集合列表內或集合頁面上的元素。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FLiTLPoZ7oWJPpi89eSeY%2Fimage.png?alt=media\&token=c556f6fb-eb77-4d16-b829-37466532637d)

例如，您可以使用規則"特色（開關）是打開的"來顯示特色博客文章的"特色"文本標籤，並對特色開關設置為關閉的元素隱藏這個標籤。

另一方面，如果您希望只在列表中顯示有特色的文章，您可以將這一規則設定為集合列表的過濾器。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FBF5KARBRWtzjS8nISNQR%2Fimage.png?alt=media\&token=2ccced39-d933-4069-90fd-3d09fe3633c9)

## 例子

以下是一些您可以應用條件和過濾器的方法。

### 在集合列表中顯示或隱藏一個元素

假設有一個包含團隊成員的集合列表，一些人有電子郵件地址，但其他人沒有。在收集列表中，您有一個文本連結，從電子郵件字段中提取URL。

讓我們看看如何為那些沒有電子郵件地址的團隊成員隱藏文本連結。

1. 選擇文本連結
2. 添加一個條件，說明當電子郵件地址字段被設定時，該元素是可見的
3. 保存

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FlKrU2Borqj74sztXZh6j%2Fimage.png?alt=media\&token=72558e0c-cb9a-4589-bfc9-3dca44bcba19)

### 顯示或隱藏一個標籤

假設您有一個部落格文章的集合列表，您想為特色項目顯示一個 "特色"標籤。 因為任何添加在集合列表中的元素都會出現在所有的集合項目中，您可以使用條件可見性來隱藏不符合條件的項目中的這個元素："特色項目已開啟"。

1. 在您的部落格文章集合列表中創建一個"特色"標籤
2. 選擇該標籤
3. 添加一個條件，說明該元素在"精選"時是可見的？
4. 點擊保存

### 突出顯示當前項目

假設您在一個文章收集頁面上有一個文章列表。這個列表還包括當前文章的文章項目，也就是您目前所在的頁面。

您可以用過濾器來隱藏這個當前的文章，或是您可以為系列項目創建第二個設計來突出它。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FIkD7fYh5HzDZrtq4bM7o%2Fimage.png?alt=media\&token=743711b9-7811-4fab-88c5-83d3b5a2ba05)

現在集合列表中的每個收藏品項目中為每篇文章有2個代表。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FCP2repbBTWcgJYthnYNS%2Fimage.png?alt=media\&token=2e181315-f573-4daf-acbf-93bf408ea7e9)

由於您想只為當前的部落格文章顯示獨特的設計，您需要做兩件事：

1. 添加一個條件來隱藏第一個設計。在這個例子中，為當前項目添加一個條件，隱藏第一個設計："Post item wrapper"。
2. 添加一個條件來顯示新的設計。本例中的"當前的文章包裝"，只針對當前的文章。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FMRMDy7FyD8Sb2XBUwXSR%2Fimage.png?alt=media\&token=f6d9db3d-a529-4586-89f3-6f253f95e061)

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FpAvFmORtQ6ULGKBeqo5j%2Fimage.png?alt=media\&token=9f09f7f9-5735-4250-a9f8-5934a17e3fac)

### 在集合頁面上顯示或隱藏一個部分

您可能有一個部分只想在某些集合頁面上顯示，您可以創建一個條件，使這個部分和它的所有子部分都只顯示，例如當類別是"聖誕節"時：

1. 選擇該部分
2. 添加一個條件
3. 在第一個下拉選單中選擇"類別"字段
4. 在第二個下拉選單中選擇等值
5. 將"聖誕節"指定為值
6. 保存

## 用有條件的可見性支持您的電商項目

在您的電子商務商店中創建獨特的設計。使用條件可見性來顯示或隱藏基於產品或訂單數據的元素--突出產品屬性或在結帳時提供額外訊息。

### 根據產品和產品變體字段顯示或隱藏元素

通過對變體字段（如主圖、價格比較、長度、寬度、SKU等）設定條件可見性，將特定設計與獨特的產品變體聯繫起來。

要顯示或隱藏獨特產品變體的元素：

1. 選擇想在滿足某個條件時顯示的元素
2. 在設置面板上，添加一個條件
3. 在下拉選單中選擇一個產品字段（例如，比較價格）
4. 設置一個條件（例如，存在或等於一個特定的值）
5. 保存

使用SKU條件可見性選項，同樣的橫幅或呼出概念可以應用於產品變體。創建心目中的呼出元素，並將其設置為只在產品變體被選中時顯示。

**範例**

• 如果產品不能發貨，添加一個"到店提貨"的徽章

• 根據是否設置了價格比較，顯示或隱藏一個銷售徽章

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FIn6bty2eKeWVzXEo7laz%2Fimage.png?alt=media\&token=81709fec-46fb-4dab-b292-0b96679211ae)

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FFtnSO5CLrEhRzj3I97Ur%2Fimage.png?alt=media\&token=b9907762-7a31-43c1-9c95-68401f90c942)

### 根據產品訂單數據顯示或隱藏結帳流程中的元素

您可以添加取決於結帳訊息的橫幅或呼出。例如一個橫幅可以根據購物車的總額、小計或運輸訊息來顯示。

要在結帳頁面設置有條件的可見性：

1. 選擇您想在滿足某個條件時顯示的元素
2. 添加一個條件
3. 在下拉選單中選擇一個發貨字段（如小計）
4. 設定一個條件（例如，存在或等於一個特定的值）
5. 保存

**範例**

• 根據訂單小計，顯示或隱藏"免運費"徽章

• 向某些國家發貨時，顯示或隱藏特定的訊息

**重要提示**

當根據國家或帳單地址設定有條件的可見性時，國家必須被輸入為2個字母的縮寫，例如美國需要被輸入為US。

**重要提示**

當添加一個基於價格的條件時，金額應該被格式化為1000.00--使用一個點分隔符作為小數點--不管您的商店的價格格式設置如何。例如100,50歐元應該被輸入為100.50。