{{#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">
        <a href="{{url}}"
           class="listItem-figure__link"
           aria-label="{{name}},{{> components/products/product-aria-label}}"
           {{#if settings.data_tag_enabled}}
           data-event-type="product-click"
           {{/if}}
        >
        {{#if stock_level '===' 0}}
            {{> components/products/product-badge
                badge-type='sold-out'
                badge_view=theme_settings.product_sold_out_badges
                badge_label=theme_settings.pdp_sold_out_label
            }}
        {{else}}
            {{#or price.sale_price_with_tax.value price.sale_price_without_tax.value}}
                {{> components/products/product-badge
                    badge-type='sale'
                    badge_view=theme_settings.product_sale_badges
                    badge_label=theme_settings.pdp_sale_badge_label
                }}
            {{/or}}
        {{/if}}
        {{> 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
        }}
        </a>
        {{#unless hide_product_quick_view}}
            {{#if theme_settings.show_product_quick_view}}
                <div class="listItem-figureBody">
                    <button type="button" {{#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'}}</button>
                </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_target=name rating=rating}}</p>
                {{/if}}
                {{!--
                {{#if brand.name}}
                <p class="listItem-brand">{{brand.name}}</p>
                {{/if}}
                --}}
                <h4 class="listItem-title">

                    {{#filter custom_fields 'Display name' property="name"}}
                    <a href="{{url}}"
                    aria-label="{{name}},{{> components/products/product-aria-label}}"
                    {{#if settings.data_tag_enabled}}
                    data-event-type="product-click"
                    {{/if}}
                    title="{{value}}"
                    style="display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 1;"
                    >
                        {{value}}
                    </a>
                    {{else}}
                    <a href="{{url}}"
                    aria-label="{{name}},{{> components/products/product-aria-label}}"
                    {{#if settings.data_tag_enabled}}
                    data-event-type="product-click"
                    {{/if}}
                    title="{{#if brand.name}}{{brand.name}} {{/if}}{{name}}"
                    style="display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 1;"
                    >
                        {{#if brand.name}}{{brand.name}} {{/if}}{{name}}
                    </a>
                    {{/filter}}

                </h4>
                {{!--
                {{#if summary}}
                    <p>{{{summary}}}</p>
                {{/if}}
                --}}
                <div class="product-desc">

                    {{#filter custom_fields 'Description' property="name"}}
                    <span style="display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 3;">{{value}}</span>
                    {{/filter}}

                </div>
            </div>
            <div class="listItem-stock"></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="add_to_cart_btn 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="add_to_cart_btn 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="add_to_cart_btn button button--primary">{{lang 'products.add_to_cart'}}</a>
                        {{/if}}
                        {{#if out_of_stock_message }}
                            <a href="{{url}}" data-event-type="product-click" class="add_to_cart_btn button button--small" data-product-id="{{id}}">{{out_of_stock_message}}</a>
                        {{/if}}




                    {{/if}}
                {{else}}
                    {{> components/common/login-for-pricing}}
                {{/or}}

            </div>
            {{#if show_compare}}
            <div class="listItem-compare-action">

                <label class="button button--small compare-btn" for="compare-{{id}}">
                    <i class="iconfont iconxiangxi" title="{{lang "products.compare"}} "></i>
                    <input type="checkbox" name="products[]" value="{{id}}" id="compare-{{id}}" data-compare-id="{{id}}">
                </label>
            </div>
            {{/if}}
        </div>
    </div>
</article>