Docs
Changed on:
19 July 2024
The Image Card Component enables you to display an image alongside other components within a card.
For example, you can place download buttons below an image to prompt the reader to interact with the buttons.
| Plugin Name | Core |
|---|
The standard library of mystique components.
Initial changelog entry.
fc.card.image
The component presents as a card, with an image as the foreground object. You can then add in other components and determine their size and position within the card.
1{
2 "component": "fc.card.image",
3 "props": {
4 "width": 3,
5 "indent": true,
6 "image": {
7 "imageUrl": "https://c.static-nike.com/a/images/f_auto,b_rgb:f5f5f5,w_440/skwgyqrbfzhu6uyeh0gg/air-max-270-shoe-nnTrqDGR.jpg"
8 }
9 },
10 "descendants": [
11 {
12 "component": "fc.accordion",
13 "props": {
14 "summary": "Product Details",
15 "details": "A blend of cutting-edge comfort and street-smart style, designed for those who demand peak performance and unmatched durability. Elevate your everyday look while enjoying cloud-like cushioning and unbeatable traction with every step."
16 }
17 }
18 ]
19}Language: plain_text
Name: Image Card with accordion
Description:
Manifest configuration example
Example:
1{
2 "component": "fc.card.image",
3 "props": {
4 "width": 3,
5 "indent": true,
6 "image": {
7 "imageUrl": "https://c.static-nike.com/a/images/f_auto,b_rgb:f5f5f5,w_440/skwgyqrbfzhu6uyeh0gg/air-max-270-shoe-nnTrqDGR.jpg"
8 }
9 },
10 "descendants": [
11 {
12 "component": "fc.mystique.collapsible.text",
13 "props": {
14 "charCutoff": 1000,
15 "text": "Text"
16 }
17 }
18 ]
19}Language: plain_text
Name: Image Card with collapsable text
Description:
Manifest configuration example
Example:
1{
2 "manifestVersion": "2.0",
3 "routes": [
4 {
5 "type": "page",
6 "path": "collections/carrier",
7 "component": "fc.page",
8 "nav": {
9 "label": "i18n:fc.sf.ui.carrierCollections.index.nav",
10 "icon": "local_shipping",
11 "badge": {
12 "queryName": "articlesByLocation",
13 "variables": {
14 "fromLocation": [
15 {
16 "id": "{{activeLocation.id}}"
17 }
18 ],
19 "status": [
20 "COURIER_COLLECTION"
21 ],
22 "type": [
23 "HD",
24 "CC",
25 "MULTI"
26 ]
27 }
28 }
29 },
30 "props": {
31 "title": "i18n:fc.sf.ui.carrierCollections.index.title",
32 "showUserActions": true
33 },
34 "data": {
35 "query": "query ($fromLocation: ID, $status: [String!], $type: [String!]) { articlesByLocation( fromLocation: [{id: $fromLocation}] status: $status orderType: $type ) { pageInfo { hasNextPage hasPreviousPage __typename } edges { cursor node { id ref name type status items { edges { node { id quantity barcode article { ref __typename } __typename } __typename } __typename } fulfilments { edges { node { order { id ref type fulfilmentChoice { deliveryType } customer { firstName lastName primaryEmail primaryPhone __typename } __typename } __typename } __typename } __typename } storageArea { id name type __typename } carrierConsignmentArticles { edges { node { carrierConsignment { status carrier { name __typename } __typename } __typename } __typename } } } } }}",
36 "variables": {
37 "status": [
38 "COURIER_COLLECTION"
39 ],
40 "fromLocation": "{{activeLocation.id}}",
41 "type": [
42 "HD",
43 "CC",
44 "MULTI"
45 ]
46 }
47 },
48 "descendants": [
49 {
50 "component": "fc.list",
51 "dataSource": "articlesByLocation",
52 "props": {
53 "actions": [
54 {
55 "type": "UserAction",
56 "name": "ARTICLE_COLLECTED"
57 }
58 ],
59 "filter": {
60 "enabled": true,
61 "exclude": [
62 "workflowRef",
63 "workflowVersion"
64 ]
65 },
66 "attributes": [
67 {
68 "label": "i18n:fc.om.orders.index.list.column.orderRef.heading",
69 "value": "{{node.fulfilments.edges.0.node.order.ref}}"
70 },
71 {
72 "label": "i18n:fc.sf.ui.customerCollections.index.list.column.customer.heading",
73 "value": "{{node.fulfilments.edges.0.node.order.customer.firstName}} {{node.fulfilments.edges.0.node.order.customer.lastName}}"
74 },
75 {
76 "label": "i18n:fc.om.fulfilment.detail.list.articles.column.articleRef.heading",
77 "value": "{{node.ref}}",
78 "link": "#/collections/carrier/{{node.id}}"
79 },
80 {
81 "label": "i18n:fc.sf.ui.courierCollections.detail.list.awaitingCollection.column.consigmentStatus.heading",
82 "value": "{{node.carrierConsignmentArticles.edges.0.node.carrierConsignment.status}}",
83 "options": {
84 "styles": [
85 {
86 "matches": [
87 "FAILED"
88 ],
89 "icon": {
90 "name": "MdError",
91 "color": "D23038"
92 }
93 },
94 {
95 "matches": [
96 "ACTIVE_LODGED"
97 ],
98 "icon": {
99 "name": "MdCheckCircle",
100 "color": "38A64C"
101 }
102 },
103 {
104 "icon": {
105 "name": "loading"
106 }
107 }
108 ]
109 }
110 },
111 {
112 "label": "i18n:fc.om.orders.index.list.column.orderType.heading",
113 "value": "{{node.fulfilments.edges.0.node.order.type}}"
114 },
115 {
116 "label": "i18n:fc.om.fulfilment.detail.card.summary.attribute.deliveryType.label",
117 "value": "{{node.fulfilments.edges.0.node.order.fulfilmentChoice.deliveryType}}"
118 },
119 {
120 "label": "i18n:fc.admin.carriers.detail.title",
121 "value": "{{node.consignmentArticles.edges.0.node.consignment.carrier.name}}"
122 }
123 ]
124 }
125 }
126 ]
127 },
128 {
129 "type": "page",
130 "path": "collections/carrier/:id",
131 "component": "fc.page",
132 "props": {
133 "title": "i18n:fc.om.article.detail.title",
134 "actions": {
135 "userActionExtensions": {
136 "ARTICLE_COLLECTED": {
137 "postSubmit": {
138 "type": "navigate",
139 "link": "/collections/carrier"
140 }
141 }
142 }
143 },
144 "backButtons": [
145 {
146 "path": "collections/carrier",
147 "menuLabel": "i18n:fc.sf.ui.carrierCollections.index.nav"
148 }
149 ]
150 },
151 "data": {
152 "query": "query articleById($article_id: ID!, $categories_first: Int, $items_first: Int, $fulfilments_first: Int) { articleById(id: $article_id) { id consignmentArticles { edges { node { consignment { id __typename } __typename } __typename } __typename } fulfilments(first: $fulfilments_first) { edges { node { id ref order { customer { firstName lastName primaryEmail primaryPhone __typename } __typename } items(first: $items_first) { pageInfo { hasNextPage hasPreviousPage __typename } edges { cursor node { ref filledQuantity orderItem { product { name ... on StandardProduct { ref gtin name attributes { name value __typename } categories(first: $categories_first) { edges { node { name __typename } __typename } __typename } __typename } ... on GroupProduct { ref name attributes { name value __typename } categories(first: $categories_first) { edges { node { name __typename } __typename } __typename } catalogue { ref __typename } __typename } ... on VariantProduct { ref gtin name attributes { name value __typename } categories(first: $categories_first) { edges { node { name __typename } __typename } __typename } catalogue { ref __typename } __typename } __typename __typename } __typename } __typename } __typename } __typename } __typename } __typename } __typename } __typename }}",
153 "variables": {
154 "categories_first": 1,
155 "items_first": 1,
156 "fulfilments_first": 1,
157 "article_id": "{{params.id}}"
158 }
159 },
160 "descendants": [
161 {
162 "component": "fc.page.section.header",
163 "props": {
164 "title": "i18n:fc.sf.article.details.title"
165 },
166 "descendants": []
167 },
168 {
169 "component": "fc.card.image",
170 "props": {
171 "width": 3,
172 "indent": true,
173 "image": {
174 "imageUrl": "https://c.static-nike.com/a/images/f_auto,b_rgb:f5f5f5,w_440/skwgyqrbfzhu6uyeh0gg/air-max-270-shoe-nnTrqDGR.jpg",
175 "height": "300px"
176 }
177 },
178 "descendants": [
179 {
180 "component": "fc.button.print",
181 "props": {
182 "label": "PRINT PACK SLIP",
183 "setting": "example.wave.pick.print",
184 "position": {}
185 }
186 },
187 {
188 "component": "fc.button.print",
189 "props": {
190 "label": "PRINT ORDER LABEL",
191 "setting": "example.wave.pick.print"
192 }
193 }
194 ]
195 },
196 {
197 "component": "shared.components.material.DynamicCard",
198 "props": {
199 "title": "i18n:fc.om.customers.detail.title",
200 "width": 4,
201 "dataSource": "articleById",
202 "attributes": [
203 {
204 "label": "i18n:fc.om.orders.detail.card.customer.attribute.customerName.label",
205 "value": "{{fulfilments.edges.0.node.order.customer.firstName}} {{fulfilments.edges.0.node.order.customer.lastName}}"
206 },
207 {
208 "label": "i18n:fc.om.orders.detail.card.customer.attribute.email.label",
209 "value": "{{fulfilments.edges.0.node.order.customer.primaryEmail}}"
210 },
211 {
212 "label": "i18n:fc.om.orders.detail.card.customer.attribute.phoneNo..label",
213 "value": "{{fulfilments.edges.0.node.order.customer.primaryPhone}}"
214 }
215 ]
216 }
217 },
218 {
219 "component": "shared.components.material.DynamicCard",
220 "props": {
221 "title": "Details",
222 "width": 5,
223 "dataSource": "articleById",
224 "attributes": [
225 {
226 "label": "Weigth",
227 "value": "1 kg"
228 },
229 {
230 "label": "Height",
231 "value": "50 cm"
232 },
233 {
234 "label": "Width",
235 "value": "50 cm"
236 },
237 {
238 "label": "Length",
239 "value": "50 cm"
240 }
241 ]
242 }
243 },
244 {
245 "component": "fc.list",
246 "dataSource": "articleById.fulfilments.edges.0.node.items",
247 "props": {
248 "title": "i18n:fc.om.article.detail.list.articleItems.title",
249 "attributes": [
250 {
251 "label": "i18n:fc.sf.ui.courierCollections.detail.list.awaitingCollection.column.productImage.heading",
252 "type": "image",
253 "options": {
254 "height": 50
255 },
256 "value": "{{node.orderItem.product.attributes.byName.imageUrl}}"
257 },
258 {
259 "label": "i18n:fc.gi.standard_product_detail.detail.title",
260 "value": "{{node.orderItem.product.ref}}"
261 },
262 {
263 "label": "i18n:fc.gi.products.detail.card.summary.attribute.description.label",
264 "value": "{{node.orderItem.product.name}}"
265 },
266 {
267 "label": "i18n:fc.sf.ui.courierCollections.detail.list.awaitingCollection.column.quantity.heading",
268 "value": "{{node.filledQuantity}}"
269 }
270 ]
271 }
272 }
273 ]
274 }
275 ]
276}Language: json
Name: Image Card utilization on the Article Details page in the Fluent Store
Description:
Image Card utilization example
Visualization:
Name | Type | Required | Default | Description |
image | | yes | none | An object containing image URL and dimensions (width and height) |
width | | no | 12 | Define the width of this card on a 12-column grid. Can use the named widths for readability or numbers directly. On mobile devices, all widths will automatically change to 12 for the best responsive experience. |
indent | | no | - | Indent between image and descendants. |
descendantSpacing | | no | | The property defines the spacing between descendants. Examples:   |
Name | Type | Required | Default | Description |
height | | no | - | Image height Examples: |
width | | no | - | Image width Examples: |
imageUrl | | no | - | Image URL |
1{
2 "component": "fc.card.image",
3 "props": {
4 "width": 3,
5 "indent": true,
6 "image": {
7 "imageUrl": "https://c.static-nike.com/a/images/f_auto,b_rgb:f5f5f5,w_440/skwgyqrbfzhu6uyeh0gg/air-max-270-shoe-nnTrqDGR.jpg",
8 "height": "300px"
9 }
10 },
11 "descendants": [
12 {
13 "component": "fc.button.print",
14 "props": {
15 "label": "PRINT PACK SLIP",
16 "setting": "example.wave.pick.print",
17 "position": {}
18 }
19 },
20 {
21 "component": "fc.button.print",
22 "props": {
23 "label": "PRINT ORDER LABEL",
24 "setting": "example.wave.pick.print"
25 }
26 }
27 ]
28}Language: json
The initial release
The component can be placed in pages, drawers, lists.
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.
