Docs
Changed on:
19 July 2024
The Product Card Component is a consistent way to represent product information across the applications. Alongside the typical card features it can also display an image, attributes, a count, and a close icon, while also allowing nested components for added functionality.
| Plugin Name | Core |
|---|
The standard library of mystique components.
Initial changelog entry.
fc.card.product
Various child components can be placed inside the card to extend basic functionality. If composing the component with others is necessary, using the card without an indent will avoid extra spacing.
1{
2 "component": "fc.card.product",
3 "props": {
4 "title": "Nike Air 270",
5 "cardImage": {
6 "imageUrl": "https://c.static-nike.com/a/images/f_auto,b_rgb:f5f5f5,w_440/skwgyqrbfzhu6uyeh0gg/air-max-270-shoe-nnTrqDGR.jpg",
7 "width": "100px",
8 "height": "100px"
9 },
10 "width": 4,
11 "attributes": [
12 {"value": "AH8050-001", "label": "ref"},
13 {"value": "5901234123457", "label": "gtin"}
14 ],
15 "descendants": [
16 {
17 "component": "fc.accordion",
18 "props": {
19 "noCard": true,
20 "defaultExpanded": false,
21 "summary": "Product Details",
22 "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."
23 }
24 }
25 ]
26 }
27}Language: json
Name: Product Card with an Accordion inside
Description:
Product Card configuration with an accordion inside
Example:
Name | Type | Required | Default | Description |
title |
| no | none | The Title text of the card |
attributes | | no | [] | List of key/value pairs to show on the card |
count | | no | none | Number that is displayed in the to right corner of the card. |
cardImage | | no | 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 | true | Card padding switcher. |
Name | Type | Required | Default | Description |
height | | no | - | Image height |
width | | mo | - | Image width |
imageUrl | | no | - | Image URL |
1{
2 "component": "fc.card.product",
3 "props": {
4 "title": "Nike Air 270",
5 "cardImage": {
6 "imageUrl": "https://c.static-nike.com/a/images/f_auto,b_rgb:f5f5f5,w_440/skwgyqrbfzhu6uyeh0gg/air-max-270-shoe-nnTrqDGR.jpg",
7 "width": "100px",
8 "height": "100px"
9 },
10 "width": 4,
11 "attributes": [
12 { "value": "AH8050-001"},
13 { "value": "5901234123457"}
14 ],
15 "count": 5
16 }
17}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.
