Quick Start - Using remote script

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

What is YesPlz AI Mannequin Filter

Mannequin Filter is a visual-first, interactive filter that empowers shoppers to customize their search precisely to find what they're looking for. Without needing to understand any fashion jargon, shoppers can quickly narrow down their search.

Key benefits:

Visual product filters that utilize AI to automatically tag and index items with relevant fashion filters.
A unique visual search experience that offers higher-quality navigation and discovery.
Achieves a higher conversion rate, with 1.7 times more items added to the cart.

To get access and sctips to work with please contact us.

Render Mannequin Filter

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

Let's say we have simple HTML layour with Header, Sidebar and Content area. We will use sidebar to render full Mannequin Filter widget and content area to render search results.

index.html - Proposed html structure
...
<div class="wrapper">
    <div class="sidebar" id="sidebar-filter">
    </div>
    <div class="content">
        <div class="content-header">
            <button id="mobile-filter-opener">Open Filter</button>
        </div>
        <div class="products" id="products">
        </div>
    </div>
</div>
...

styles.css - Basic css to support layout and HTML
...
* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;

  font-family: Muli, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #000;
  background: #ffffff;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.products {
  padding: 20px 0 0 0;
}

.open-button {
  border: 0;
  background-color: #2f30eb;
  padding: 10px;
  color: #fff;
  font-size: 14px;
  width: 100%;
  height: 48px;
}

@media (min-width: 768px) {
  .wrapper {
    flex-direction: row;
  }
  .sidebar {
    width: 348px;
  }

  .content {
    flex: 1;
  }

  .open-button {
    display: none;
  }
}

...

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

This is the script that you'll use for integration. It can be a <script> tag in the html file with raw javascript in it, your common javascript file with dedicated section or separate file as it presented here.

script.js - Initialization script

/**
 * 1. Create VisualFilter instance
 */
const stylefilter = window.yesplz.stylefilter();

/**
 * 2. Add Widget on the page
 */
stylefilter.addWidget(
  stylefilter.widgets.CollapsibleFilters({
    /**
     * Specify container in css selector format
     */
    container: '#sidebar-filter',

    /**
     * For mobile.
     * Specify selector to element that will open filter when it's clicked on.
     */
    externalOpener: '#mobile-filter-opener',

    /**
     * List of the filters you want to see on the page.
     */
    filters: ['categories', 'style', 'patterns', 'colors', 'brand'],
    
    /**
     * Set this to true, to have filter opened by default on mobile.
     */
    isOpenInitialy: true
  })
);

Update page imports

index.html - Remote files importing
...
    <link rel="stylesheet" href="https://code.yesplz.ai/stylefilter/<RETAILER CODE>/latest/stylefilter.css">
    <link rel="stylesheet" href="path/to/file/custom_styles.css">
</head>
<body>
    <script src="https://code.yesplz.ai/stylefilter/<RETAILER CODE>/latest/stylefilter.js"></script>
    <script src="path/to/file/script.js"></script>
</body>

This will insert Full Mannequin Filter expirience on the page.

Render products

script.js - Initialization script
/* Rest of the content */
...

/**
 * Add products rendering widget
 */
stylefilter.addWidget(
  stylefilter.widgets.ProductsList({
    container: "#products"
  })
);

Render products hooking to the search results event

If you want to render search results any other way. Either with React, Vue or get more product information from your server, you can use events that are provided with VisualFilter instance.

script.js - Initialization script
/* Rest of the content */
...

/**
 * Assigning `searchFinished` event.
 * Callback will have search result data as an argument
 */
stylefilter.on('searchFinished', function (data) {
  console.log('on searchFinished', data);

  // Here you can make request to your server
  // and get all the required information needed
});

There are more events you can use

searchStarted - recieves filter parameters object as an argument
categoryChanged
presetChange

How to set initial filter values

const stylefilter = window.yesplz.stylefilter({
  initialFilter: {
    // Set category to render here
    categoryId: 'wdress',
    // page limit number
    limit: 30,
    // Offset
    offset: 30,
  },
});

categoryId - string

If categoryId is set Filter will render this category as initial category

limit - number

Page size

offset - number

Products to skip. If you need to render page 2 and the size of the page is 30 - offset should be 30.

** clientBaseURL - String **

Base URL for search and other requests.

** clientSearchPath - String **

Endpoint setting for search requests.

Awailable options are:

/vf/ - with full product objects and results
/dmf/ - Dynamic filters version
/min/sf/ - minimozed and lighter version

default - /vf/

What is YesPlz AI Mannequin Filter​

Render Mannequin Filter​

Add script and css tags into the page​

Create Initialization script​

Update page imports​

Render products​

Render products using widget​

Render products hooking to the search results event​

How to set initial filter values​