@assaabloy/gw-group-product-grid

^{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
    }
  },

  // Translations
  "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" // new
}

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