Skip to main content

SimilarProductsSlider widget

product.addWidget(
  product.widgets.SimilarProductsSlider({
    container: "#yesplz-recommended-products-list",
  })
);

Parameters and default values​

limit - number​

How many recommended products to get and render.

default - 20

slider - object​

slider property takes settings of the Splide library settings

templates - object​

Default value​

{
    product: `
       <a href="{{url}}" class="yesplz-product-detail">
        <div class="yesplz-product-detail-image">
            <img src="{{frontImg}}" width="400" id="objImg">
        </div>
        <div class="yesplz-product-detail-description">
            <h4>{{brand}}</h4>
            <h2>{{name}}</h2>
            <p class="yesplz-product-detail-price">
            {{#if isSale}}
            {{originalPrice}} - {{price}}
            {{else}}
            {{price}}
            {{/if}}
            </p>
        </div>
        </a>
    `,
}

productUrl - function​

Function to build product URL, recieves product object.

Should return URL to the product as a string

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.

product.addWidget(
  product.widgets.SimilarProductsSlider({
    container: "#yesplz-recommended-products-list",
    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,
},