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

{{ 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' %} {% 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 %}square{% 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 and request.productImageWidth > maxWidth %} {% 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 hideOtherLabelsWhenSoldOut = true %}{% if hideOtherLabelsWhenSoldOut != true %} {% 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 %} {% endfor %} {% assign filtered_tags = filtered_tags | split: ',' %} {% for tag in filtered_tags %}

{% endfor %} {% else %} {% if product.available == false %}

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

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

{% endfor %} {% 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 %}{% assign money_format = request.money_format_with_currency %}{% 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 %}color{% 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 %} {% capture metaData %} { "action": { {% if product.variants.size == 1 %} "addToCart": { "productId": "{{ product.variants[0].id }}" } {% else %} "goToProductDetail": {} {% endif %} } } {% endcapture %} {% assign selectOptionBtnLabel = '' %} {% if product.available == false %} {% assign selectOptionBtnLabel = "productItem.soldoutLabel" | translate: translations, 'Sold out' %} {% elsif product.variants.size == 1 %} {% assign selectOptionBtnLabel = "productItem.atcAvailableLabel" | translate: translations, 'Add to cart' %} {% else %} {% assign selectOptionBtnLabel = "productItem.atcSelectOptionsLabel" | translate: translations, 'Choose options' %} {% 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 %}

Sparco

Your wishlist

My wishlist

Add to wishlist

Share List Via Email

Or Share Via

Subscribe and get alerts about your Wishlist

Are you sure you want to delete this wishlist?

Are you sure you want to delete selected wishlist products?

Out of stock products will be not move. Are you want to move selected wishlist products?

Wishlist management page

You have been unsubscribed

You will no longer receive emails about wishlist activities from this store.

Guest shopper

Share this item

Or Share Via