{% assign widgetNameTranslationLabel = 'recommendation.' | append: widgetId %}{% assign widgetTitle = '' %}{% if widgetDesignSettings.titleAlignment != '' %} {% assign widgetTitle = widgetTitle | append: 'boost-sd__recommendation-title--' | append: widgetDesignSettings.titleAlignment %}{% endif %}

{{ 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 %}{% endcapture %}{% assign optionName = filterOptionIdImageBaseOn | replace: 'pf_opt_', '' %}{% assign filterValues = request[filterOptionIdImageBaseOn] %}{% assign selectedVariantImageByFilterOption = nil %}{% comment %}NEW LOGIC:Only find images based on selected filters if the variant matchesthe item currently being displayed for split products.{% endcomment %}{% if product.variant_id %} {% assign targetVariantId = product.variant_id %} {% for variant in product.variants %} {% if variant.id == targetVariantId %} {% if filterValues != nil and filterValues.size > 0 %} {% for filterValue in filterValues %} {% assign optionNameValue = optionName | append: ":" | append: filterValue | strip %} {% if variant.merged_options contains optionNameValue %} {% if variant.image %} {% assign selectedVariantImageByFilterOption = variant.image %} {% break %} {% endif %} {% endif %} {% endfor %} {% endif %} {% if selectedVariantImageByFilterOption == nil and variant.image %} {% assign selectedVariantImageByFilterOption = variant.image %} {% endif %} {% if selectedVariantImageByFilterOption != nil %} {% break %} {% endif %} {% endif %} {% endfor %}{% else %} {% for item in product.variants %} {% for filterValue in filterValues %} {% assign optionNameValue = optionName | append: ":" | append: filterValue | strip %} {% if item.merged_options contains optionNameValue %} {% if item.image %} {% assign selectedVariantImageByFilterOption = item.image %} {% break %} {% endif %} {% endif %} {% endfor %} {% if selectedVariantImageByFilterOption != nil %}{% break %}{% endif %} {% endfor %}{% endif %}{% capture productVariants %} [ {% for variant in product.variants %} {% assign preorder = '{}' %} {% if variant.preorder and variant.preorder != nil and variant.inventory_management != null %} {% assign preorder = variant.preorder %} {% else %} {% assign preorder = '' %} {% endif %} { "title": "{{ variant.title }}", "id": "{{ variant.id }}", "available": {{ variant.available }}, "inventory_management": {{ variant.inventory_management | json }}, "inventory_policy": {{ variant.inventory_policy | json }}, "preorder": {{ preorder | json }} }{% 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 }}", "category": "{{ product.product_type | escape }}", "tags": {{ product.tags | json | escape }}, "combined_listing_role": {{ product.combined_listing_role | json | escape }} }{% endcapture %}{%- capture borderLayoutSetting %}noBorder{% endcapture -%}{% if borderLayoutSetting == 'noPadding' %} {% assign borderLayoutItem = 'no-padding' %}{% elsif borderLayoutSetting == 'hasPadding' %} {% assign borderLayoutItem = 'border-has-padding' %}{% elsif borderLayoutSetting == 'noPaddingImage' %} {% assign borderLayoutItem = 'border-no-padding-image' %}{% else %} {% assign borderLayoutItem = 'no-border' %}{% endif %}{% assign productLocale = '' %}{% if request.current_locale != blank %} {% assign productLocale = request.current_locale %}{% endif %}{% assign variantUrl = '' %}{% if product.variant_id %} {% assign variantUrl = '?variant=' | append: product.variant_id %}{% endif %}

{%- capture aspectRatioSetting %}natural{% endcapture -%}{% capture hoverEffect %}reveal-second-image{% endcapture %}{% assign productImages = product.images_info %}{% if product.split_product %} {% assign productImages = product.original_images %}{% endif %}

{% assign effectClasses = '' %} {% if hoverEffect == 'reveal-second-image-and-zoom-in' %} {% assign effectClasses = effectClasses | append: 'boost-sd__product-image-wrapper--zoom-in' %} {% if productImages.size > 1 %} {% assign effectClasses = effectClasses | append: ' boost-sd__product-image-wrapper--has-second-image' %} {% endif %} {% endif %} {% if hoverEffect == 'reveal-second-image' and productImages.size > 1 %} {% assign effectClasses = effectClasses | append: 'boost-sd__product-image-wrapper--has-second-image' %} {% endif %} {% if hoverEffect == 'zoom-in' %} {% assign effectClasses = effectClasses | append: 'boost-sd__product-image-wrapper--zoom-in' %} {% endif %} {% assign aspectRatio = '' -%} {% if aspectRatioSetting == 'natural' -%} {% assign imageWidth = product.images_info[0].width -%} {% assign imageHeight = product.images_info[0].height -%} {% assign aspectRatio = aspectRatio | 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 -%} {%- comment -%} c_ 商品カード画像スライダー（テーマの c_product-card-slider と同一マークアップ。仕様変更時はテーマ側も直す）{%- endcomment -%} {% if product.images_info[0] -%} {% assign productPerRow = 4 -%} {% if request.productPerRow != blank -%} {% assign productPerRow = request.productPerRow | plus: 0 -%} {% endif -%} {%- comment -%} 1商品あたりの最大表示枚数。テーマ設定 c_product_card_slider_max_images と揃える {%- endcomment -%} {% assign cSliderMax = 5 -%}

{% assign cSlideCount = 0 -%} {% for image in productImages -%} {% if cSlideCount >= cSliderMax -%} {% break -%} {% endif -%} {%- comment -%} 1枚目はカラー絞り込み時のバリエーション画像を優先（既存の firstImageSrc を踏襲）{%- endcomment -%} {% assign cImageSrc = image.src -%} {% if cSlideCount == 0 -%} {% assign cImageSrc = firstImageSrc -%} {% endif -%} {% capture cSrcset -%} {% for width in widths -%} {% assign widthNo = width | plus: 0 -%} {% if widthNo < maxWidth -%} {{ cImageSrc }}{{ widthParam }}{{ width }} {{ width }}w, {% else -%} {{ cImageSrc }}{{ widthParam }}{{ maxWidth }} {{ maxWidth }}w {% break -%} {% endif -%} {% endfor -%} {% endcapture -%} {{ product.title | escape }}

{% assign cSlideCount = cSlideCount | plus: 1 -%} {% endfor -%}

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

{% endif -%} {% if productImages.size > 1 -%} {% endif -%}

{% assign hideOtherLabelsWhenSoldOut = true -%}{% assign moneyFormat = request.money_format | strip_html -%}{% assign removePriceDecimal = false -%}{% assign showCentAsSuperscript = false -%}{% assign decimalDelimiter = '' -%}{% assign withoutTrailingZeros = true -%}{% assign priceMin = product.price_min | default: 0 -%}{% assign priceMax = product.price_max | default: 0 -%}{% assign compareAtPriceMin = product.compare_at_price_min | default: 0 -%}{% assign compareAtPriceMax = product.compare_at_price_max | default: 0 -%}{% assign all_sale = false -%}{% assign partial_sale = false -%}{% assign sale_count = 0 -%}{% assign variant_size = 0 -%}{% if product.variants != blank -%} {% for variant in product.variants -%} {% if variant.available == true -%} {% assign variant_size = variant_size | plus: 1 -%} {% assign v_price = variant.price | plus: 0 -%} {% assign v_compare = variant.compare_at_price | plus: 0 -%} {% if v_compare > v_price -%} {% assign sale_count = sale_count | plus: 1 -%} {% endif -%} {% endif -%} {% endfor -%}{% endif -%}{% if variant_size > 0 -%} {% if sale_count > 0 -%} {% if sale_count == variant_size -%} {% assign all_sale = true -%} {% else -%} {% assign partial_sale = true -%} {% endif -%} {% endif -%}{% else -%} {% if compareAtPriceMin > priceMin and compareAtPriceMax > priceMax -%} {% assign all_sale = true -%} {% elsif compareAtPriceMin > priceMin or compareAtPriceMax > priceMax -%} {% assign partial_sale = true -%} {% endif -%}{% endif -%}{% assign saleLabelText = "productItem.productItemSale" | translate: translations, "Sale" -%}{% assign soldOutLabelText = "productItem.productItemSoldOut" | translate: translations, "Sold out" -%}{% assign filteredTags = "" -%}{% assign allTags = product.tags -%}{% if product.original_tags != nill %} {% assign allTags = allTags | concat: product.original_tags | uniq -%}{% endif %}{% for tag in allTags -%} {% if tag contains '__label:' -%} {% assign tagWithoutLabel = tag | split: '__label:' | last -%} {% assign filteredTags = filteredTags | append: tagWithoutLabel | append: ',' -%} {% endif -%}{% endfor -%}{% assign filteredTags = filteredTags | split: ',' -%}{% assign has_custom_label = false -%}{% for tag in filteredTags -%} {% unless tag == blank %} {% assign has_custom_label = true -%} {% break %} {% endunless %}{% endfor -%}{% assign should_show_sale_label = false -%}{% if all_sale or partial_sale -%} {% assign should_show_sale_label = true -%}{% endif -%}{% assign should_show_soldout_label = false -%}{%- assign new_days = 30 -%}{%- assign new_period = new_days | times: 86400 -%}{%- assign now_ts = 'now' | date: '%s' | plus: 32400 -%}{% assign should_show_new_label = false -%}{% for meta in product.metafields -%} {% if meta.key == 'first_sale_start_date' -%} {%- assign meta_ts = meta.value | date: '%s' | plus: 0 -%} {%- assign diff = now_ts | minus: meta_ts -%} {%- if meta_ts > 0 and diff >= 0 and diff < new_period -%} {% assign should_show_new_label = true -%} {%- endif -%} {%- break -%} {% endif -%}{% endfor -%}{% if product.available == false -%} {% assign should_show_soldout_label = true -%}{% endif -%}{% assign should_render_label_list = false -%}{% if hideOtherLabelsWhenSoldOut != true -%} {% if should_show_sale_label or should_show_soldout_label or has_custom_label or should_show_new_label -%} {% assign should_render_label_list = true -%} {% endif -%}{% else -%} {% if product.available == false -%} {% if should_show_soldout_label -%} {% assign should_render_label_list = true -%} {% endif -%} {% else -%} {% if should_show_sale_label or has_custom_label or should_show_new_label -%} {% assign should_render_label_list = true -%} {% endif -%} {% endif -%}{% endif -%}{% if should_render_label_list -%}

{% if hideOtherLabelsWhenSoldOut != true -%} {% if all_sale -%} {{ saleLabelText }} {% elsif partial_sale -%} 一部{{ saleLabelText }} {% endif -%} {% if product.available == false -%} {{ soldOutLabelText }} {% endif -%} {% for tag in filteredTags -%} {% unless tag == blank %} {{ tag }} {% endunless %} {% endfor -%} {% if should_show_new_label -%} NEW {% endif -%} {% else -%} {% if product.available == false -%} {{ soldOutLabelText }} {% else -%} {% if all_sale -%} {{ saleLabelText }} {% elsif partial_sale -%} 一部{{ saleLabelText }} {% endif -%} {% for tag in filteredTags -%} {% unless tag == blank %} {{ tag }} {% endunless %} {% endfor -%} {% if should_show_new_label -%} NEW {% endif -%} {% endif -%} {% endif -%}

{% endif -%}

{% assign has_feature_tags = false %} {% for meta in product.metafields %} {% if meta.key == 'function' %} {% assign has_feature_tags = true %} {% endif %} {% endfor %} {% if has_feature_tags %}

{% for meta in product.metafields %} {% if meta.key == 'function' %} {% assign items = meta.value | remove: '[' | remove: ']' | split: ',' %} {% for item in items %} {{ item | remove: '"' }} {% endfor %} {% endif %} {% endfor %}

{% endif %} {% if product.vendor != blank %}

Brand: {{ product.vendor | escape }}

{% endif %}

{% assign removePriceDecimal = false -%}{% assign decimalDelimiter = '' -%}{% assign withoutTrailingZeros = true -%}{% assign showCentAsSuperscript = false -%}{% assign moneyFormat = request.money_format | strip_html -%}{% assign minPrice = product.price_min | times: 1.0 -%}{% assign maxPrice = product.price_max | default: 0 | times: 1.0 -%}{% assign compareAtPriceMin = product.compare_at_price_min | default: 0 | times: 1.0 -%}{% assign listingMinPrice = 0 -%}{% assign listingMaxPrice = 0 -%}{% assign listingCompareAtPrice = 0 -%}{% for variant in product.variants -%} {% assign vPrice = variant.price | times: 1.0 -%} {% if variant.available == true and vPrice > 0 -%} {% if listingMinPrice == 0 or vPrice < listingMinPrice -%} {% assign listingMinPrice = vPrice -%} {% assign listingCompareAtPrice = variant.compare_at_price | default: 0 | times: 1.0 -%} {% endif -%} {% if vPrice > listingMaxPrice -%} {% assign listingMaxPrice = vPrice -%} {% endif -%} {% endif -%}{% endfor -%}{% if listingMinPrice > 0 -%} {% assign minPrice = listingMinPrice -%} {% assign maxPrice = listingMaxPrice -%} {% assign compareAtPriceMin = listingCompareAtPrice -%}{% endif -%}{% if product.variant_id != "" and product.variant_id != blank -%} {% assign currentVariantId = product.variant_id | times: 1 -%} {% for variant in product.variants -%} {% if variant.id == currentVariantId and variant.available == true -%} {% assign minPrice = variant.price | times: 1.0 -%} {% assign maxPrice = minPrice -%} {% assign compareAtPriceMin = variant.compare_at_price | default: 0 | times: 1.0 -%} {% break -%} {% endif -%} {% endfor -%}{% endif -%}{% if minPrice <= 0 -%} {% assign fallbackMin = 0 -%} {% for variant in product.variants -%} {% assign vPrice = variant.price | times: 1.0 -%} {% if vPrice > 0 -%} {% if fallbackMin == 0 or vPrice < fallbackMin -%} {% assign fallbackMin = vPrice -%} {% endif -%} {% endif -%} {% endfor -%} {% if fallbackMin > 0 -%} {% assign minPrice = fallbackMin -%} {% endif -%}{% endif -%}{% assign isSale = false -%}{% assign salePercent = 0 -%}{% if compareAtPriceMin > minPrice -%} {% assign isSale = true -%}{% endif -%}{% if isSale -%} {% assign compare = compareAtPriceMin | minus: minPrice | times: 100 -%} {% if compareAtPriceMin > 0 -%} {% assign salePercent = compare | divided_by: compareAtPriceMin | round -%} {% else -%} {% assign salePercent = 0 -%} {% endif -%}{% endif -%}{% assign priceMinWithFormat = minPrice | format_currency: moneyFormat, showCentAsSuperscript, removePriceDecimal, decimalDelimiter, withoutTrailingZeros -%}{% assign compareAtPriceWithFormat = '' -%}{% if compareAtPriceMin > 0 -%} {% assign compareAtPriceWithFormat = compareAtPriceMin | format_currency: moneyFormat, showCentAsSuperscript, removePriceDecimal, decimalDelimiter, withoutTrailingZeros -%}{% endif -%}{% assign hasPriceRange = false -%}{% if maxPrice > minPrice -%} {% assign hasPriceRange = true -%}{% endif -%}{% capture priceAriaLabel -%} {% if isSale %} 通常価格 {{ compareAtPriceWithFormat }}、セール価格 {{ priceMinWithFormat }}{% if hasPriceRange %}から{% endif %}、 {{ salePercent }}%OFF {% else %} 価格 {{ priceMinWithFormat }}{% if hasPriceRange %}から{% endif %} {% endif %}{%- endcapture %}

{% assign c_color_group_items = '' %} {% for meta in product.metafields %} {% if meta.key == 'color_group' and meta.value != blank %} {% assign c_color_group_items = meta.value | remove: '[' | remove: ']' | split: ',' %} {% break %} {% endif %} {% endfor %} {% assign c_color_group_total = 0 %} {% for group in c_color_group_items %} {% assign c_color_group_name = group | remove: '"' | strip %} {% if c_color_group_name != blank %} {% assign c_color_group_total = c_color_group_total | plus: 1 %} {% endif %} {% endfor %} {% if c_color_group_total > 0 %}

{% assign c_color_group_shown = 0 %} {% for group in c_color_group_items %} {% if c_color_group_shown >= 7 %} {% break %} {% endif %} {% assign c_color_group_name = group | remove: '"' | strip %} {% if c_color_group_name == blank %} {% continue %} {% endif %} {% assign c_color_group_slug = c_color_group_name | replace: '　', '-' | replace: ' ', '-' %} {% assign c_color_group_shown = c_color_group_shown | plus: 1 %} {% endfor %} {% if c_color_group_total > 7 %} {% assign c_color_group_plus = c_color_group_total | minus: 7 %} ＋{{ c_color_group_plus }} {% 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 %} {% 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 %}

Lサイズ(27cm～)(メンズ)

人気のタグ