ProductsList widget

stylefilter.addWidget(
  stylefilter.widgets.ProductsList({
    container: "#products"
  })
);

How to customize product card template

There are few parameters that should be set to edit html of the product card.

stylefilter.addWidget(
  stylefilter.widgets.ProductsList({
    container: "#products",
    templates: {
      customItem: ...,
      item: ...,
      price: ...,
      discountPrice: ...,
      nextBestMatchingTitle: ...,
      nothingFound: ...,
    }
  })
);

Default values

const nothingFoundTemplate = `
<h2>Nothing found!</h2>
`;

const customItemTemplate = `<div><h3>Custom Item</h3></div>`;

const itemTemplate = `
<a href="{{srcUrl}}" target="{{linkTarget}}" class="ProductGrid">
  <div class="ProductGrid-thumbnail">
    <img src="{{frontImg}}" alt="{{brand}}" />
  </div>
  <div class="ProductGrid-detail">
    <h5>{{name}}</h5>
    {{{priceHtml}}}
  </div>
</a>
`;

const itemPriceTemplate = `<div class="ProductGrid-price">{{price}}</div>`;
const itemDiscountPriceTemplate = `
<div class="ProductGrid-price sale">{{price}}</div>
<div class="ProductGrid-originalPrice">{{originalPrice}}</div>
`;

const nextBestMatchingTitleTemplate = `
<h2>We couldn’t find the exact matches, but these items might interest you.</h2>
`;


stylefilter.addWidget(
  stylefilter.widgets.ProductsList({
    container: "#products",

    // Class name for the list container
    containerClassName: 'ProductList-wrapper',

    // Tag name for the list container
    rootTag: 'div',

    templates: {
      customItem: customItemTemplate,
      item: itemTemplate,
      price: itemPriceTemplate,
      discountPrice: itemDiscountPriceTemplate,
      nextBestMatchingTitle: nextBestMatchingTitleTemplate,
      nothingFound: nothingFoundTemplate,
    }
  })
);

customItem - string

Template string for elements that can be injected into the rendered list.

Custom Items can be injected with modifyItemsBeforeRender function. Each Item should be plain object with params attribute that is also a plain object that gets transfered as variables into template.

stylefilter.addWidget(
  stylefilter.widgets.ProductsList({
    ...
    templates: {
      customItem: `<div><h3>{{title}}</h3></div>`,
      ...
    },
    modifyItemsBeforeRender: (items) => {
      // Here you can modify items list
      return [
        {
          params: {
            title: 'Custom title';
          }
        },
        ...items,
      ];
    },
    ...
  })
);

In the example above first element will be rendered as custom element with title as a variable.

Additional parameters

scrollContainer

Specify container that scrolls when product list is scrolled. To reset the scroll to 0 when new results are rendered.

default window

productUrl - function

Function to build product URL, recieves product object.

Should return URL to the product as a string

productLinkTarget

Link target value for the product

default '_self'

displayNextBestMatchesTitle - boolean

Boolean parameter telling widget if "Next best matches" title should be displayed.

default true

onRendered - function

Callback invoked every time product list is rendered. You can select all rendered elements with document.querySelectorAll and assign to the elements inside additional event listeners if necessary.

stylefilter.addWidget(
  stylefilter.widgets.ProductsList({
    container: "#products",
    onRendered: () => {
      const productElements = document.querySelectorAll('#products > .ProductList-wrapper > a');
      productElements.forEach((productElement) => {
        // Do something with product card
      });
    },
  })
);

modifyItemsBeforeRender - function

Function to modify list before it gets rendered. It should return modified list of items.

stylefilter.addWidget(
  stylefilter.widgets.ProductsList({
    container: "#products",
    ...
    modifyItemsBeforeRender: (items) => {
      // Here you can modify items list
      return items;
    },
    ...
  })
);

currency - object

Options

locale - String locale {Language code}-{Country code} code - Currency code 'USD', 'KRW' position - Available values are null, 'start', 'end'. If set to null positions is deccided by locale. symbol - Sets currecy symbol, if different than locale symbol is required rate - Currency rate to convert the given price.

stylefilter.addWidget(
  stylefilter.widgets.ProductsList({
    container: "#products",
    currency: {
      locale: 'en-US',
      code: 'USD',
      position: null,
      symbol: null,
      rate: 1,
    },
  })
);

By defaul locale ko-KR formatted with '' symbol on the start. But if it should be formatted with '원' at the end this is example setting -

currency: {
  locale: 'ko-KR',
  code: 'KRW',
  position: 'end',
  symbol: '원',
  rate: 1200,
},