Headwear

{{ widgetNameTranslationLabel | translate: translations, widgetName }}

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

{% for product in products %}

{% capture domain %}{{ widgetDesignSettings.tenantId }}{% endcapture %} {% 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' %} {% capture filterOptionIdImageBaseOn %}pf_opt_color{% endcapture %} {% 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 }}", "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 %}

{%- capture aspectRatio %}natural{% endcapture -%}

{% assign aspect_ratio = '' -%} {% if aspectRatio == 'natural' -%} {% assign imageWidth = product.images_info[0].width -%} {% assign imageHeight = product.images_info[0].height -%} {% assign aspect_ratio = aspect_ratio | append: 'aspect-ratio:' | append: imageWidth | append: '/' | append: imageHeight -%} {% endif -%}

{% 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,700,800" | split: "," -%} {% if request.device contains 'mobile' -%} {% assign maxWidth = 400 -%} {% else -%} {% assign maxWidth = 700 -%} {% endif -%} {% if request.productImageWidth != blank -%} {% assign imageWidth = request.productImageWidth | plus: 0 -%} {% if imageWidth > maxWidth -%} {% assign maxWidth = imageWidth -%} {% endif -%} {% 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 hideOtherLabelsWhenSoldOut = true -%} {% if hideOtherLabelsWhenSoldOut != true -%} {% assign compareAtPriceMin = product.compare_at_price_min | default: 0 -%} {% if compareAtPriceMin > product.price_min -%} {% assign percent = compareAtPriceMin | minus: product.price_min | times: 100 | divided_by: compareAtPriceMin| round -%} {% assign salePercent = percent | append: '%' -%} {% assign saleAmount = compareAtPriceMin | minus: product.price_min -%} {% assign productItemSaleTranslated = "productItem.productItemSale" | translate: translations, "Sale" | replace: '{{salePercent}}', salePercent | replace: '{{saleAmount}}', saleAmount -%}

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

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

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

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

{% else -%} {% assign compareAtPriceMin = product.compare_at_price_min | default: 0 -%} {% if compareAtPriceMin > product.price_min -%} {% assign percent = compareAtPriceMin | minus: product.price_min | times: 100 | divided_by: compareAtPriceMin| round -%} {% assign salePercent = percent | append: '%' -%} {% assign saleAmount = compareAtPriceMin | minus: product.price_min -%} {% assign translatedText = "productItem.productItemSale" | translate: translations, "Sale" | replace: '{{salePercent}}', salePercent | replace: '{{saleAmount}}', saleAmount %}

{% endif -%} {% endif -%} {% endif -%}

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

{% comment %} This Template contains a few variables built from the client js side {% endcomment %} {% assign removePriceDecimal = false -%} {% assign decimalDelimiter = '' -%} {% assign withoutTrailingZeros = true -%} {% assign showCentAsSuperscript = false -%} {% assign money_format = request.money_format | strip_html -%} {% assign money_format = request.money_format_with_currency | strip_html -%} {% assign showSavingDisplay = false -%} {% assign minPrice = product.price_min | times: 1.0 -%} {% assign maxPrice = 0 -%} {% if product.price_max -%} {% assign maxPrice = product.price_max | times: 1.0 -%} {% endif -%} {% comment %} convert variable compareAtPriceMin to number {% endcomment %} {% assign compareAtPriceMin = 0 -%} {% if product.compare_at_price_min -%} {% assign compareAtPriceMin = product.compare_at_price_min | times: 1.0 -%} {% endif -%} {% assign isSale = false -%} {% assign salePercent = 0 -%} {% assign saleAmount = 0 -%} {% if compareAtPriceMin > minPrice -%} {% assign isSale = true -%} {% endif -%} {% assign compareAtPriceWithFormat = '' -%} {% unless compareAtPriceMin == null or compareAtPriceMin == 0 or isSale == false -%} {% comment %} calculate salePercent base on compareAtPriceMin and minPrice {% endcomment %} {% assign compare = compareAtPriceMin | minus: minPrice | times: 100 -%} {% assign salePercent = compare | divided_by: compareAtPriceMin | ceil | append: '%' -%} {% comment %} compareAtPriceWithFormat is compare price with PriceMin and format currency {% endcomment %} {% assign compareAtPriceWithFormat = compareAtPriceMin | format_currency: money_format, showCentAsSuperscript, removePriceDecimal, decimalDelimiter, withoutTrailingZeros -%} {% assign saleAmount = compareAtPriceMin | minus: minPrice -%} {% endunless -%} {% comment %} Format price min {% endcomment %} {% assign priceMinWithFormat = minPrice | format_currency: money_format, showCentAsSuperscript, removePriceDecimal , decimalDelimiter, withoutTrailingZeros -%} {% comment %} Format price max {% endcomment %} {% assign priceMaxWithFormat = '' -%} {% if product.price_max and maxPrice > minPrice -%} {% assign priceMaxWithFormat = maxPrice | format_currency: money_format, showCentAsSuperscript, removePriceDecimal , decimalDelimiter, withoutTrailingZeros -%} {% endif -%} {% comment %} priceMax used for multi variant price display where it can have min-max price with format and translation {% endcomment %} {% assign hasMultiVariantPrice = false -%} {% if translations.productItem.amount contains "minPrice" -%} {% assign hasMultiVariantPrice = true -%} {% endif -%} {% assign isSamePrice = true -%} {% if minPrice != maxPrice or product.compare_at_price_min != product.compare_at_price_max -%} {% assign isSamePrice = false -%} {% endif -%} {% assign priceValueWithFormat = priceMinWithFormat -%} {% if isSamePrice == false and maxPrice > minPrice and hasMultiVariantPrice -%} {% assign priceValueWithFormat = "productItem.amount" | translate: translations, "" | replace: '{{minPrice}}', priceMinWithFormat | replace: '{{maxPrice}}', priceMaxWithFormat -%} {% endif -%} {% assign savingPriceWithFormat = '' -%} {% unless showSavingDisplay == false or saleAmount == 0 -%} {% assign saleAmountWithFormat = saleAmount | format_currency: money_format, showCentAsSuperscript, removePriceDecimal, decimalDelimiter, withoutTrailingZeros -%} {% assign savingPriceWithFormat = "productItem.savingAmount" | translate: translations, "Save {{saleAmount}}" | replace: '{{saleAmount}}', saleAmountWithFormat | replace: '{{salePercent}}', salePercent -%} {% endunless -%} {% comment %} Price compare display top or bottom {% endcomment %} {% comment %} Price compare display left or right {% endcomment %}

{{ priceValueWithFormat }} {% if compareAtPriceWithFormat != '' -%} {{ compareAtPriceWithFormat }} {% endif -%} {% if savingPriceWithFormat != '' -%} {{ savingPriceWithFormat }} {% endif -%}

{% assign swatches = '' %} {% assign swatches = 'swatch item 1' %} {% capture swatchType %}color{% endcapture %} {% capture swatchBy %}product-image{% endcapture %} {% capture swatchShape %}circle{% endcapture %} {% assign swatchShapeClasses = '' %} {% if swatchShape == 'box' %} {% assign swatchShapeClasses = swatchShapeClasses | append: 'boost-sd__radio-label--non-radius'%} {% endif %} {% if swatchShape == 'circle' %} {% assign swatchShapeClasses = swatchShapeClasses | append: 'boost-sd__radio-label--circle'%} {% endif %} {% assign hideTextClasses = '' %} {% if swatchBy != '' and swatchBy != 'text' %} {% assign hideTextClasses = hideTextClasses | append: 'boost-sd__radio-label--hide-text'%} {% endif %} {% for swatch in product.options_with_values %} {% assign maxItem = 4 %} {% assign optionsLength = swatch.values| size %} {% if swatch.name %} {% if swatch.name == swatchType %}

{% for value in swatch.values limit: maxItem %}

{% endfor %} {% if optionsLength > maxItem %} {% assign count = optionsLength | minus: maxItem %} {% endif %}

{% endif %} {% endif %} {% endfor %}

{% 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 %} {% endif %}

{% if product.images_info[0] %} {{ product.title | escape }}

{% 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 %}

{%- if product.selectedOption.title != 'Default Title' -%} {% 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 %}

{%- if product.selectedOption.title != 'Default Title' -%} {% endif %} {{ product.selectedOption.price }}

{% endfor %} {% endif %}

{% if hasSelectedProduct == true %}

Total price: {{ totalPrice }}

{% endif %}

Language

Currency