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 Name | Core |
|---|
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 | | yes | n/a | Template string to compare against the match value |
matches | | 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
