{% assign widgetNameTranslationLabel = 'recommendation.' | append: widgetId %}

{{ widgetNameTranslationLabel | translate: translations, widgetName }}

{% if widgetDesignSettings.layoutDisplay == 'carousel' %}

{% for product in products %}

{% if product.original_images != nil %}{% assign imageArray = product.original_images %}{% else %}{% assign imageArray = product.images_info %}{% endif %}{% assign productId = product.id %}{% if product.variant_id %}{% assign productId = product.variant_id %}{% endif %}{% assign filterOptionIdImageBaseOn = 'pf_opt_color' %}{% assign optionName = filterOptionIdImageBaseOn | replace: 'pf_opt_','' %}{% assign valueRequest = request[filterOptionIdImageBaseOn] %}{% assign selectedVariantImageByFilterOption = nil %}{% for item in product.variants %}{% assign optionNameValue = optionName | append: ":" | append: valueRequest %}{% if item.merged_options contains optionNameValue %}{% if item.image %}{% assign selectedVariantImageByFilterOption = item.image %}{% endif %}{% break %}{% endif %}{% endfor %}{% capture productVariants %}[{% for variant in product.variants %}{"title": "{{ variant.title }}","id": "{{ variant.id }}","available": {{ variant.available }}}{% unless forloop.last %},{% endunless %}{% endfor %}]{% endcapture %}{% capture productData %}{"handle": "{{ product.handle }}","variantId": "{{ product.variant_id }}","splitProduct": "{{ product.split_product }}","variants": {{ productVariants | json | escape }},"priceMin": "{{ product.price_min }}","priceMax": "{{ product.price_max }}","compareAtPriceMin": "{{ product.compare_at_price_min }}","compareAtPriceMax": "{{ product.compare_at_price_max }}","images": {{ imageArray | json | escape }},"options_with_values": {{ product.options_with_values | json | escape }},"selectedVariantImageByFilterOption": "{{ selectedVariantImageByFilterOption | escape }}"}{% endcapture %}

{% assign firstImageSrc = '' %} {% if selectedVariantImageByFilterOption != nil %} {% assign firstImageSrc = selectedVariantImageByFilterOption %} {% else %} {% assign firstImageSrc = product.images_info[0].src %} {% endif %} {% assign widthParam = "&width=" %} {% assign widths = "200,300,400,500" | split: "," %} {% assign maxWidth = 400 %} {% if request.productImageWidth != blank %} {% assign maxWidth = request.productImageWidth | plus: 0 %} {% endif %} {% if product.images_info[0] %} {% capture srcset %} {% for width in widths %} {% assign widthNo = width | plus: 0%} {% if widthNo < maxWidth %} {{ firstImageSrc }}{{ widthParam }}{{ width }} {{ width }}w, {% else %} {{ firstImageSrc }}{{ widthParam }}{{ maxWidth }} {{ maxWidth }}w {% break %} {% endif %} {% endfor %} {% endcapture %} {% assign productPerRow = 4 %} {% if request.productPerRow != blank %} {% assign productPerRow = request.productPerRow | plus: 0 %} {% endif %}

{% if product.images_info[1] %} {% assign secondImageSrc = product.images_info[1].src %} {% capture secondImageSrcset %} {% for width in widths %} {% assign widthNo = width | plus: 0 %} {% if widthNo < maxWidth %} {{ secondImageSrc }}{{ widthParam }}{{ width }} {{ width }}w, {% else %} {{ secondImageSrc }}{{ widthParam }}{{ maxWidth }} {{ maxWidth }}w {% break %} {% endif %} {% endfor %} {% endcapture %}

{% endif %} {% else %}

{% endif %}

{% assign total_page = total_product | divided_by: request.limit | ceil %}{% assign to_product = request.page | times: request.limit %}{% assign custom_index = to_product | minus: request.limit | plus: index %}{% if request.page == total_page %}{% assign to_product = total_product %}{% assign total_product_before_last_page = total_page | minus: 1 | times: request.limit %}{% assign custom_index = total_product_before_last_page | plus: index %}{% endif %}

{% assign compareAtPriceMin = product.compare_at_price_min | default: 0 %}{% assign isSale = compareAtPriceMin > product.price_min %}{% if isSale %}{% assign percent = compareAtPriceMin | minus: product.price_min | times: 100 | divided_by: compareAtPriceMin| round %}{% assign salePercent = percent | append: '%' %}{% assign saleAmount = compareAtPriceMin | minus: product.price_min %}

{{ "productItem.productItemSale" | translate: translations, "Sale" | replace: '{{salePercent}}', salePercent | replace: '{{saleAmount}}', saleAmount }}

{% endif %}{% if product.available == false %}

{{ "productItem.productItemSoldOut" | translate: translations, "Sold out" }}

{% endif %}{% assign filtered_tags = "" %}{% for tag in product.tags %}{% if tag contains 'pfs:label' %}{% assign tag_without_label = tag | remove: 'pfs:label-' %}{% assign filtered_tags = filtered_tags | append: tag_without_label | append: ',' %}{% endif %}{% if tag contains 'new' or tag contains 'NEW' %}

{% endif %}{% endfor %}{% assign filtered_tags = filtered_tags | split: ',' %}{% if filtered_tags.size > 0 %} {% for tag in filtered_tags %}

{% endfor %}{% endif %}

{% assign productid = product.id %} {% if product["variants"] and product["variants"][0] %} {% assign productid = product["variants"][0].id %} {% endif %} {% assign isAddToCart = product.variants.size == 1 %} {% capture metaData %} { "action": { {% if isAddToCart %} "addToCart": { "productId": "{{ product.variants[0].id }}" } {% else %} "quickAddToCart": { "productId": "{{ product.id }}", "variant_id": "{{ product.variant_id }}" } {% endif %} } } {% endcapture %} {% assign selectOptionBtnLabel = '' %} {% if product.available == false %} {% assign selectOptionBtnLabel = "productItem.soldoutLabel" | translate: translations, 'Sold out' %} {% elsif isAddToCart %} {% assign selectOptionBtnLabel = "productItem.atcAvailableLabel" | translate: translations, 'Add to cart' %} {% else %} {% assign selectOptionBtnLabel = "productItem.atcSelectOptionsLabel" | translate: translations, 'Choose options' %} {% endif %} {% capture metaData %} { "action": { "quickView": { "productId": "{{ product.id }}" } } } {% endcapture %}

{% comment %} POPUP {% endcomment %} {% comment %} POPUP {% endcomment %}

{% comment %} This Template contains a few variables built from the client js side {% endcomment %}{% if request.previewMode == true %} {% assign compareAtPriceMin = 0 %} {% if product.compare_at_price_min %} {% assign compareAtPriceMin = product.compare_at_price_min %} {% endif %} {% assign isSale = compareAtPriceMin > product.price_min %}

{{ product.price_min | currency_format: request.money_format }} {% if product.compare_at_price_min %} {{ product.compare_at_price_min | currency_format: request.money_format }} {% endif %} {% assign sale_price = product.compare_at_price_min | minus: product.price_min %}

{% else %} {% if compareAtPricePosition == 'top' or compareAtPricePosition == 'bottom' %}

{{ priceValueWithFormat }} {% if savingPriceWithFormat %} {{ savingPriceWithFormat }} {% endif %}

{% if compareAtPriceWithFormat %}

{% endif %}

{% else %}

{{ priceValueWithFormat }} {% if compareAtPriceWithFormat %} {{ compareAtPriceWithFormat }} {% endif %} {% if savingPriceWithFormat %} {{ savingPriceWithFormat }} {% endif %}

{% endif %}{% endif %}

{% endfor %} {% assign numberOfProductPerRow = widgetDesignSettings.numberOfProductPerRow %} {% assign numberOfRecommendProduct = widgetDesignSettings.numberOfRecommendProduct %} {% if numberOfRecommendProduct < numberOfProductPerRow %} {% assign sliderPages = 1 %} {% assign disable = "disabled" %} {% else %} {% assign sliderPages = numberOfRecommendProduct | divided_by: numberOfProductPerRow | ceil %} {% assign disable = "" %} {% endif %}

{% else %} {% assign bundleStyle = widgetDesignSettings.bundleStyle %}

{% for product in products %}

{% if product.checked %}

{% else %}

{% endif %}

{% if product.images_info[0] %}

{% else %} {{ product.title | escape }}

{% endif %}

{% if product.checked %} {% endif %} {% if bundleStyle == 'style2' %}

{% if forloop.index0 == 0 %} This item: {{ product.title | escape }} {% elsif product.checked %} {{ product.title | escape }} {% else %} {{ product.title | escape }} {% endif %}

{% endif %}

{% unless forloop.last %}

{% endunless %} {% endfor %}

{% if bundleStyle == 'style1' %} {% for product in products %}

{% if forloop.index0 == 0 %} This item: {{ product.title | escape }} {% elsif product.checked %} {{ product.title | escape }} {% else %} {{ product.title | escape }} {% endif %}

{% endfor %} {% endif %}

{% if hasSelectedProduct == true %}

Total price: {{ totalPrice }}

{% endif %}

【Directors 165~ 170cm】

Your collection's name

Your collection's name