{{#if settings.data_tag_enabled}}
    <article class="listItem" data-event-type="{{event}}" data-entity-id="{{id}}" data-position="{{position}}" data-name="{{name}}" data-product-category="{{#each category}}{{#if @last}}{{this}}{{else}}{{this}}, {{/if}}{{/each}}" data-product-brand="{{brand.name}}" data-product-price="{{#if price.with_tax}}{{price.with_tax.value}}{{else}}{{price.without_tax.value}}{{/if}}">
{{else}}
    <article class="listItem">
{{/if}}
    <figure class="listItem-figure">
        {{#or price.sale_price_with_tax.value price.sale_price_without_tax.value}}
            {{#if theme_settings.product_sale_badges '===' 'sash'}}
                <div class="sale-flag-sash">
                    <span class="sale-text">On Sale!</span>
                </div>
            {{else if theme_settings.product_sale_badges '===' 'topleft'}}
                <div class="sale-flag-side">
                    <span class="sale-text">On Sale!</span>
                </div>
            {{else if theme_settings.product_sale_badges '===' 'burst'}}
                <div class="starwrap">
                    <div class="sale-text-burst">On Sale!</div>
                    <div class="sale-flag-star"></div>
                </div>
            {{/if}}
        {{/or}}    
        {{> components/common/responsive-img
            image=image
            class="listItem-image"
            fallback_size=theme_settings.productgallery_size
            lazyload=theme_settings.lazyload_mode
            default_image=theme_settings.default_image_product
        }}
        {{#unless hide_product_quick_view}}
            {{#if theme_settings.show_product_quick_view}}
                <div class="listItem-figureBody">
                    <a {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}} class="button button--small listItem-button quickview" data-product-id="{{id}}">{{lang 'products.quick_view'}}</a>
                </div>
            {{/if}}
        {{/unless}}
    </figure>
    <div class="listItem-body">
        <div class="listItem-content">
            <div class="listItem-details">
                {{#if show_rating}}
                    <p class="listItem-rating">{{> components/products/ratings rating=rating}}</p>
                {{/if}}
                {{#if brand.name}}
                <p class="listItem-brand">{{brand.name}}</p>
                {{/if}}
                <h4 class="listItem-title">
                    <a href="{{url}}" 
                    aria-label="{{name}},{{> components/products/product-aria-label}}"
                    {{#if settings.data_tag_enabled}}
                    data-event-type="product-click"
                    {{/if}}
                    >
                        {{name}}
                    </a>
                </h4>
                {{#if summary}}
                    <p>{{{summary}}}</p>
                {{/if}}
            </div>
            <div class="listItem-actions">
                {{#or customer (if theme_settings.restrict_to_login '!==' true)}}
                    {{#if price}}
                        <div class="listItem-price">{{> components/products/price price=price}}</div>
                    {{/if}}
                    {{#if show_cart_action}}
                        {{#if has_options}}
                            <a href="{{url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}} class="button button--small" data-product-id="{{id}}">{{lang 'products.choose_options'}}</a>
                        {{/if}}
                        {{#if pre_order}}
                            <a href="{{pre_order_add_to_cart_url}}" data-event-type="product-click" class="button button--primary">{{lang 'products.pre_order'}}</a>
                        {{/if}}
                        {{#if add_to_cart_url }}
                            <a href="{{add_to_cart_url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}} class="button button--primary">{{lang 'products.add_to_cart'}}</a>
                        {{/if}}
                        {{#if out_of_stock_message }}
                            <a href="{{url}}" data-event-type="product-click" class="button button--small" data-product-id="{{id}}">{{out_of_stock_message}}</a>
                        {{/if}}
                    {{/if}}
                {{else}}
                    {{> components/common/login-for-pricing}}
                {{/or}}
                {{#if show_compare}}
                    <label class="button button--small" for="compare-{{id}}">
                        {{lang "products.compare"}} <input type="checkbox" name="products[]" value="{{id}}" id="compare-{{id}}" data-compare-id="{{id}}">
                    </label>
                {{/if}}
            </div>
        </div>
    </div>
</article>