{% 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 %}{% 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 %}{% capture productVariants %} [ {% for variant in product.variants %} {% assign preorder = '{}' %} {% if variant.preorder and variant.preorder != nil %} {% assign preorder = variant.preorder %} {% else %} {% assign preorder = '' %} {% endif %} { "title": "{{ variant.title }}", "id": "{{ variant.id }}", "available": {{ variant.available }}, "preorder": {{ preorder | json }} }{% 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 }}", "category": "{{ product.product_type | escape }}", "tags" : {{ product.tags | 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 != "" or request.current_locale != null or request.current_locale != nil %} {% 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 -%} {% 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 -%} {{ product.title | escape }}

{% if productImages.size > 1 and hoverEffect == 'reveal-second-image-and-zoom-in' or hoverEffect == 'reveal-second-image' %} {% for image in productImages %} {% if image.src contains product.images_info[0].src %} {% assign secondImage = productImages[image.position] %} {% endif %} {% endfor %} {% if secondImage -%} {% assign secondImageSrc = secondImage.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 -%} {% endif %} {% else -%} {{ product.title | escape }}

{% endif -%}

{% assign hideOtherLabelsWhenSoldOut = true -%}{% assign moneyFormat = request.money_format | strip_html -%}{% assign removePriceDecimal = false -%}{% assign showCentAsSuperscript = false -%}{% assign decimalDelimiter = '' -%}{% assign withoutTrailingZeros = true -%}{% if hideOtherLabelsWhenSoldOut != true -%} {% 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 | remove: '__label:' -%} {% assign filteredTags = filteredTags | append: tagWithoutLabel | append: ',' -%} {%- endif -%} {% endfor -%} {% assign filteredTags = filteredTags | split: ',' -%} {% for tag in filteredTags -%} {% unless tag == blank %}

{% endunless %} {% endfor -%} {% else -%} {% if product.available == false -%} {% else -%} {% 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 | remove: '__label:' -%} {% assign filteredTags = filteredTags | append: tagWithoutLabel | append: ',' -%} {% endif -%} {% endfor -%} {% assign filteredTags = filteredTags | split: ',' -%} {%- comment -%} ▼ 追加: NEW を必ず2番目に出すため NEW とそれ以外を分ける {%- endcomment -%} {% assign hasNewLabel = false -%} {% assign otherTags = "" -%} {% for tag in filteredTags -%} {% if tag == 'NEW' -%} {% assign hasNewLabel = true -%} {% else -%} {% assign otherTags = otherTags | append: tag | append: ',' -%} {% endif -%} {% endfor -%} {% assign otherTags = otherTags | split: ',' -%} {%- comment -%} ▼ 1件目 → NEW → 残りの順に出力 {%- endcomment -%} {% assign renderedCount = 0 -%} {% for tag in otherTags -%} {% unless tag == blank %}

{% assign renderedCount = renderedCount | plus: 1 -%} {% if renderedCount == 1 -%} {% if hasNewLabel == true -%}

NEW

{% endif -%} {% endif -%} {% endunless %} {% endfor -%} {%- comment -%} ▼ NEW 以外のラベルが無い場合は NEW 単独で出力 {%- endcomment -%} {% if renderedCount == 0 -%} {% if hasNewLabel == true -%}

NEW

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

{% assign tag_no_reservation = false %} {% if product.tags contains '_label:予約不要' -%} {% assign tag_no_reservation = true %} {% endif -%} {%- comment -%} ▼ __label: タグから「入荷予定」を含むものを拾う {%- endcomment -%} {% assign restock_text = '' %} {% assign has_restock = false %} {% for tag in product.tags -%} {% if tag contains '__label' -%} {% if tag contains '入荷予定' or tag contains '販売開始' -%} {% assign restock_text = tag | remove: '__label:' %} {% assign has_restock = true %} {% endif -%} {% endif -%} {% endfor -%} {% if product.available == false and tag_no_reservation == false -%} {% if has_restock == true -%}

{% else -%}

SOLD OUT

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

{% assign swatches = '' %} {% assign swatches = 'swatch item 1' %} {% capture swatchType %}color{% endcapture %}{% capture swatchBy %}color-and-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 %}{% assign metafields = product.metafields %}{% assign imageList = '' %}{% for meta in metafields %} {% if meta.key == "image_variant" %} {% assign imageList = meta.value | split: "," %} {% endif %}{% endfor %}{% for swatch in product.options_with_values %} {% assign maxItem = 4 %} {%- comment -%} === UI同期用: アーカイブを除外した「本当に有効なスウォッチ数」の事前計算 === {%- endcomment -%} {% assign active_optionsLength = 0 %} {% for value in swatch.values %} {%- comment -%} ホワイトリスト方式: 有効なバリアントが1つでもあれば true となる {%- endcomment -%} {% assign has_active_variant = false %} {% for item in product.variants %} {%- comment -%} 【修正1: containsの誤検知防止】 "Black" が "Matte Black" にマッチするのを防ぐため、オプションごとに分割して完全一致判定 {%- endcomment -%} {% assign is_matched = false %} {% if item.title == value.title %} {% assign is_matched = true %} {% else %} {% assign variant_options = item.title | split: '/' %} {% for opt in variant_options %} {% assign stripped_opt = opt | strip %} {% if stripped_opt == value.title %} {% assign is_matched = true %} {% endif %} {% endfor %} {% endif %} {% if is_matched %} {% assign is_archived_current = false %} {%- comment -%} 【修正2: Boolean値の安全な文字列化】 meta.valueが真偽値(Boolean)の場合、downcaseフィルタがエラーになるのを防ぐため append: '' を使用 {%- endcomment -%} {% for meta in metafields %} {% if meta.key == "is_archived" or meta.key == "custom.is_archived" %} {% assign m_id = meta.id | append: '' %} {% assign i_id = item.id | append: '' %} {% if m_id == i_id %} {% assign string_val = meta.value | append: '' | downcase %} {% assign cleaned_value = string_val | remove: " " | remove: '"' | remove: "'" %} {% if cleaned_value == 'true' or cleaned_value == '1' %} {% assign is_archived_current = true %} {% endif %} {% endif %} {% endif %} {% endfor %} {%- comment -%} 従来のShopify標準フェイルセーフ判定 {%- endcomment -%} {% assign is_archived_raw = item.metafields.custom.is_archived %} {% assign is_archived_val = item.metafields.custom.is_archived.value %} {% assign str_raw = is_archived_raw | append: '' | downcase %} {% assign str_val = is_archived_val | append: '' | downcase %} {% if str_raw == 'true' or str_val == 'true' %} {% assign is_archived_current = true %} {% endif %} {%- comment -%} アーカイブされていない（またはAPIでnullとして除外された）バリアントを「有効」とする {%- endcomment -%} {% if is_archived_current == false %} {% assign has_active_variant = true %} {% endif %} {% endif %} {% endfor %} {%- comment -%} 有効なバリアントが1つでも存在すれば、表示可能なスウォッチとしてカウントをインクリメント {%- endcomment -%} {% if has_active_variant == true %} {% assign active_optionsLength = active_optionsLength | plus: 1 %} {% endif %} {% endfor %} {% if swatch.name %} {% if swatch.name == swatchType %}

{% assign display_count = 0 %} {% for value in swatch.values %} {%- comment -%} === 描画フェーズ: スウォッチ単位での最終アーカイブ判定 === {%- endcomment -%} {% assign has_active_variant = false %} {% for item in product.variants %} {% assign is_matched = false %} {% if item.title == value.title %} {% assign is_matched = true %} {% else %} {% assign variant_options = item.title | split: '/' %} {% for opt in variant_options %} {% assign stripped_opt = opt | strip %} {% if stripped_opt == value.title %} {% assign is_matched = true %} {% endif %} {% endfor %} {% endif %} {% if is_matched %} {% assign is_archived_current = false %} {%- comment -%} 描画フェーズの型安全マッチング {%- endcomment -%} {% for meta in metafields %} {% if meta.key == "is_archived" or meta.key == "custom.is_archived" %} {% assign m_id = meta.id | append: '' %} {% assign i_id = item.id | append: '' %} {% if m_id == i_id %} {% assign string_val = meta.value | append: '' | downcase %} {% assign cleaned_value = string_val | remove: " " | remove: '"' | remove: "'" %} {% if cleaned_value == 'true' or cleaned_value == '1' %} {% assign is_archived_current = true %} {% endif %} {% endif %} {% endif %} {% endfor %} {% assign is_archived_raw = item.metafields.custom.is_archived %} {% assign is_archived_val = item.metafields.custom.is_archived.value %} {% assign str_raw = is_archived_raw | append: '' | downcase %} {% assign str_val = is_archived_val | append: '' | downcase %} {% if str_raw == 'true' or str_val == 'true' %} {% assign is_archived_current = true %} {% endif %} {% if is_archived_current == false %} {% assign has_active_variant = true %} {% endif %} {% endif %} {% endfor %} {%- comment -%} 有効なバリアントが1つも無い（すべてアーカイブ済み）場合はDOMの生成を完全にスキップ {%- endcomment -%} {% if has_active_variant == false %} {% continue %} {% endif %} {% if display_count >= maxItem %} {% break %} {% endif %} {% assign display_count = display_count | plus: 1 %} {% assign image_index = forloop.index0 %} {% assign image_name = imageList[image_index] %} {% assign url_image = '' %} {% if image_name %} {% assign strip_name = image_name | strip %} {% assign url_image = 'https://' | append: 'cdn.shopify.com/s/files/1/0217/8236/4224/files/' | append: strip_name %} {% endif %} {% assign status = '' %} {% for item in product.variants %} {% assign is_matched = false %} {% if item.title == value.title %} {% assign is_matched = true %} {% else %} {% assign variant_options = item.title | split: '/' %} {% for opt in variant_options %} {% assign stripped_opt = opt | strip %} {% if stripped_opt == value.title %} {% assign is_matched = true %} {% endif %} {% endfor %} {% endif %} {% if is_matched %} {% assign status = status | append: item.available %} {% endif %} {% endfor %} {% assign option_image = product.images_info[value.image].src %} {% assign oos_class = '' %} {% unless status!= '' and status contains 'true' %} {% assign oos_class = 'boost-sd__product-swatch-option-oos' %} {% endunless %}

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

{% endif %} {% endif %}{% endfor %} {% assign campaignBannerTags = product.tags -%} {% if product.original_tags != nill %} {% assign campaignBannerTags = campaignBannerTags | concat: product.original_tags | uniq -%} {% endif %} {% assign hasCampaignBanner = false -%} {% for tag in campaignBannerTags -%} {% if tag contains 'banner:' -%} {% assign hasCampaignBanner = true -%} {% endif -%} {% endfor -%} {% if hasCampaignBanner == true -%} {% endif -%}

{% assign removePriceDecimal = false -%}{% assign decimalDelimiter = '' -%}{% assign withoutTrailingZeros = true -%}{% assign showCentAsSuperscript = false -%}{% assign moneyFormat = request.money_format | 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 -%}{% assign compareAtPriceMin = 0 -%}{% if product.compare_at_price_min -%} {% assign compareAtPriceMin = product.compare_at_price_min | times: 1.0 -%}{% 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 -%} {% assign minPrice = variant.price | times: 1.0 -%} {% assign maxPrice = variant.price | times: 1.0 -%} {% if variant.compare_at_price and variant.compare_at_price != "0.0" -%} {% assign compareAtPriceMin = variant.compare_at_price | times: 1.0 -%} {% endif -%} {% break -%} {% endif -%} {% endfor -%}{% 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 -%} {% assign compare = compareAtPriceMin | minus: minPrice | times: 100 -%} {% assign salePercent = compare | divided_by: compareAtPriceMin | ceil | append: '%' -%} {% assign compareAtPriceWithFormat = compareAtPriceMin | format_currency: moneyFormat, showCentAsSuperscript, removePriceDecimal, decimalDelimiter, withoutTrailingZeros -%} {% assign saleAmount = compareAtPriceMin | minus: minPrice -%}{% endunless -%}{% assign priceMinWithFormat = minPrice | format_currency: moneyFormat, showCentAsSuperscript, removePriceDecimal , decimalDelimiter, withoutTrailingZeros -%}{% assign priceMaxWithFormat = '' -%}{% if product.price_max and maxPrice > minPrice -%} {% assign priceMaxWithFormat = maxPrice | format_currency: moneyFormat, showCentAsSuperscript, removePriceDecimal , decimalDelimiter, withoutTrailingZeros -%}{% endif -%}{% 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 -%} {% if hasMultiVariantPrice -%} {% assign priceValueWithFormat = "productItem.amount" | translate: translations, "" | replace: '{{minPrice}}', priceMinWithFormat | replace: '{{maxPrice}}', priceMaxWithFormat -%} {% else -%} {% assign priceValueWithFormat = priceMinWithFormat | append: '〜' -%} {% endif -%}{% endif -%}{% assign savingPriceWithFormat = '' -%}{% unless showSavingDisplay == false or saleAmount == 0 -%} {% assign saleAmountWithFormat = saleAmount | format_currency: moneyFormat, showCentAsSuperscript, removePriceDecimal, decimalDelimiter, withoutTrailingZeros -%} {% assign savingPriceWithFormat = "productItem.savingAmount" | translate: translations, "Save {{saleAmount}}" | replace: '{{saleAmount}}', saleAmountWithFormat | replace: '{{salePercent}}', salePercent -%}{% endunless -%}

{% if isSale %} Regular price {{ compareAtPriceWithFormat }}, now on sale for {{ priceValueWithFormat }}{% if savingPriceWithFormat != '' %}, saving {{ savingPriceWithFormat }}{% endif %} {% else %} Regular price {{ priceValueWithFormat }} {% endif %} {% if savingPriceWithFormat != '' -%} {% 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 %}

冬の装い Winter Essential 試着キャンペーン 開催中！

アウター

Category

Tops

Outer

Knit

Pants

冬の装い Winter Essential 試着キャンペーン開催中！