Skip to main content

SimilarProducts widget

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

Parameters and default values​

limit - number​

How many recommended products to get and render.

default - 20

templates - object​

Default value​

{
  layout: `{{{productsHtml}}}`,
  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

onRendered - function​

Function gets invoked everytime products list gets rendered.

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.SimilarProducts({
    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,
},