Global web - web components
Product Grid
Custom HTML element
<gw-group-product-grid content="" theme=""></gw-group-product-grid>
Properties
Name | Type | Description |
---|
content | Object | base64 encoded |
content
{
"url": "",
"categoryName": "ASSA P600",
"categoryId": "11",
"categories": [
{
"id": "1",
"name": "Key management and software",
"link": {
"url": "/"
},
"subCategories": [
{
"id": "11",
"name": "ASSA P600",
"link": {
"url": "/"
},
"subCategories": [
{
"id": "111",
"name": "ASSA dp 4400",
"link": {
"url": "/"
},
"subCategories": [
{
"id": "1111",
"name": "Digital locking systems",
"link": {
"url": "/"
},
"subCategories": [
{
"id": "11111",
"name": "British oval profile",
"link": {
"url": "/"
}
},
{
"id": "11112",
"name": "Key in knob",
"link": {
"url": "/"
}
},
{
"id": "11113",
"name": "Padlocks",
"link": {
"url": "/"
}
}
]
}
]
}
]
}
]
}
],
"config": {
"aspectRatio": "1-1" | "16-9" | "4-3",
"filtering": {
"active": true,
}
"padding": {
"top": true,
"bottom": true
}
},
"showingCurrentOfMax": "Showing {{current}} of {{max}}",
"loading": "Loading...",
"sorryWeCouldNotFindAnyProducts": "Sorry we could not find any products",
"seeProduct": "See product",
"result": "result",
"results": "results",
"showMore": "Show more",
"exploreCategory": "Explore category",
"relevance": "Relevance",
"newestFirst": "Newest first",
"oldestFirst": "Oldest first",
"alphabeticallyAZ": "A-Z",
"alphabeticallyZA": "Z-A",
"sortBy": "Sort by",
"all": "All"
}
Expected API call response
{
"filtering": {
"active": true | false
"tagCategories": [
{
"displayLabel": "Topic",
"category": "topic",
"tags": ["topic1", "topic2"]
}
]
},
"items": [
{
"id": "",
"eyebrow": {
"title": "",
"text": ""
},
"title": "",
"navigationTitle": "",
"type": "",
"created": "",
"tags": [
{
"category": "topic",
"tag": "topic1"
}
],
"link": {
"text": ""
"url": ""
},
"image": {
"url": "",
"width": 0,
"height": 0,
"renditions": {
"blur-up": "",
"400": "",
"800": "",
"1200": "",
"1600": "",
"2500": ""
},
"smartCrops": {
"1-1-S": "",
"1-1-M": "",
"1-1-L": "",
"4-3-S": "",
"4-3-M": "",
"4-3-L": "",
"3-4-S": "",
"3-4-M": "",
"3-4-L": "",
"8-3-S": "",
"8-3-M": "",
"8-3-L": "",
"16-9-S": "",
"16-9-M": "",
"16-9-L": "",
"blur-up": ""
}
},
}
}
]
}
theme
Two different background options:
- "theme-alt-1" (white)
- "theme-alt-2" (grey)
Dependencies
@assaabloy/gw-group-vendor
@assaabloy/brand-styles