Conditional Component
Changed on:
3 Feb 2025
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.
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}
22
23
24
25
26
27// Alternative example: to check the product attribute type = JSON and display the value on JSON viewer:
28
29{
30"component": "fc.list",
31"props": {
32 "title": "i18n:fc.products.variantProduct.detail.list.attributes.title",
33 "dataSource": "variantProduct.attributes",
34 "responsiveness": "card",
35 "attributes": [
36 {
37 "label": "i18n:fc.products.variantProduct.detail.list.attributes.column.name.heading",
38 "template": "{{name}}"
39 },
40 {
41 "label": "i18n:fc.products.variantProduct.detail.list.attributes.column.type.heading",
42 "template": "{{type}}"
43 },
44
45 {
46 "label": "i18n:fc.products.variantProduct.detail.list.attributes.column.value.heading",
47 "type": "component",
48 "options": {
49 "component": "fc.page.section",
50 "descendants": [
51 {
52 "component": "fc.conditional",
53 "props": {
54 "value": "{{type}}",
55 "matches": "JSON"
56 },
57 "descendants": [
58 {
59 "component": "fc.attribute.json",
60 "dataSource": "value"
61 }
62 ]
63 },
64 {
65 "component": "fc.conditional",
66 "props": {
67 "value": "{{eq type 'JSON'}}",
68 "matches": "false"
69 },
70 "descendants": [
71 {
72 "component": "fc.mystique.collapsible.text",
73 "props": {
74 "text": "{{value}}",
75 "charCutoff": 100
76 }
77 }
78 ]
79 }
80 ]
81 }
82 }
83 ]
84}
85}
86
87
88
89
90
91
92
Language: json
Version History
v1.0.0
First release
Recommended Placement
None