Docs
Author:
Fluent Commerce staff
Changed on:
15 Feb 2024
Identifying the area that has to be modified in Mystique configIdentify the area in you Mystique config where you want to add a http link where the link is sourced from an attribute
Adding the Mystique configurationAdd the mystique configuration, for example:
1{
2 "label": "Printing Slip",
3 "dataSource":"attributes",
4 "template": "{{value}}",
5 "link_template": "{{value}}",
6 "filterFirst":
7 {"name":"printing_slip", "type":"STRING"}
8 }Language: json
Name: Mystique config
Description:
[Warning: empty required content area]Adapting the graphQL query Adapt the graphQL query to extract the attributes, for example:
1query ($id: ID!) { orderById(id: $id) { id ref status type createdOn retailer{id tradingName} ...Customer ...Items ...fulfilments ...fulfilmentChoice ...financialTransactions attributes { name type value } } comments(entityId: [$id], entityType: \"ORDER\"){ edges {node {id text entityId entityType, text, createdOn, updatedOn }}} }
2Language: graphqlschema
Name: graphQL query
Description:
[Warning: empty required content area]Adding the attribute to the entityAdd the corresponding attribute to the entity and reload Admin Console. The attribute link will show as per the below screenshot (example):
Order summary sample with clickable attributesFull Sample of the order summary sage with clickable attributes:
1{
2 "path": "orders/:id",
3 "component": "shared.components.material.DynamicPage",
4 "menuIcon": "shopping_cart",
5 "params": {
6 "title": "{{orderById.ref}} - {{orderById.status}}",
7 "showUserActions": true,
8 "backButtons": [
9 {
10 "path": "orders",
11 "menuLabel": "i18n:fc.om.orders.detail.breadcrumb.backToOrders"
12 },
13 {
14 "path": "customers/{{orderById.customer.id}}",
15 "menuLabel": "i18n:fc.om.orders.detail.breadcrumb.viewCustomer"
16 }
17 ],
18 "graphql": {
19 "query": "query ($id: ID!) { orderById(id: $id) { id ref status type createdOn retailer{id tradingName} ...Customer ...Items ...fulfilments ...fulfilmentChoice ...financialTransactions attributes { name type value } } comments(entityId: [$id], entityType: \"ORDER\"){ edges {node {id text entityId entityType, text, createdOn, updatedOn }}} } ",
20 "variables": {
21 "id": "{{params.id}}"
22 }
23 },
24 "primaryButtons": [
25 {
26 "label": "i18n:fc.om.orders.detail.userAction.editOrder",
27 "mutation": "updateOrder",
28 "arguments": {
29 "id": "{{id}}"
30 }
31 }
32 ],
33 "secondaryButtons": [
34 {
35 "label": "i18n:fc.om.orders.detail.userAction.addFulfilment",
36 "mutation": "createFulfilment"
37 },
38 {
39 "label": "i18n:fc.om.orders.detail.userAction.addComment",
40 "mutation": "createComment",
41 "defaultValues": {
42 "entityId": "{{orderById.id}}",
43 "entityType": "ORDER"
44 }
45 }
46 ],
47 "layouts": [
48 {
49 "component": "shared.components.material.MaterialTabsSet",
50 "params": {
51 "layouts": [
52 {
53 "component": "shared.components.material.SubLayoutContent",
54 "label": "i18n:fc.om.orders.detail.tab.details.label",
55 "params": {
56 "layouts": [
57 {
58 "component": "shared.components.material.DynamicCard",
59 "params": {
60 "title": "i18n:fc.om.orders.detail.card.summary.title",
61 "half": true,
62 "dataSource": "orderById",
63 "attributes": [
64 {
65 "label": "i18n:fc.om.orders.detail.card.summary.attribute.orderType.label",
66 "template": "{{type}}"
67 },
68 {
69 "label": "i18n:fc.om.orders.detail.card.summary.attribute.orderStatus.label",
70 "template": "{{status}}"
71 },
72 {
73 "label": "i18n:fc.om.orders.detail.card.summary.attribute.creationDate.label",
74 "template": "{{formatDate createdOn day='numeric' month='numeric' year='numeric'}}"
75 },
76 {
77 "label": "i18n:fc.om.orders.detail.card.summary.attribute.returns.label",
78 "template": "Search for Returns",
79 "link_template": "#/returns?ref[]={{ref}}-"
80 },
81 {
82 "label": "Printing Slip",
83 "dataSource":"attributes",
84 "template": "{{value}}",
85 "link_template": "{{value}}",
86 "filterFirst":
87 {"name":"printing_slip", "type":"STRING"}
88 },
89 {
90 "label": "Delivery Slip",
91 "dataSource":"attributes",
92 "template": "{{value}}",
93 "link_template": "{{value}}",
94 "filterFirst":
95 {"name":"delivery_slip", "type":"STRING"}
96 }
97 ]
98 }
99 },
100 {
101 "component": "shared.components.material.DynamicCard",
102 "params": {
103 "title": "i18n:fc.om.orders.detail.card.retailerInfo.title",
104 "half": true,
105 "dataSource": "orderById",
106 "attributes": [
107 {
108 "label": "i18n:fc.om.orders.detail.card.retailerInfo.attribute.retailerID.label",
109 "template": "{{retailer.id}}"
110 },
111 {
112 "label": "i18n:fc.om.orders.detail.card.retailerInfo.attribute.retailer.label",
113 "template": "{{retailer.tradingName}}"
114 }
115 ]
116 }
117 },
118 {
119 "component": "shared.components.material.DynamicCard",
120 "params": {
121 "graphql": {
122 "fragment": "fragment Customer on Order{ customer { id firstName lastName primaryEmail primaryPhone } } "
123 },
124 "title": "i18n:fc.om.orders.detail.card.customer.title",
125 "half": true,
126 "dataSource": "orderById.customer",
127 "attributes": [
128 {
129 "label": "i18n:fc.om.orders.detail.card.customer.attribute.customerName.label",
130 "template": "{{firstName}} {{lastName}}",
131 "link_template": "#/customers/{{id}}"
132 },
133 {
134 "label": "i18n:fc.om.orders.detail.card.customer.attribute.phoneNo..label",
135 "template": "{{primaryPhone}}"
136 },
137 {
138 "label": "i18n:fc.om.orders.detail.card.customer.attribute.email.label",
139 "template": "{{primaryEmail}}"
140 }
141 ]
142 }
143 },
144 {
145 "component": "shared.components.material.DynamicCard",
146 "params": {
147 "graphql": {
148 "fragment": "fragment fulfilmentChoice on Order{ fulfilmentChoice { id pickupLocationRef deliveryAddress {id name street city state postcode country} deliveryInstruction deliveryType } } "
149 },
150 "title": "i18n:fc.om.orders.detail.card.deliveryInfo.title",
151 "half": true,
152 "dataSource": "orderById.fulfilmentChoice",
153 "attributes": [
154 {
155 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.pickupLocationRef.label",
156 "template": "{{pickupLocationRef}}"
157 },
158 {
159 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.customerName.label",
160 "template": "{{deliveryAddress.name}}"
161 },
162 {
163 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.street.label",
164 "template": "{{deliveryAddress.street}}"
165 },
166 {
167 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.city.label",
168 "template": "{{deliveryAddress.city}}"
169 },
170 {
171 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.state.label",
172 "template": "{{deliveryAddress.state}}"
173 },
174 {
175 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.postcode.label",
176 "template": "{{deliveryAddress.postcode}}"
177 },
178 {
179 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.country.label",
180 "template": "{{deliveryAddress.country}}"
181 },
182 {
183 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.deliveryType.label",
184 "template": "{{deliveryType}}"
185 },
186 {
187 "label": "i18n:fc.om.orders.detail.card.deliveryInfo.attribute.deliveryInstructions.label",
188 "template": "{{deliveryInstruction}}"
189 }
190 ]
191 }
192 },
193 {
194 "component": "shared.components.material.DynamicList",
195 "params": {
196 "title": "i18n:fc.om.orders.detail.list.orderItems.title",
197 "graphql": {
198 "fragment": "fragment Items on Order{ items{ edges { node { id ref price quantity product {name} } } } } "
199 },
200 "defaultPageSize": 10,
201 "dataSource": "orderById.items",
202 "attributes": [
203 {
204 "label": "i18n:fc.om.orders.detail.list.orderItems.column.ref.heading",
205 "template": "{{node.ref}}",
206 "link_template": "#/orderitems/{{node.id}}"
207 },
208 {
209 "label": "i18n:fc.om.orders.detail.list.orderItems.column.productName.heading",
210 "template": "{{node.product.name}}"
211 },
212 {
213 "label": "i18n:fc.om.orders.detail.list.orderItems.column.quantity.heading",
214 "template": "{{node.quantity}}"
215 },
216 {
217 "label": "i18n:fc.om.orders.detail.list.orderItems.column.price.heading",
218 "template": "{{node.price}}"
219 }
220 ]
221 }
222 }
223 ]
224 }
225 },
226 {
227 "component": "shared.components.material.SubLayoutContent",
228 "label": "i18n:fc.om.orders.detail.tab.fulfilments.label",
229 "params": {
230 "layouts": [
231 {
232 "component": "shared.components.material.DynamicList",
233 "params": {
234 "graphql": {
235 "fragment": "fragment fulfilments on Order{ fulfilments { edges { node { id deliveryType status eta fromAddress { companyName } toAddress { companyName name } }} } } "
236 },
237 "title": "i18n:fc.om.orders.detail.list.fulfilments.title",
238 "dataSource": "orderById.fulfilments",
239 "attributes": [
240 {
241 "label": "i18n:fc.om.orders.detail.list.fulfilments.column.id.heading",
242 "template": "{{node.id}}",
243 "link_template": "#/fulfilment/{{node.id}}"
244 },
245 {
246 "label": "i18n:fc.om.orders.detail.list.fulfilments.column.status.heading",
247 "template": "{{node.status}}"
248 },
249 {
250 "label": "i18n:fc.om.orders.detail.list.fulfilments.column.deliveryType.heading",
251 "template": "{{node.deliveryType}}"
252 },
253 {
254 "label": "i18n:fc.om.orders.detail.list.fulfilments.column.fulfilmentLocation.heading",
255 "template": "{{node.fromAddress.companyName}}"
256 },
257 {
258 "label": "i18n:fc.om.orders.detail.list.fulfilments.column.destination.heading",
259 "template": "{{node.toAddress.companyName}} {{node.toAddress.name}}"
260 },
261 {
262 "label": "i18n:fc.om.orders.detail.list.fulfilments.column.eTA.heading",
263 "template": "{{node.eta}}"
264 }
265 ]
266 }
267 }
268 ]
269 }
270 },
271 {
272 "component": "shared.components.material.SubLayoutContent",
273 "label": "i18n:fc.om.orders.detail.tab.transactions.label",
274 "params": {
275 "layouts": [
276 {
277 "component": "shared.components.material.DynamicList",
278 "params": {
279 "graphql": {
280 "fragment": "fragment financialTransactions on Order{ financialTransactions { edges { node {ref createdOn status type cardType paymentMethod total }} } } "
281 },
282 "title": "i18n:fc.om.orders.detail.list.transactions.title",
283 "dataSource": "orderById.financialTransactions",
284 "attributes": [
285 {
286 "label": "i18n:fc.om.orders.detail.list.transactions.column.ref.heading",
287 "template": "{{node.ref}}"
288 },
289 {
290 "label": "i18n:fc.om.orders.detail.list.transactions.column.createdOn.heading",
291 "template": "{{formatDate node.createdOn day='numeric' month='numeric' year='numeric'}}"
292 },
293 {
294 "label": "i18n:fc.om.orders.detail.list.transactions.column.status.heading",
295 "template": "{{node.status}}"
296 },
297 {
298 "label": "i18n:fc.om.orders.detail.list.transactions.column.type.heading",
299 "template": "{{node.type}}"
300 },
301 {
302 "label": "i18n:fc.om.orders.detail.list.transactions.column.cardType.heading",
303 "template": "{{node.cardType}}"
304 },
305 {
306 "label": "i18n:fc.om.orders.detail.list.transactions.column.paymentMethod.heading",
307 "template": "{{node.paymentMethod}}"
308 },
309 {
310 "label": "i18n:fc.om.orders.detail.list.transactions.column.amount.heading",
311 "template": "{{node.total}}"
312 }
313 ]
314 }
315 }
316 ]
317 }
318 },
319 {
320 "component": "shared.components.material.SubLayoutContent",
321 "label": "i18n:fc.om.orders.detail.tab.attributes.label",
322 "params": {
323 "layouts": [
324 {
325 "component": "shared.components.material.DynamicList",
326 "params": {
327 "title": "i18n:fc.om.orders.detail.list.attributes.title",
328 "dataSource": "orderById.attributes",
329 "attributes": [
330 {
331 "label": "i18n:fc.om.orders.detail.list.attributes.column.name.heading",
332 "template": "{{name}}"
333 },
334 {
335 "label": "i18n:fc.om.orders.detail.list.attributes.column.type.heading",
336 "template": "{{type}}"
337 },
338 {
339 "label": "i18n:fc.om.orders.detail.list.attributes.column.value.heading",
340 "template": "{{value}}",
341 "link_template": "{{value}}"
342 }
343 ]
344 }
345 }
346 ]
347 }
348 },
349 {
350 "component": "shared.components.material.SubLayoutContent",
351 "label": "i18n:fc.om.orders.detail.tab.comments.label",
352 "params": {
353 "layouts": [
354 {
355 "component": "shared.components.material.DynamicList",
356 "params": {
357 "graphql": {
358 "fragment": "fragment financialTransactions on Order{ financialTransactions { edges { node {ref createdOn status type cardType paymentMethod total }} } } "
359 },
360 "title": "i18n:fc.om.orders.detail.list.comments.title",
361 "dataSource": "comments",
362 "attributes": [
363 {
364 "label": "i18n:fc.om.orders.detail.list.comments.column.comment.heading",
365 "template": "{{node.text}}"
366 },
367 {
368 "label": "i18n:fc.om.orders.detail.list.comments.column.createdOn.heading",
369 "template": "{{formatDate node.createdOn day='numeric' month='numeric' year='numeric'}}"
370 },
371 {
372 "label": "i18n:fc.om.orders.detail.list.comments.column.updatedOn.heading",
373 "template": "{{formatDate node.updatedOn day='numeric' month='numeric' year='numeric'}}"
374 }
375 ]
376 }
377 }
378 ]
379 }
380 },
381 {
382 "component": "shared.components.material.SubLayoutContent",
383 "label": "i18n:fc.om.orders.detail.tab.activity.label",
384 "params": {
385 "layouts": [
386 {
387 "component": "shared.components.EntityActivity",
388 "params": {
389 "showChildEntities": true
390 }
391 }
392 ]
393 }
394 }
395 ]
396 }
397 }
398 ]
399 }
400}Language: json
Name: Order summary sample
Description:
[Warning: empty required content area]
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.
