Products List Widget

The Products List Widget renders a list of products retrieved from the search query.

Example Usage

Text Search

const textsearch = window.yesplz.textsearch();

textsearch.addWidget(
  textsearch.widgets.ProductsList({
    container: "#products-list",
    containerClassName: "grid grid-cols-4",
    productLinkTarget: "_blank",
  })
);

Dual Search

const dualsearch = window.yesplz.dualsearch();

dualsearch.addWidget(
  dualsearch.widgets.ProductsList({
    container: "#products-list",
    containerClassName: "grid grid-cols-4",
    productLinkTarget: "_blank",
  })
);

Parameters

Name	Type	Description
container	string	CSS selector for the HTML element where the widget will be rendered.
containerClassName	string	Class name to be applied to the container element.
rootTag	string	HTML tag to be used as the root element for the product list.
productLinkTarget	string	Target attribute for product links (e.g., '_blank' for new tab).
templates	object	Custom templates for rendering the widget.
productUrl	function	Function to customize the URL generation for each product.
onRendered	function	Callback function to be executed after the widget is rendered.

productLinkTarget

Default: '_self'

Specifies the target attribute for product links.

rootTag

Default: 'div'

Defines the HTML tag to be used as the root element for the product list.

templates

An object containing custom templates for rendering different parts of the widget. Each template is a string of HTML with Handlebars syntax for dynamic content.

• item: The main template for each product item. It includes placeholders for product details like brand, name and image.
• price: Template for displaying the regular price of a product.
• discountPrice: Template for displaying both the discounted and original price of a product.
• nothingFound: Template displayed when no products are found matching the search criteria.

Default templates:

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

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>
  {{#if customFields.likes}}
    <span>{{customFields.likes}}</span>
  {{/if}}
</a>
`;

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

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

Example usage:

templates: {
  item: productItemTemplate,
  price: productItemPriceTemplate,
  discountPrice: productItemDiscountPriceTemplate,
  nothingFound: nothingFoundTemplate,
}

onRendered

A callback function that is executed after the widget is rendered. It receives the search object as a parameter, which contains information about the current search results.

Example usage:

onRendered: (search) => {
  if (search.counts && search.counts.total)
    document.getElementById("total-found").innerHTML = search.counts.total;
};

onRendered

A callback function that is executed after the widget is rendered. It receives the search object as a parameter, which contains information about the current search results.

Example usage:

onRendered: (search) => {
  if (search.counts && search.counts.total)
    document.getElementById("total-found").innerHTML = search.counts.total;
};