Fluent Commerce Logo
Docs
Sign In

Conditional Component

UI Component

Changed on:

4 July 2024

Overview

Optionally render descendants only if certain criteria are met. This can be used to show different components depending on the results of the page query, for example:

  • a different location card when the order is home delivery vs customer collection
  • a completely different screen when a wave is in a given state
Plugin NameCore

The standard library of mystique components. 

0000-00-00

v1.0.0

Initial changelog entry.

Alias

fc.conditional

Detailed technical description

n/a

Properties

Name

Type

Required

Default

Description

value

`string`

yes

n/a

Template string to compare against the match value

matches

`string`
 or 
`string[]`

yes

n/a

Value or list of strings to compare the value against

Configuration example

1{
2    "component": "fc.conditional",
3    "props": {
4         "value": "{{order.type}}",
5         "matches": "HD"
6    },
7    "descendants": [ /* content to display if the order is home delivery */ ]
8}
9
10
11// on the same page, we can use a second conditional for click and collect orders. Only the one that matches will be rendered.
12
13
14{
15    "component": "fc.conditional",
16    "props": {
17         "value": "{{order.type}}",
18         "matches": "CC"
19    },
20    "descendants": [ /* content to display if the order is home delivery */ ]
21}

Language: json

Version History

2023-08-01

v1.0.0

First release

Recommended Placement

None

Copyright © 2024 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.

Fluent Logo