{{#each products}}
<li class="product-item product_default">
    <div class="product-item-wrapper">
        <div class="product_img">
            {{#if this.image}}
                <a href="{{this.url}}"
                    class="listItem-figure__link"
                    aria-label="{{name}},{{> components/products/product-aria-label}}"
                    {{#if settings.data_tag_enabled}}
                    data-event-type="product-click"
                    {{/if}}
                >
                {{> components/common/responsive-img
                    image=this.image
                    class="listItem-image"
                    fallback_size=theme_settings.productgallery_size
                    lazyload=theme_settings.lazyload_mode
                    default_image=theme_settings.default_image_product
                }}
                </a>
            {{else}}
                <a href="{{this.url}}"
                    class="listItem-figure__link"
                    aria-label="{{name}},{{> components/products/product-aria-label}}"
                    {{#if settings.data_tag_enabled}}
                    data-event-type="product-click"
                    {{/if}}
                    >
                    <img src="{{cdn  'assets/img/ProductDefault.gif'}}">
                </a>
            {{/if}}
            <!-- <img src="{{cdn  'assets/img/blog3.jpg'}}"> -->
        </div>
        <div class="product_content">
            <div class="product_title_top">
                <span>
                    {{#each this.custom_fields}}
                        {{#if name '===' '_product_tag'}}
                            {{#if value}}
                                {{value}}
                            {{/if}}
                        {{/if}}
                    {{/each}}
                </span>
            </div>
            <div class="product_title">
                <a href="{{this.url}}"
                    aria-label="{{name}},{{> components/products/product-aria-label}}"
                    {{#if settings.data_tag_enabled}}
                    data-event-type="product-click"
                    {{/if}}
                >
                    <span style="display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-moz-box-orient: verticle; -webkit-line-clamp: 1;">{{this.name}}</span>
                </a>
            </div>
            <div class="product_dec">
                <span class="product_dec_span" style="display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-moz-box-orient: verticle;;-webkit-line-clamp: 3;">
                    <!-- {{this.summary}} -->
                    {{#each this.custom_fields}}
                        {{#if name '===' 'Description'}}
                            {{value}}
                        {{/if}}
                    {{/each}}
                </span>
            </div>
            <div class="product_operation">
                <span class="operation_first">
                    {{#if this.stock_level '===' null}}
                        <label class="instock">IN STOCK</label>
                    {{else}}
                        {{#if this.stock_level '>' 0}}
                        <label class="instock">IN STOCK</label>
                        {{else}}
                        <label class="outstock">OUT STOCK</label>
                        {{/if}}
                    {{/if}}
                </span>
                <span class="operation_second" op2="{{this.id}}">
                    {{this.price.without_tax.formatted}}
                </span>
                <!-- <input type="button" class="operation_add_card" value="ADD TO CART"> -->
                <div class="operation_third" id="tocart" op3="{{this.id}}">
                    <input type="button" onclick="plpaddcart('{{this.id}}',this)" class="button button--primary  btn_add_to_card" data-wait-message="{{lang 'products.adding_to_cart'}}" value="ADD TO CART" />
                </div>
                {{!--
                <a href="{{this.url}}" class="operation_search"><i class="iconfont iconsousuo btn_search"></i></a>
                <!-- <input type="button" class="operation_search " value=""> -->
                --}}
            </div>
        </div>
        <div class="right_icon right_icon_hide">
            <label class="" for="compare-{{this.id}}">
                <span class="right_icon_span_detail">
                    <i class="iconfont iconxiangxi"></i>
                    <input type="checkbox" name="products[]" value="{{this.id}}" id="compare-{{this.id}}" data-compare-id="{{this.id}}">
                </span>
            </label>

            <form id="{{this.id}}" action="{{this.add_to_wishlist_url}}">
                <span class="right_icon_span_collection" onclick="$(this).next().click()">
                    <i class="iconfont iconshoucang-solid"></i>
                </span>
                <input class="button" type="submit" value="" style="display: none;">
            </form>
        </div>
    </div>
</li>

{{/each}}

<script>
    var productIds = "{{#each products}}{{#if has_options}}{{#unless @last}}{{id}},{{else}}{{id}}{{/unless}}{{/if}}{{/each}}" ;
    //console.log(productIds)
    //console.log(productIds.length)
    fetch('/graphql', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer {{settings.storefront_api.token}}'
        },
        body: JSON.stringify({
            query: `
                query getProductsByIds {
                    site {
                        products (entityIds: [` + productIds.substring() + `], first: 50) {
                            edges {
                                node {
                                    id
                                    entityId
                                    name
                                    path
                                    productOptions {
                                        edges {
                                            node {
                                                entityId
                                                displayName
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            `
        })
    })
    .then(res => res.json())
    .then(json => {
        //console.log('-----')
        //console.log(json)
        var products = json.data.site.products.edges;
        //console.log(products);
        $(products).each(function(index, element) {
            //console.log(element)
            var thisProductId = element.node.entityId;
            var thisProductId = thisProductId.toString();
            var productUrl = element.node.path;
            //console.log(productUrl)
            var array = [thisProductId,productUrl]
            $(element.node.productOptions.edges).each(function(key, value){
                array.push(value.node.displayName);


            })
            //console.log(array)


            for (var i=0; i<array.length;i++){
                var status = 'simple-product';
                var name = array[i];
                //console.log('name', name)
                //console.log('value', value)
                var pd = array[0];
                if(name.indexOf("Configurable Product^") != -1) {
                    var pd = array[0];
                    var path = array[1];
                    status = 'configurable-product';
                    $(`[op3="${pd}"]`).html(`<a href="${path}" class="btn_add_to_card">View Product</a>`);
                    $(`[op2=${pd}]`).empty()


                    break;
                }else if(name == 'Group') {
                    var pd = array[0];
                    var path = array[1];
                    status = 'group-product';
                    $(`[op3="${pd}"]`).html(`<a href="${path}" class="btn_add_to_card">View Product</a>`);
                    $(`[op2=${pd}]`).empty();
                    break;
                }
            }
                //console.log(pd+' '+status)

        })
    })
</script>