{{# products }} {{^ anyItems}} <span class="no-items">No products found.</span> {{/anyItems}} {{# items }} <div class="prodlist-row grid-layout-cols-3" 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.link }}</a>{{/ product.link }} {{# product.imageOverlays }}{{# 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 }}{{/ product.imageOverlays }} </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 }} {{# 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> <div class="prodlist-row__buy-wrapper buy-form-container"> {{# prices.items }} <div class="prodlist-row__price"> <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 class="prodlist-row__prodinfo"> {{# product }} {{# 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> <i class="fa fa-refresh"></i> {{/ 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> <i class="fa fa-refresh"></i> {{/ isNotInStock }} {{# incomingDate }} <div class="product__stock-expected">Additional stock 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">Additional stock expected</span> {{ . }} </span> {{/ eta }} {{/ incoming.items }} </span> </div> {{/ stock }} {{/ product }} </div> <div class="quick-buy"> {{# 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> </div> </div> {{/ items }} {{/ products }}