Conditional Component

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