Fluent Commerce Logo
Docs
Sign In

Grid Component

UI Component

Changed on:

4 July 2024

Overview

A base grid component that lays data out in a four-column format. The primary use case of this component is to display product attributes, as the data must be keys and their corresponding values.

No alt text provided
Plugin NameCore

The standard library of mystique components. 

0000-00-00

v1.0.0

Initial changelog entry.

Alias

fc.card.attributes.grid

Detailed technical description

Sample template

1 {
2    "component": "fc.card.attributes.grid",
3    "dataSource": "product.attributes",
4    "props": {
5        "exclude": ["imageUrl", "imageUrlRef"]
6        
7    }
8  }

Language: json

Name: Sample template

Description:

[Warning: empty required content area]

Sample attribute

1"attributes": [
2    {
3        "name": "color",
4        "value": "red"
5    }
6]

Language: json

Name: Sample attribute

Description:

[Warning: empty required content area]

Properties

Prop

Description

Data

An array of attributes (key values of strings)

Exclude

An array of the attribute names to hide

Configuration example

1 {
2    "component": "fc.card.attributes.grid",
3    "dataSource": "product.attributes",
4    "props": {
5        "exclude": ["imageUrl", "imageUrlRef"]
6  }
7  
8  "attributes": [
9    {
10        "name": "color", 
11        "value": "red"
12    }
13]

Language: json

Version History

2023-07-31

v23.7.31

Initial release

Recommended Placement

None

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.

Fluent Logo