Skip to main content

Product Recommendations Instructions

👋 Hi there. Here’s a quick instruction on how to install Product Recommendations on your website:

Quick Start using remote script

HTML Layout​

First you need to determine where on the page you want integrate our widgets.

Let's say we have simple HTML layour for one product. We will use one container to render Product details and another one to render recommendations.

index.html - Proposed html structure
...
<div class="content">
  <div class="product-detail" id="product-detail"></div>
  <div
    class="product-recommendations"
    id="yesplz-recommended-products-list"
  ></div>
</div>
...

Add script and css tags into the page​

index.html - Remote files importing
...
    <!--
        Import CSS.

        Insert it inside of the <head> tag
    -->
    <link rel="stylesheet" href="https://code.yesplz.ai/stylefilter/<RETAILER CODE>/latest/style.css">
</head>
<body>
    ...
    <!--
        Import JavaScript file.

        Prefered location is in the bottom of the body tag following by initialization script.
    -->
    <script src="https://code.yesplz.ai/stylefilter/<RETAILER CODE>/latest/stylefilter.js"></script>
</body>

Create Initialization script​

script.js - Initialization script
import "./styles.css";

/**
 * 1. Create Product instance
 */
const product = window.yesplz.product({
  // This is just random product ID from our demo database.
  productId: "asos_10079993"
});

/**
 * 2. Add Products Details Widget on the page
 * This widget is just for demo purposes.
 * Probably you will not need this on your website.
 */
product.addWidget(
  product.widgets.ProductDetail({
    container: "#product-detail"
  })
);

/**
 * 4. Add Similar Products Widget on the page
 */
product.addWidget(
  product.widgets.SimilarProducts({
    container: "#yesplz-recommended-products-list",
    // How many products to get
    limit: 4
  })
);

/**
 * 4. Add Similar Products Slider Widget on the page
 */
product.addWidget(
  product.widgets.SimilarProductsSlider({
    container: "#yesplz-recommended-products-list",
    
    // Elements to get and to render
    limit: 18,
    slider: {
      // Elements per page for the slider
      perPage: 4
    },
    /**
     * Product URL should be changed to lead onto real page.
     */
    productUrl: (product) =>
      `/product/page/path?productId=${product.productId}`,
    productLinkTarget: "_blank"
  })
);

slider property takes settings of the Splide library settings