Gigaclear Pattern Library

Product Listing 

<div class="min-h-[300px]" id="listing">
    <div data-vue-module="ContentListing" data-root-nodes="1073,1023" data-search-configuration='{&quot;id&quot;:1234,&quot;resultsPerPage&quot;:12,&quot;listingType&quot;:&quot;4 Column List&quot;,&quot;paginationType&quot;:&quot;Load More&quot;,&quot;apiUrl&quot;:&quot;/front-end/mock-json/products/list.json&quot;,&quot;fieldFilters&quot;:[{&quot;label&quot;:&quot;Product Type&quot;,&quot;aliases&quot;:&quot;topics&quot;,&quot;filterType&quot;:&quot;Dropdown&quot;,&quot;source&quot;:[{&quot;name&quot;:&quot;Product Category 1&quot;,&quot;tagName&quot;:&quot;Product Category 1&quot;,&quot;id&quot;:1234},{&quot;name&quot;:&quot;Product Category 2&quot;,&quot;tagName&quot;:&quot;Product Category 2&quot;,&quot;id&quot;:1235},{&quot;name&quot;:&quot;Product Category 3&quot;,&quot;tagName&quot;:&quot;Product Category 3&quot;,&quot;id&quot;:1236},{&quot;name&quot;:&quot;Product Category 4&quot;,&quot;tagName&quot;:&quot;Product Category 4&quot;,&quot;id&quot;:1237},{&quot;name&quot;:&quot;Product Category 5&quot;,&quot;tagName&quot;:&quot;Product Category 5&quot;,&quot;id&quot;:1238},{&quot;name&quot;:&quot;Product Category 6&quot;,&quot;tagName&quot;:&quot;Product Category 6&quot;,&quot;id&quot;:1238}]},{&quot;label&quot;:&quot;Search&quot;,&quot;aliases&quot;:&quot;nodeName&quot;,&quot;filterType&quot;:&quot;Free Text&quot;,&quot;source&quot;:[]}]}'></div>
</div>
 
{% set searchConfiguration = {
  id: 1234,
  resultsPerPage: 12,
  listingType: "4 Column List",
  paginationType: "Load More",
  apiUrl: "/front-end/mock-json/products/list.json",
  fieldFilters: [
    {
      label: "Product Type",
      aliases: "topics",
      filterType: "Dropdown",
      source: [
        { name: "Product Category 1", tagName: "Product Category 1", id: 1234 },
        { name: "Product Category 2", tagName: "Product Category 2", id: 1235 },
        { name: "Product Category 3", tagName: "Product Category 3", id: 1236 },
        { name: "Product Category 4", tagName: "Product Category 4", id: 1237 },
        { name: "Product Category 5", tagName: "Product Category 5", id: 1238 },
        { name: "Product Category 6", tagName: "Product Category 6", id: 1238 }
      ]
    },
    {
      label: "Search",
      aliases: "nodeName",
      filterType: "Free Text",
      source: []
    }
  ]
} | dump %}

<div class="min-h-[300px]" id="listing">
    <div data-vue-module="ContentListing"  data-root-nodes="1073,1023" data-search-configuration='{{ searchConfiguration }}'></div>
</div>
 
{
  "siteName": "Gigaclear Pattern Library"
}
  • Handle: @product-listing
  • Preview:
  • Filesystem Path: fractal\components\04-listing-feed-components\product-listing\product-listing.nunjucks
  • Referenced by (1): @products

No notes defined.