Automatic-Discount/Warehouse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Axel
2025-11-25 03:01:55 +08:00
commit 909f3e7675
3 changed files with 734 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

385
snippets/product-item.liquid Normal file
View File

@@ -0,0 +1,385 @@
{%- comment -%}Color labels used to detect what is a color swatch{%- endcomment -%}
{%- assign color_label = 'color,colour,couleur,cor,colore,farbe,색,色,カラー,färg,farve,szín,barva' | split: ',' -%}
{%- liquid
assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
assign product_price_min = product.price
assign product_price_max = product.price_max
assign product_compare_at_price = product.compare_at_price
assign product_compare_at_price_min = product.compare_at_price_min
if product.metafields.app--168074346497.discount_percentage.value > 0.01
assign deducted_percentage = 1.0 | minus: product.metafields.app--168074346497.discount_percentage.value
assign product_price = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
assign product_price_min = product_price
assign product_price_max = product.price_max | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
assign product_compare_at_price = product.price
assign product_compare_at_price_min = product_compare_at_price
if product.compare_at_price > product_compare_at_price
assign product_compare_at_price = product.compare_at_price
assign product_compare_at_price_min = product_compare_at_price
endif
endif
if product_price < product.price and product_compare_at_price == blank
assign product_compare_at_price = product.price
assign product_compare_at_price_min = product.price
endif
-%}
<div class="product-item {% if horizontal %}product-item--horizontal{% elsif list %}product-item--list{% else %}product-item--vertical{% endif %} {% if complementary_products %}product-item--complementary{% endif %} {% if section.id == 'blog-sidebar' %}product-item--compact{% endif %} {{ grid_classes }}">
{%- capture product_labels -%}
{%- unless hide_labels -%}
{%- assign custom_badges = product.metafields.custom.badges.value -%}
{%- for badge in custom_badges -%}
<span class="product-label product-label--custom1">{{ badge }}</span>
{%- endfor -%}
{%- for tag in product.tags -%}
{%- if tag contains '__label:' -%}
<span class="product-label product-label--custom1">{{ tag | split: '__label:' | last }}</span>
{%- endif -%}
{%- if tag contains '__label1:' -%}
<span class="product-label product-label--custom1">{{ tag | split: '__label1:' | last }}</span>
{%- endif -%}
{%- if tag contains '__label2:' -%}
<span class="product-label product-label--custom2">{{ tag | split: '__label2:' | last }}</span>
{%- endif -%}
{%- endfor -%}
{%- if settings.show_discount and product_price < product_compare_at_price -%}
{%- if settings.discount_mode == 'percentage' -%}
{%- assign savings = product_compare_at_price | minus: product_price | times: 100.0 | divided_by: product_compare_at_price | round | append: '%' -%}
{%- else -%}
{%- capture savings -%}<span>{{ product_compare_at_price | minus: product_price | money }}</span>{%- endcapture -%}
{%- endif -%}
<span class="product-label product-label--on-sale">{{ 'collection.product.discount_html' | t: savings: savings }}</span>
{%- endif -%}
{%- endunless -%}
{%- endcapture -%}
{%- if product_labels != blank -%}
<div class="product-item__label-list">
{{- product_labels -}}
</div>
{%- endif -%}
{%- if settings.show_secondary_image and product.media.size > 1 -%}
{%- assign show_secondary_media = true -%}
{%- else -%}
{%- assign show_secondary_media = false -%}
{%- endif -%}
{%- assign filtered_variant = '' -%}
{%- if product.media.size > 0 -%}
{%- assign primary_media = product.featured_media -%}
<a href="{{ product.url }}" class="product-item__image-wrapper {% if show_secondary_media %}product-item__image-wrapper--with-secondary{% endif %}">
<div class="aspect-ratio {% if settings.product_image_size != 'natural' %}aspect-ratio--{{ settings.product_image_size }}{% endif %}" style="padding-bottom: {{ 100.0 | divided_by: primary_media.preview_image.aspect_ratio }}%">
{{- primary_media | image_url: width: primary_media.width | image_tag: loading: 'lazy', sizes: '(max-width: 699px) 100vw, 600px', widths: '200,300,400,600,800,1000,1200,1400,1600', data-media-id: primary_media.id, class: 'product-item__primary-image' -}}
{%- if show_secondary_media -%}
{{- product.media[1] | image_url: width: product.media[1].width | image_tag: loading: 'lazy', sizes: '(max-width: 699px) 100vw, 600px', widths: '200,300,400,600,800,1000,1200,1400,1600', class: 'product-item__secondary-image' -}}
{%- endif -%}
</div>
</a>
{%- endif -%}
<div class="product-item__info">
<div class="product-item__info-inner">
{%- capture price_list -%}
<spark-product-card parent-id="{{ product.id }}"></spark-product-card>
<div data-spark="b2c-only" class="product-item__price-list price-list">
{%- if product_price < product_compare_at_price -%}
{%- if product.price_varies -%}
{%- if settings.currency_code_enabled -%}
{%- capture price_min -%}{{ product_price_min | money_with_currency }}{%- endcapture -%}
{%- capture price_max -%}{{ product_price_max | money_with_currency }}{%- endcapture -%}
{%- else -%}
{%- capture price_min -%}{{ product_price_min | money }}{%- endcapture -%}
{%- capture price_max -%}{{ product_price_max | money }}{%- endcapture -%}
{%- endif -%}
<span class="price price--highlight">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{{- 'collection.product.from_price_html' | t: price_min: price_min, price_max: price_max -}}
</span>
<span class="price price--compare">
<span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>
{%- if settings.currency_code_enabled -%}
{{- product_compare_at_price_min | money_with_currency -}}
{%- else -%}
{{- product_compare_at_price_min | money -}}
{%- endif -%}
</span>
{%- else -%}
<span class="price price--highlight">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{%- if settings.currency_code_enabled -%}
{{- product_price | money_with_currency -}}
{%- else -%}
{{- product_price | money -}}
{%- endif -%}
</span>
<span class="price price--compare">
<span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>
{%- if settings.currency_code_enabled -%}
{{- product_compare_at_price | money_with_currency -}}
{%- else -%}
{{- product_compare_at_price | money -}}
{%- endif -%}
</span>
{%- endif -%}
{%- elsif product.price_varies -%}
{%- if settings.currency_code_enabled -%}
{%- capture price_min -%}{{ product_price_min | money_with_currency }}{%- endcapture -%}
{%- capture price_max -%}{{ product_price_max | money_with_currency }}{%- endcapture -%}
{%- else -%}
{%- capture price_min -%}{{ product_price_min | money }}{%- endcapture -%}
{%- capture price_max -%}{{ product_price_max | money }}{%- endcapture -%}
{%- endif -%}
<span class="price">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{{- 'collection.product.from_price_html' | t: price_min: price_min, price_max: price_max -}}
</span>
{%- else -%}
<span class="price">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{%- if settings.currency_code_enabled -%}
{{- product_price | money_with_currency -}}
{%- else -%}
{{- product_price | money -}}
{%- endif -%}
</span>
{%- endif -%}
</div>
{%- assign variant_to_use = selected_variant | default: product.selected_or_first_available_variant -%}
{%- if variant_to_use.unit_price -%}
<div class="product-item__price-info">
<div class="unit-price-measurement">
{{- variant_to_use.unit_price | unit_price_with_measurement: variant_to_use.unit_price_measurement -}}
</div>
</div>
{%- endif -%}
{%- endcapture -%}
{%- capture vendor -%}
{%- if settings.show_vendor -%}
{%- assign vendor_handle = product.vendor | handle -%}
{%- assign collection_for_vendor = collections[vendor_handle] -%}
{%- unless collection_for_vendor.empty? -%}
<a class="product-item__vendor link" href="{{ collection_for_vendor.url }}">{{ product.vendor }}</a>
{%- else -%}
<a class="product-item__vendor link" href="{{ product.vendor | url_for_vendor }}">{{ product.vendor }}</a>
{%- endunless -%}
{%- endif -%}
{%- endcapture -%}
{%- if settings.product_price_position == 'before_title' -%}
{{ price_list }}
{%- endif -%}
{%- if settings.product_price_position == 'after_title' -%}
{{ vendor }}
{%- endif -%}
<a href="{{ filtered_variant.url | default: product.url }}" class="product-item__title text--strong link">{{ product.title }}</a>
{%- if settings.product_price_position == 'before_title' -%}
{{ vendor }}
{%- endif -%}
{%- if settings.show_color_swatch and template != 'blog' -%}
{%- capture color_swatch -%}
{%- capture color_name -%}{{ section.id }}-{{ product.id }}{%- endcapture -%}
{%- for option in product.options_with_values -%}
{%- assign downcased_option = option.name | downcase -%}
{%- if color_label contains downcased_option -%}
{%- assign variant_option = 'option' | append: forloop.index -%}
{%- assign value_to_match = filtered_variant[variant_option] | default: option.selected_value -%}
{%- assign color_swatch_config = settings.color_swatch_config | newline_to_br | split: '<br />' -%}
{%- for value in option.values -%}
{%- assign downcased_value = value | downcase -%}
{%- capture color_id -%}{{ color_name }}-{{ forloop.index }}{%- endcapture -%}
{%- for variant in product.variants -%}
{%- if variant[variant_option] == value -%}
{%- assign variant_for_value = variant -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
<div class="color-swatch {% if downcased_value == 'white' or downcased_value == 'blanc' %}color-swatch--white{% endif %}">
{%- if variant_for_value.featured_media -%}
{%- assign image_url = variant_for_value.featured_media | image_url: width: 800 -%}
{%- endif -%}
<input class="color-swatch__radio" type="radio" name="{{ color_name }}" id="{{ color_id }}" value="{{ value | escape }}" {% if value_to_match == value %}checked="checked"{% endif %} data-variant-url="{{ variant_for_value.url }}" {% if variant_for_value.featured_media %}data-media-id="{{ variant_for_value.featured_media.id }}" data-image-url="{{ image_url }}" data-image-aspect-ratio="{{ variant_for_value.featured_media.preview_image.aspect_ratio }}"{% endif %} aria-label="{{ value | escape }}">
<label class="color-swatch__item" for="{{ color_id }}" style="{% render 'color-swatch-style', swatch: value.swatch, color_swatch_config: color_swatch_config, value: downcased_value %}" title="{{ value | escape }}">
<span class="visually-hidden">{{ value }}</span>
</label>
<a href="{{ product.url }}" class="color-swatch__item-link">+{{ option.values.size | minus: forloop.index0 }}</a>
</div>
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}
{%- if color_swatch != blank -%}
<div class="product-item__swatch-list">
<div class="color-swatch-list">
{{ color_swatch }}
</div>
</div>
{%- endif -%}
{%- endif -%}
{%- if settings.product_price_position == 'after_title' -%}
{{ price_list }}
{%- endif -%}
{%- if settings.show_reviews_badge -%}
<a class="product-item__reviews-badge link" href="{{ product.url }}#product-reviews">
{%- render 'product-rating', product: product -%}
</a>
{%- endif -%}
{%- if settings.show_inventory_quantity and product.variants.first.inventory_management != blank and product.template_suffix != 'pre-order' -%}
{%- if product.available -%}
{%- assign should_calculate_inventory = true -%}
{%- for variant in product.variants -%}
{%- comment -%}
If we have one variant that is set to "continue" or that do not have any inventory management, then we skip the calculation of inventory as this
means at least one of the variant is always purchasable
{%- endcomment -%}
{%- if variant.inventory_policy == 'continue' or variant.inventory_management == null -%}
{%- assign should_calculate_inventory = false -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- if should_calculate_inventory and settings.low_inventory_threshold > 0 -%}
{%- assign all_inventory = 0 -%}
{%- for variant in product.variants -%}
{%- if variant.inventory_management -%}
{%- assign all_inventory = variant.inventory_quantity | at_least: 0 | plus: all_inventory -%}
{%- endif -%}
{%- endfor -%}
{%- if all_inventory <= settings.low_inventory_threshold -%}
<span class="product-item__inventory inventory inventory--low">{{ 'collection.product.low_stock_with_quantity_count' | t: count: all_inventory }}</span>
{%- else -%}
<span class="product-item__inventory inventory inventory--high">{{ 'collection.product.in_stock_with_quantity_count' | t: count: all_inventory }}</span>
{%- endif -%}
{%- else -%}
{%- if product.variants.first.inventory_policy == 'continue' and product.variants.first.inventory_quantity <= 0 and product.variants.first.requires_shipping -%}
<span class="product-item__inventory inventory inventory--high">{{ 'collection.product.oversell_stock' | t }}</span>
{%- else -%}
<span class="product-item__inventory inventory inventory--high">{{ 'collection.product.in_stock' | t }}</span>
{%- endif -%}
{%- endif -%}
{%- else -%}
<span class="product-item__inventory inventory">{{ 'collection.product.sold_out' | t }}</span>
{%- endif -%}
{%- endif -%}
</div>
{%- if request.page_type == 'collection' or request.page_type == 'search' or show_add_to_cart -%}
{%- if section.settings.show_quick_view == 'list_grid' or section.settings.show_quick_buy == 'list_grid' or show_add_to_cart -%}
{%- assign product_form_classes = 'product-item__action-list button-stack' -%}
{%- else -%}
{%- assign product_form_classes = 'product-item__action-list product-item__action-list--list-view-only button-stack' -%}
{%- endif -%}
{%- assign form_id = 'product_form_id_' | append: product.id | append: '_' | append: section.id -%}
{%- if product.template_suffix == 'contact' -%}
<div data-spark="b2c-only" class="{{ product_form_classes }}">
<a href="mailto:{{ shop.email }}" class="product-item__action-button button button--small button--primary">
{{- 'product.form.contact_us' | t -}}
</a>
</div>
{%- else -%}
{%- capture quick_buy_form -%}
{%- form 'product', product, id: form_id, class: product_form_classes -%}
<input type="hidden" name="quantity" value="1">
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
{%- if section.settings.show_quick_buy == 'list_grid' or show_add_to_cart -%}
{%- if complementary_products -%}
{%- assign quick_buy_classes = 'product-item__action-button button button--small button--ternary' -%}
{%- else -%}
{%- assign quick_buy_classes = 'product-item__action-button button button--small button--primary' -%}
{%- endif -%}
{%- else -%}
{%- assign quick_buy_classes = 'product-item__action-button product-item__action-button--list-view-only button button--small button--primary' -%}
{%- endif -%}
{%- if product.available -%}
{%- if product.variants.size == 1 -%}
<buy-button data-spark="b2c-only" class="buy-button">
<button type="submit" class="{{ quick_buy_classes }}">
{%- if product.template_suffix == 'pre-order' -%}
{{- 'collection.product.pre_order' | t -}}
{%- else -%}
{{- 'collection.product.add_to_cart' | t -}}
{%- endif -%}
</button>
</buy-button>
{%- else -%}
<a href="{{ product.url }}" class="{{ quick_buy_classes }}">{{ 'collection.product.choose_options' | t }}</a>
{%- endif -%}
{%- else -%}
<button class="{{ quick_buy_classes | replace: 'button--primary', 'button--disabled' }}" disabled>{{ 'collection.product.sold_out' | t }}</button>
{%- endif -%}
{%- if section.settings.show_quick_view == 'list_grid' -%}
{%- assign quick_view_classes = 'product-item__action-button button button--small button--ternary hidden-phone' -%}
{%- else -%}
{%- assign quick_view_classes = 'product-item__action-button product-item__action-button--list-view-only button button--small button--ternary hidden-phone' -%}
{%- endif -%}
<button type="button" class="{{ quick_view_classes }}" data-action="open-modal" data-secondary-action="open-quick-view" aria-controls="modal-quick-view-{{ section.id }}" data-product-url="{{ product.url }}">{{ 'collection.product.quick_view' | t }}</button>
{%- endform -%}
{%- endcapture -%}
{%- if complementary_products != true -%}
{{- quick_buy_form -}}
{%- endif -%}
{%- endif -%}
{%- endif -%}
</div>
{%- comment -%}
The complementary product has an exception, where the form is shown outside
{%- endcomment -%}
{%- if complementary_products and show_add_to_cart -%}
{{- quick_buy_form -}}
{%- endif -%}
</div>

349
snippets/product-variant-selector.liquid Normal file
View File

@@ -0,0 +1,349 @@
<!-- find the price part, and insert "yagi-hidden" class ot the price container -->
{%- assign selected_variant = product.selected_or_first_available_variant -%}
{%- assign color_label = 'color,colour,couleur,cor,colore,farbe,색,色,カラー,färg,farve,szín,barva' | split: ',' -%}
{%- unless product.has_only_default_variant -%}
<variant-picker handle="{{ product.handle }}" section-id="{{ section.id }}" form-id="{{ product_form_id }}" {% if update_url %}update-url{% endif %} {% if block.settings.hide_sold_out_variants %}hide-sold-out-variants{% endif %} class="product-form__variants" {{ block.shopify_attributes }}>
{%- comment -%}
The variant data is outputted as a JSON, which allows the theme to emit an event with the data when the variant changes. This must not be removed.
{%- endcomment -%}
<script data-variant type="application/json">
{{- product.selected_or_first_available_variant | json -}}
</script>
{%- for option in product.options_with_values -%}
{%- assign downcase_option = option.name | downcase -%}
{%- capture option_name -%}option{{ option.position }}{%- endcapture -%}
{%- assign option_selector_type = block.settings.selector_mode -%}
{%- assign variant_image_options = block.settings.variant_image_options | replace: ', ', ',' | downcase | split: ',' -%}
{%- assign swatch_count = option.values | map: 'swatch' | compact | size -%}
{%- if swatch_count > 0 and block.settings.color_mode == 'swatch' %}
{%- assign option_selector_type = 'swatch' -%}
{%- endif -%}
{% if swatch_count == 0 and color_label contains downcase_option and block.settings.color_mode != 'none' %}
{%- assign option_selector_type = 'swatch' -%}
{%- endif -%}
{%- if variant_image_options contains downcase_option -%}
{%- assign option_selector_type = 'variant' -%}
{%- endif -%}
<div class="product-form__option">
{%- case option_selector_type -%}
{%- when 'swatch' -%}
<span class="product-form__option-name text--strong">{{ option.name }}: <span class="product-form__selected-value">{{ option.selected_value }}</span></span>
<div class="color-swatch-list color-swatch-list--large">
{%- assign color_swatch_config = settings.color_swatch_config | newline_to_br | split: '<br />' -%}
{%- for value in option.values -%}
{%- assign downcased_value = value | downcase -%}
{%- capture color_id -%}{{ product_form_id }}-{{ option_name }}-{{ forloop.index }}{%- endcapture -%}
<div class="color-swatch {% if downcased_value == 'white' or downcased_value == 'blanc' %}color-swatch--white{% endif %} {% unless value.available %}color-swatch--disabled{% endunless %}">
{%- if value.product_url != blank -%}
{%- if value == option.selected_value -%}
<input type="hidden" name="{{ option_name }}" form="{{ product_form_id }}" value="{{ value.id }}" data-option-position="{{ option.position }}">
{%- endif -%}
<a href="{{ value.product_url }}" class="color-swatch__item {% if value == option.selected_value %}is-selected{% endif %}" style="{% render 'color-swatch-style', swatch: value.swatch, color_swatch_config: color_swatch_config, value: downcased_value %}" title="{{ value | escape }}">
<span class="visually-hidden">{{ value }}</span>
{%- render 'icon', icon: 'cross-sold-out' -%}
</a>
{%- else -%}
<input class="color-swatch__radio product-form__single-selector" type="radio" name="{{ option_name }}" id="{{ color_id }}" value="{{ value.id }}" {% if option.selected_value == value %}checked{% endif %} data-option-position="{{ option.position }}" form="{{ product_form_id }}">
<label class="color-swatch__item" for="{{ color_id }}" style="{% render 'color-swatch-style', swatch: value.swatch, color_swatch_config: color_swatch_config, value: downcased_value %}" title="{{ value | escape }}">
<span class="visually-hidden">{{ value }}</span>
{%- render 'icon', icon: 'cross-sold-out' -%}
</label>
{%- endif -%}
</div>
{%- endfor -%}
</div>
{%- when 'variant' -%}
<span class="product-form__option-name text--strong">{{ option.name }}: <span class="product-form__selected-value">{{ option.selected_value }}</span></span>
<div class="variant-swatch-list">
{%- for value in option.values -%}
{%- capture variant_swatch_id -%}{{ product_form_id }}-{{ option_name }}-{{ forloop.index }}{%- endcapture -%}
{%- liquid
assign image = value.variant.featured_media
assign option_name = 'option' | append: option.position
if value.variant.featured_media == blank
for variant in product.variants
if variant[option_name] == value
assign image = variant.featured_media
break
endif
endfor
endif
assign image = image | default: product.featured_media
-%}
<div class="variant-swatch {% unless value.available %}variant-swatch--disabled{% endunless %}">
{%- if value.product_url != blank -%}
{%- if value == option.selected_value -%}
<input type="hidden" name="{{ option_name }}" form="{{ product_form_id }}" value="{{ value.id }}" data-option-position="{{ option.position }}">
{%- endif -%}
<a href="{{ value.product_url }}" class="variant-swatch__item {% if value == option.selected_value %}is-selected{% endif %}" title="{{ value | escape }}">
<div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: image.aspect_ratio }}%">
{{- image | image_url: width: image.width | image_tag: loading: 'lazy', sizes: '120px', widths: '120,240' -}}
</div>
{% render 'icon', icon: 'cross-sold-out' %}
</a>
{%- else -%}
<input class="variant-swatch__radio product-form__single-selector" type="radio" name="{{ option_name }}" id="{{ variant_swatch_id }}" value="{{ value.id }}" form="{{ product_form_id }}" {% if option.selected_value == value %}checked{% endif %} data-option-position="{{ option.position }}">
<label class="variant-swatch__item" for="{{ variant_swatch_id }}" title="{{ value | escape }}">
<div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: image.aspect_ratio }}%">
{{- image | image_url: width: image.width | image_tag: loading: 'lazy', sizes: '120px', widths: '120,240' -}}
</div>
{% render 'icon', icon: 'cross-sold-out' %}
</label>
{%- endif -%}
</div>
{%- endfor -%}
</div>
{%- when 'block' -%}
<span class="product-form__option-name text--strong">{{ option.name }}: <span class="product-form__selected-value">{{ option.selected_value }}</span></span>
<div class="block-swatch-list">
{%- for value in option.values -%}
{%- capture block_swatch_id -%}{{ product_form_id }}-{{ option_name }}-{{ forloop.index }}{%- endcapture -%}
<div class="block-swatch {% unless value.available %}block-swatch--disabled{% endunless %}">
{%- if value.product_url != blank -%}
{%- if value == option.selected_value -%}
<input type="hidden" name="{{ option_name }}" form="{{ product_form_id }}" value="{{ value.id }}" data-option-position="{{ option.position }}">
{%- endif -%}
<a href="{{ value.product_url }}" class="block-swatch__item {% if value == option.selected_value %}is-selected{% endif %}" title="{{ value | escape }}">
<span class="block-swatch__item-text">{{ value }}</span>
</a>
{%- else -%}
<input class="block-swatch__radio product-form__single-selector" type="radio" name="{{ option_name }}" id="{{ block_swatch_id }}" value="{{ value.id }}" form="{{ product_form_id }}" {% if option.selected_value == value %}checked{% endif %} data-option-position="{{ option.position }}">
<label class="block-swatch__item" for="{{ block_swatch_id }}" title="{{ value | escape }}">
<span class="block-swatch__item-text">{{ value }}</span>
</label>
{%- endif -%}
</div>
{%- endfor -%}
</div>
{%- when 'dropdown' -%}
{%- capture dropdown_id -%}{{ product_form_id }}-{{ option_name }}-{{ forloop.index }}{%- endcapture -%}
<label for="{{ dropdown_id }}" class="product-form__option-name text--strong">{{ option.name }}: <span class="product-form__selected-value">{{ option.selected_value }}</span></label>
<div class="select-wrapper select-wrapper--primary">
{%- render 'icon', icon: 'arrow-bottom' -%}
<select class="product-form__single-selector" name="{{ option_name }}" form="{{ product_form_id }}" id="{{ dropdown_id }}" data-option-position="{{ option.position }}">
{%- for value in option.values -%}
<option {% if value.product_url != blank %}data-update-url="{{ value.product_url | escape }}"{% endif %} value="{{ value.id }}" {% if value == option.selected_value %}selected="selected"{% endif %}>{{ value }}</option>
{%- endfor -%}
</select>
</div>
{%- endcase -%}
</div>
{%- endfor -%}
<div class="no-js product-form__option">
<label class="product-form__option-name text--strong" for="product-select-{{ product.id }}">{{ 'product.form.variant' | t }}</label>
<div class="select-wrapper select-wrapper--primary">
<select id="product-select-{{ product.id }}" name="id">
{%- for variant in product.variants -%}
<option {% if variant == selected_variant %}selected="selected"{% endif %} {% unless variant.available %}disabled="disabled"{% endunless %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
{%- endfor -%}
</select>
</div>
</div>
</variant-picker>
{%- else -%}
<input type="hidden" name="id" data-sku="{{ selected_variant.sku }}" value="{{ selected_variant.id }}">
{%- endunless -%}
<div class="product-form__info-list">
{%- if product.selected_or_first_available_variant != nil -%}
<div class="product-form__info-item yagi-hidden">
<span class="product-form__info-title text--strong">{{ 'product.form.price' | t }}:</span>
<div class="product-form__info-content" role="region" aria-live="polite">
<div class="price-list">
{%- if selected_variant.compare_at_price > selected_variant.price -%}
<span class="price price--highlight">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{%- if settings.currency_code_enabled -%}
{{- selected_variant.price | money_with_currency -}}
{%- else -%}
{{- selected_variant.price | money -}}
{%- endif -%}
</span>
<span class="price price--compare">
<span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>
{%- if settings.currency_code_enabled -%}
{{- selected_variant.compare_at_price | money_with_currency -}}
{%- else -%}
{{- selected_variant.compare_at_price | money -}}
{%- endif -%}
</span>
{%- else -%}
<span class="price">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{%- if settings.currency_code_enabled -%}
{{- selected_variant.price | money_with_currency -}}
{%- else -%}
{{- selected_variant.price | money -}}
{%- endif -%}
</span>
{%- endif -%}
</div>
{%- assign variant_to_use = selected_variant | default: product.selected_or_first_available_variant -%}
{%- if variant_to_use.unit_price -%}
<div class="product-form__price-info">
<div class="unit-price-measurement">
{{- variant_to_use.unit_price | unit_price_with_measurement: variant_to_use.unit_price_measurement -}}
</div>
</div>
{%- endif -%}
{{- form | payment_terms -}}
{%- if block.settings.show_taxes_included -%}
{%- if cart.taxes_included or shop.shipping_policy.body != blank -%}
<p class="product-form__price-info">
{%- if cart.taxes_included -%}
{{ 'product.general.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'product.general.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</p>
{%- endif -%}
{%- endif -%}
</div>
</div>
{%- endif -%}
{%- if block.settings.show_inventory_quantity and product.template_suffix != 'pre-order' and product.selected_or_first_available_variant != nil -%}
<div class="product-form__info-item">
<span class="product-form__info-title text--strong">{{ 'product.form.inventory' | t }}:</span>
<div class="product-form__info-content">
{%- if selected_variant.inventory_management -%}
{%- if selected_variant.available -%}
{%- if selected_variant.inventory_quantity <= 0 and selected_variant.requires_shipping -%}
{%- if selected_variant.incoming -%}
{%- capture next_incoming_date -%}{{ selected_variant.next_incoming_date | date: format: 'date' }}{%- endcapture -%}
<span class="product-form__inventory inventory inventory--high">{{ 'product.form.incoming_stock' | t: next_incoming_date: next_incoming_date }}</span>
{%- else -%}
<span class="product-form__inventory inventory inventory--high">{{ 'product.form.oversell_stock' | t }}</span>
{%- endif -%}
{%- elsif block.settings.low_inventory_threshold > 0 -%}
{%- if selected_variant.inventory_quantity <= block.settings.low_inventory_threshold -%}
<span class="product-form__inventory inventory inventory--low">{{ 'product.form.low_stock_with_quantity_count' | t: count: selected_variant.inventory_quantity }}</span>
{%- else -%}
<span class="product-form__inventory inventory inventory--high">{{ 'product.form.in_stock_with_quantity_count' | t: count: selected_variant.inventory_quantity }}</span>
{%- endif -%}
{%- else -%}
<span class="product-form__inventory inventory inventory--high">{{ 'product.form.in_stock' | t }}</span>
{%- endif -%}
{%- else -%}
{%- if selected_variant.incoming -%}
{%- capture next_incoming_date -%}{{ selected_variant.next_incoming_date | date: format: 'date' }}{%- endcapture -%}
<span class="product-form__inventory inventory">{{ 'product.form.incoming_stock' | t: next_incoming_date: next_incoming_date }}</span>
{%- else -%}
<span class="product-form__inventory inventory">{{ 'product.form.sold_out' | t }}</span>
{%- endif -%}
{%- endif -%}
{%- else -%}
<span class="product-form__inventory inventory inventory--high">{{ 'product.form.in_stock' | t }}</span>
{%- endif -%}
{%- for tag in product.tags -%}
{%- if tag contains '__stock:' -%}
{%- assign stock_countdown_max = tag | split: '__stock:' | last | times: 1.0 -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- comment -%}
Historically the theme used a tag based approach instead of a setting. We keep this for compatibility, but then fallback to the setting,
which allows a simpler setup
{%- endcomment -%}
{%- assign stock_countdown_max = stock_countdown_max | default: block.settings.progress_bar_max_value | times: 1.0 -%}
<progress-bar class="inventory-bar" data-variant-inventory="{{ selected_variant.inventory_quantity }}" data-stock-countdown-max="{{ stock_countdown_max }}">
<span class="inventory-bar__progress" style="width: 100%"></span>
</progress-bar>
</div>
</div>
{%- endif -%}
{%- if product.template_suffix != 'contact' -%}
{%- if block.settings.show_quantity_selector -%}
<div class="product-form__info-item product-form__info-item--quantity">
<label for="{{ section.id }}-{{ product.id }}-quantity" class="product-form__info-title text--strong">{{ 'product.form.quantity' | t }}:</label>
<div class="product-form__info-content">
{%- assign variant = product.selected_or_first_available_variant -%}
<div class="product-form__quantity-with-rules">
<quantity-picker class="quantity-selector quantity-selector--product">
<button type="button" class="quantity-selector__button" data-action="decrease-picker-quantity" aria-label="{{ 'cart.items.decrease_quantity' | t }}" title="{{ 'cart.items.decrease_quantity' | t }}">{% render 'icon', icon: 'minus' %}</button>
<input id="{{ section.id }}-{{ product.id }}-quantity" type="number" name="quantity" aria-label="{{ 'product.form.quantity' | t }}" class="quantity-selector__value" inputmode="numeric" value="{{ variant.quantity_rule.min | default: 1 }}" step="{{ variant.quantity_rule.increment }}" min="{{ variant.quantity_rule.min }}" {% if variant.quantity_rule.max != nil %}max="{{ variant.quantity_rule.max }}"{% endif %}>
<button type="button" class="quantity-selector__button" data-action="increase-picker-quantity" aria-label="{{ 'cart.items.increase_quantity' | t }}" title="{{ 'cart.items.increase_quantity' | t }}">{% render 'icon', icon: 'plus' %}</button>
</quantity-picker>
{%- liquid
assign variant = product.selected_or_first_available_variant
assign quantity_rules = ''
if variant.quantity_rule.min > 1
assign rule = 'product.quantity.minimum_of' | t: min: variant.quantity_rule.min
assign quantity_rules = quantity_rules | append: ' / ' | append: rule
endif
if variant.quantity_rule.max != nil
assign rule = 'product.quantity.maximum_of' | t: max: variant.quantity_rule.max
assign quantity_rules = quantity_rules | append: ' / ' | append: rule
endif
if variant.quantity_rule.increment > 1
assign rule = 'product.quantity.increment_of' | t: step: variant.quantity_rule.increment
assign quantity_rules = quantity_rules | append: ' / ' | append: rule
endif
-%}
{%- if quantity_rules != blank -%}
<p class="product-form__quantity-rules text--small">{{ quantity_rules | remove_first: ' / ' | capitalize }}</p>
{%- endif -%}
</div>
</div>
</div>
{%- else -%}
<input type="hidden" name="quantity" value="1">
{%- endif -%}
{%- endif -%}
</div>