Skip to main content

How to use widgets

Widgets are the building blocks of Mannequin Filter UI. Each widget can be attached into any element inside the DOM.

Determine position of the element​

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.

Let's extend UI that we built in the quick start.

index.html
...
<div class="wrapper">
  <div class="sidebar" id="sidebar-filter">
  </div>
  <div class="content">
    <div id="products"></div>
    <div id="pagination"></div>
  </div>
</div>
...

Add Pagination widget to the page​

Create a file at src/pages/my-react-page.js:

index.js

...

stylefilter.addWidget(
  stylefilter.widgets.Pagination({
    container: '#pagination',
  })
);

You will see Pagination rendered on the bottom of the page.