{{#noProductsFound}} <div class="row column es-results"> <span class="es-suggestions-label">Nothing found.</span> </div> {{/noProductsFound}} <div class="row column es-suggestions"> {{#suggestions.anyItems}} <span class="es-suggestions-label">Did you mean:</span> <ul id="es-suggestion"> {{#suggestions.items}} <li><a>{{.}}</a></li> {{/suggestions.items}} </ul> {{/suggestions.anyItems}} </div> <div class="row column es-controls"> <button class="es-toggle-filter" type="button"> <i class="fas fa-filter" aria-hidden="true"></i> Filters </button> {{#sort.anyItems}} <div class="es-sort"> <label for="es-sort-order">Sort by</label> <select id="es-sort-order"> {{#sort.items}} <option value="{{value}}" {{#selected}}selected="selected"{{/selected}}>{{label}}</option> {{/sort.items}} </select> </div> {{/sort.anyItems}} <div class="es-layout hide-for-small-only"> <div class="product-list__items-icons hide-for-small-only"> <div class="product-list__items-icon product-list__items-icon__small-grid{{# isCompact }} active{{/ isCompact }}" data-type="COMPACT"> <i class="fas fa-list" aria-hidden="true"></i> </div> <div class="product-list__items-icon product-list__items-icon__medium-grid{{# isNormal }} active {{/ isNormal }}" data-type="NORMAL"> <i class="fas fa-th-list" aria-hidden="true"></i> </div> <div class="product-list__items-icon product-list__items-icon__large-grid{{# isGrid }} active {{/ isGrid }}" data-type="GRID"> <i class="fas fa-th" aria-hidden="true"></i> </div> </div> </div> </div> <div class="row column es-product-list"> <ul class="product-list__items"> {{#products.items}} <li class=" prodlist-row grid-layout-cols-{{ gridLayoutCols }} {{# product.newProduct }} product-list__item--new{{/ product.newProduct }} {{# product.used }} product-list__item--used{{/ product.used }} {{# product.campaign }} product-list__item--campaign{{/ product.campaign }} {{# isCompact }} small-grid{{/ isCompact }} {{# isGrid }} large-grid{{/ isGrid }} {{# product.hasAdditionalText }}prodlist-row--additional-texts{{/ product.hasAdditionalText }} " data-id="{{ product.id }}"> <div class="prodlist-row__img-wrapper"> {{# product.link }}<a class="product-list__image-link" href="{{ . }}">{{/ product.link }} <img class="prodlist-row__img" src="{{ product.image }}" alt=""/> {{# product.imageOverlays }} <div class="product-list-image-overlay"> {{# items }} {{# cnetCloudImages }}<div class="image-overlay-container-for-1ws">{{/ cnetCloudImages }} <div class="image-overlay{{# cnetCloudImages }} not-visible{{/ cnetCloudImages }}" style="background: url({{ url }}) no-repeat {{ position }}; background-size: {{ size }}%;"> </div> {{# cnetCloudImages }}</div>{{/ cnetCloudImages }} {{/ items }} </div> {{/ product.imageOverlays }} {{# product.link }}</a>{{/ product.link }} </div> <div class="prodlist-row__content-wrapper"> <div class="product-list__details"> <div class="product-list__title"> {{# product.link }}<a class="product-list__title-link" href="{{ . }}" title="{{ product.labelNoMan }}">{{/ product.link }} <span class="prodlist__manufacturer">{{ product.manufacturer }}</span> <span class="prodlist__label">{{ product.labelNoMan }}</span> {{# product.link }}</a>{{/ product.link }} </div> {{# product.description }} <div class="product-list__description" title="{{ product.description }}">{{# product.condition }}<span class="product-list__condition">{{ . }}</span> -{{/ product.condition }}{{ product.description }}</div> {{/ product.description }} {{# product.hasAdditionalText}} <div class="product-list__additional-texts"> {{# product.additionalTexts }} {{# items }} <div class="additional-text id-{{ id }}"=>{{{ text }}}</div> {{/ items }} {{/ product.additionalTexts }} </div> {{/ product.hasAdditionalText }} {{# minPackText }}<div class="product__minpack"> <span>Product can be bought in sets of: {{ . }}</span> </div>{{/ minPackText }} <div class="product-list__partnumber">Part No: {{ product.partNo }}</div> </div> <div class="prodlist-row__price"> {{# prices.items }} <div> <span class="product-price {{ type }}"> {{# prefix }}<span class="price-prefix">{{ . }}</span>{{/ prefix }} <span class="price-text">{{ price }}</span> {{# suffix }}<span class="price-suffix">{{ . }}</span>{{/ suffix }} </span> </div> {{/ prices.items }} </div> <div class="prodlist-row__prodinfo"> {{# product }} {{# comparison.comparable }} {{# comparison }} <div class="product__compare {{# added }}product__compare--added{{/ added }}" title="Add to compare" data-id="{{ id }}"> <i class="fas fa-balance-scale product__compare-icon" aria-hidden="true"></i> </div> {{/ comparison }} {{/ comparison.comparable }} {{# bookmarksVisible }} <div class="product__bookmark {{# product.toggleBookmark }}product__bookmarked{{/ product.toggleBookmark }}" {{# product.isBookmarksShared }} data-title-add="Add as shared favorite" data-title-remove="Remove as shared favorite" {{^ product.toggleBookmark }} title="Add as shared favorite" {{/ product.toggleBookmark }} {{# product.toggleBookmark }} title="Remove as shared favorite" {{/ product.toggleBookmark }} {{/ product.isBookmarksShared }} {{^ product.isBookmarksShared }} data-title-add="Add to favorites" data-title-remove="Remove favorite" {{^ product.toggleBookmark }} title="Add to favorites" {{/ product.toggleBookmark }} {{# product.toggleBookmark }} title="Remove favorite" {{/ product.toggleBookmark }} {{/ product.isBookmarksShared }} data-id="{{ product.id }}"> <i class="{{# product.toggleBookmark }}fas{{/ product.toggleBookmark }}{{^product.toggleBookmark}}far{{/product.toggleBookmark}} fa-star" aria-hidden="true"></i> </div> {{/ bookmarksVisible }} {{# focusAssortmentLink }} <div class="focus-assortment-link"> <a title="{{ label }}" href="{{ link }}" class="link"> <i class="fa fa-handshake-o" aria-hidden="true"></i> </a> </div> {{/ focusAssortmentLink }} {{# stock }} <div class="product__stock{{# isIncomingStock}} product__stock--incoming-stock{{/ isIncomingStock }}{{# isNotInStock}} product__stock--no-stock{{/ isNotInStock }}"> {{# warehouseLabel }}<span class="product__stock--warehouse">{{ . }}</span>{{/ warehouseLabel }} <span class="product__stock--info"> {{# isInStock }} <i class="far fa-check-circle" aria-hidden="true"></i> {{# stockText }} <span class="product__stock-count">{{ . }}</span> <span title="{{ additionalText }}" class="product__stock-label">in stock</span> {{/ stockText }} {{^ stockText }} <span title="{{ additionalText }}" class="product__stock-label">In stock</span> {{/ stockText }} {{/ isInStock }} {{# isIncomingStock }} <span><i class="far fa-arrow-alt-circle-down" aria-hidden="true"></i></span> {{# stockText }} <span class="product__stock-count">{{ . }}</span> <span class="product__stock-label">incoming</span> {{/ stockText }} {{^ stockText }} <span class="product__stock-label">Incoming stock</span> {{/ stockText }} {{/ isIncomingStock }} {{# isNotInStock }} <i class="far fa-times-circle" aria-hidden="true"></i> <span class="product__stock-label">Out of stock</span> {{/ isNotInStock }} {{# incomingDate }} <div class="product__stock-expected">Expected {{ . }}</div> {{/ incomingDate }} {{# incoming.items }} {{# qty }} <span class="product__stock-incoming"> <span class="product__stock-incoming-label">Incoming</span> {{ . }}pc. </span> {{/ qty }} {{# eta }} <span class="product__stock-incoming"> <span class="product__stock-incoming-label">Expected</span> {{ . }} </span> {{/ eta }} {{/ incoming.items }} </span> </div> {{/ stock }} {{# useReevoo }} <div class="reevoo-product-list"> <reevoo-badge type="product" product-id={{ product.partNo }} variant={{ reevooDesign }}></reevoo-badge> </div> {{/useReevoo}} {{/ product }} </div> </div> <div class="prodlist-row__buy-wrapper buy-form-container"> {{# buy }} <div class="buy-quantity-container" id="{{ forms.qty.name }}"> {{# forms.qty.fields.quantity }} <input type="text" name="{{ name }}" value="{{ value }}" data-validation="{{ field.rules }}"{{# field.attrs }} {{ name }}="{{ value }}"{{/ field.attrs }}> {{/ forms.qty.fields.quantity }} {{# forms.qty.fields.__node_form_class }} <input type="hidden" name="{{ name }}" value="{{ value }}"{{# field.attrs }} {{ name }}="{{ value }}"{{/ field.attrs }}> {{/ forms.qty.fields.__node_form_class }} </div> {{/ buy }} {{# buy }} <div class="buy-button-warning-message hidden">{{ warningMessage }}</div> <button class="button buy-button{{# disabled }} buy-button--disabled{{/ disabled }}{{# warnOutOfStockPurchase }} buy-button--warn{{/warnOutOfStockPurchase}}{{# sectionClass }} js-buybutton-{{.}}{{/ sectionClass }}" type="button" data-id="{{ id }}" data-supplier-id="{{ supplierId }}" data-in-buy-form-container="true"{{# isBuy }} data-animate="true" {{/ isBuy }}title="{{# isBuy }}Add to basket{{/ isBuy }}{{# isConfigure }}Configure{{/ isConfigure }}" {{# disabled }}disabled{{/ disabled }}> <i class="fas fa-{{# isBuy }}shopping-cart{{/ isBuy }}{{# isConfigure }}wrench{{/ isConfigure }} buy-button-icon" aria-hidden="true"></i> </button> {{/ buy }} {{# notification }} <button class="button button__notify-me {{# sectionClass }}js-c-buybutton-{{.}}{{/ sectionClass }}" type="button" data-id="{{ productId }}" title="Notify me when the product is in stock again"> <i class="fas fa-envelope"></i> </button> {{/ notification }} </div> </li> {{/products.items}} </ul> </div> <div class="row column es-paginator"> <div class="pagination-wrapper"> {{# pager.anyPages }} {{# pager }} <ul class="pagination text-center"> {{# goPrev }} <li class="pagination-previous"><a href="{{ link }}" data-page="{{ page }}"></a></li> {{/ goPrev }} {{^ goPrev }} <li class="pagination-previous disabled"></li> {{/ goPrev }} {{# pagesBefore }} <li class="disabled">&hellip;</li> {{/ pagesBefore }} {{# pages }} {{# current }} <li class="current">{{ page }}</li> {{/ current }} {{^ current }} <li><a href="{{ link }}" data-page="{{ page }}">{{ page }}</a></li> {{/ current }} {{/ pages }} {{# pagesAfter }} <li class="disabled">&hellip;</li> {{/ pagesAfter }} {{# goNext }} <li class="pagination-next"><a href="{{ link }}" data-page="{{ page }}"></a></li> {{/ goNext }} {{^ goNext }} <li class="pagination-next disabled"></li> {{/ goNext }} </ul> {{/ pager }} {{/ pager.anyPages }} </div> </div>