Ecommerce product list
This widget is only compatible with Editor version 7.32 and above.
IMPORTANT: This widget will only work as expected when the ecommerce plugin is activated on the user’s account.
Examples
Example usage
{{widget('ecomproductslist', 'productlist', {})|raw}}Resulting HTML:
<div id="page-zones__main-widgets__ecomproductslistWidget" data-name="ecomproductslist" class="widget widget--zone-widget">
<div class="bk-ecomproductslist ecomproductslist widget__ecomproductslist">
<section class="listing-section product-listing__listing-section">
<header class="listing-header product-listing__listing-header">
<h2 class="listing-title product-listing__listing-title">Products</h2>
<div class="product-filters product-listing__product-filters">
<form class="form product-listing__form js-productlist-display-formclearfix" method="GET" action="/store">
<fieldset class="fieldset product-listing__fieldset">
<legend class="legend product-listing__legend">Filters</legend>
<div class="form-body product-listing__form-body">
<div class="form-group product-listing__form-group">
<label class="label label--filter product-listing__label" for="page-zones__main-widgets__ecomproductslistWidget__product-listing__filter-1">Order by</label>
<div class="select-wrap product-listing__select-wrap">
<select class="select select--filter product-listing__select js-display-control" id="page-zones__main-widgets__ecomproductslistWidget__product-listing__filter-1" name="productlist-sort">
<option value="created-desc">Newest</option>
<option value="title-asc">Title: A-Z</option>
<option value="title-desc">Title: Z-A</option>
<option value="price-desc">Price: Highest to Lowest</option>
<option value="price-asc">Price: Lowest to Highest</option>
</select>
</div>
</div>
<div class="form-group product-listing__form-group">
<label class="label label--filter product-listing__label" for="page-zones__main-widgets__ecomproductslistWidget__product-listing__filter-2">Categories</label>
<div class="select-wrap product-listing__select-wrap">
<select class="select select--filter product-listing__select js-display-control" id="page-zones__main-widgets__ecomproductslistWidget__product-listing__filter-2" name="productlist-categories">
<option value="">Filter by category</option>
<option disabled>---</option>
<option value="woman">woman</option>
<option value="man">man</option>
</select>
</div>
</div>
<div class="form-group product-listing__form-group">
<label class="label label--filter product-listing__label" for="page-zones__main-widgets__ecomproductslistWidget__product-listing__filter-3">Tags</label>
<div class="select-wrap product-listing__select-wrap">
<select class="select select--filter product-listing__select js-display-control" id="page-zones__main-widgets__ecomproductslistWidget__product-listing__filter-3" name="productlist-tags">
<option value="">Filter by tag</option>
<option disabled>---</option>
<option value="summer">summer</option>
<option value="winter">winter</option>
</select>
</div>
</div>
<div class="form-group product-listing__form-group">
<label class="label label--filter product-listing__label" for="page-zones__main-widgets__ecomproductslistWidget__product-listing__filter-4">Per Page</label>
<div class="select-wrap product-listing__select-wrap">
<select class="select select--filter product-listing__select js-display-control" id="page-zones__main-widgets__ecomproductslistWidget__product-listing__filter-4" name="productlist-itemcount">
<option value="20">Show 20</option>
<option value="32">Show 32</option>
<option value="64">Show 64</option>
</select>
</div>
</div>
<div class="form-group product-listing__form-group">
<label class="label label--search product-listing__label" for="page-zones__main-widgets__ecomproductslistWidget__product-listing__search">Search Products</label>
<input class="input input--search product-listing__input js-display-control" id="page-zones__main-widgets__ecomproductslistWidget__product-listing__search" name="productlist-search" placeholder="Search term" type="search" value=""/>
</div>
<div class="form-group product-listing__form-group">
<input class="button button--submit product-listing__input" type="submit" value="Search" />
</div>
</div>
</fieldset>
</form>
</div>
<p class="listing-order product-listing__listing-order">Showing %1–%2 of %3 products</p>
</header>
<div class="listing-body product-listing__listing-body">
<ul class="product-list product-listing__product-list">
<li class="product-item product-listing__product-item">
<article class="product-item-article product-listing__product-item-article">
<div class="product-item-image product-listing__product-item-image">
<img class="image image--thumb product-listing__image" src="//placehold.it/2250x800" alt="Aliquam Handbag">
</div>
<header class="product-item-details product-listing__product-content">
<h3 class="product-item-title product-listing__product-item-title">
<a class="title-link product-listing__title-link" >Aliquam Handbag</a>
</h3>
<p class="product-item-price product-listing__product-item-price">£32</p>
</header>
</article>
</li>
<li class="product-item product-listing__product-item">
<article class="product-item-article product-listing__product-item-article">
<div class="product-item-image product-listing__product-item-image">
<img class="image image--thumb product-listing__image" src="//placehold.it/300x100" alt="Commodo Handbag">
</div>
<header class="product-item-details product-listing__product-content">
<h3 class="product-item-title product-listing__product-item-title">
<a class="title-link product-listing__title-link" >Commodo Handbag</a>
</h3>
<p class="product-item-price product-listing__product-item-price">From %1</p>
</header>
</article>
</li>
<li class="product-item product-listing__product-item">
<article class="product-item-article product-listing__product-item-article">
<div class="product-item-image product-listing__product-item-image">
<img class="image image--thumb product-listing__image" src="//placehold.it/250x250" alt="Conubia Nostra Handbag">
</div>
<header class="product-item-details product-listing__product-content">
<h3 class="product-item-title product-listing__product-item-title">
<a class="title-link product-listing__title-link" >Conubia Nostra Handbag</a>
</h3>
<p class="product-item-price product-listing__product-item-price">£32</p>
</header>
</article>
</li>
</ul>
</div>
<footer class="listing-footer product-listing__listing-footer">
<nav class="listing-pagination product-listing__post-pagination">
<ul class="pagination-list product-listing__pagination-list">
<li class="pagination-item pagination-item product-listing__pagination-item current">
<a class="button button--pagination product-listing__button" href="/store/page/1">1</a>
</li>
<li class="pagination-item product-listing__pagination-item">
<a class="button button--pagination product-listing__button" href="/store/page/2">2</a>
</li>
</ul>
</nav>
</footer>
</section>
</div>
</div>Widget options
You can change the following options for the widget:
productFiltering: Show or hide the product filters above the product items.1shows the filters,0will hide them. If this is not set they are shown by default.