Automatic-Discount/Ella
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-02-17 12:35:22 +08:00
commit 3f1a3b6b28
11 changed files with 11654 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md Normal file
View File

@ -0,0 +1,5 @@
# Ella theme - Yagi Automatic Discount Helper app
This repository contains installation guide for Ella theme (developed by Halothemes).
This repository contains file in snippets folder, which you can copy paste and replace the existing file in your current Ella theme, to display the automatic discounted price.

807
snippets/halo-quick-view.liquid Normal file
View File

@ -0,0 +1,807 @@
{%- liquid
assign layout = settings.quick_view_layout
assign max_thumbnail_to_show = settings.thumbnail_to_show
assign current_variant = product.selected_or_first_available_variant
assign variantCount = product.variants | size
assign featured_media_aspect_ratio = product.featured_media.aspect_ratio
if product.featured_media.aspect_ratio == nil
assign featured_media_aspect_ratio = 1
endif
assign media_size = settings.quick_view_product_image_ratio
assign portrait_aspect_ratio = settings.quick_view_portrait_aspect_ratio | append: '%'
assign quick_view_zoomed_image = settings.quick_view_zoomed_image
assign show_quick_view_badge = settings.show_quick_view_badge
assign fontsize_text = settings.fontsize_text
assign color_title = settings.color_title
assign show_quick_view_review = settings.show_quick_view_review
assign word_number_short_desc = settings.word_number_short_desc
assign fontsize_short_desc = settings.fontsize_short_desc
assign color_short_desc = settings.color_short_desc
assign show_quick_view_sold_in = settings.show_quick_view_sold_in
if show_quick_view_sold_in
assign quick_view_sold_in_number = settings.quick_view_sold_in_number
assign quick_view_sold_in_hours = settings.quick_view_sold_in_hours
endif
assign show_quick_view_short_description = settings.show_quick_view_short_description
assign show_quick_view_short_description = settings.show_quick_view_short_description
assign fontsize_price = settings.fontsize_price
assign show_countdown = settings.show_countdown
if show_countdown
assign countdown_type = settings.countdown_type
assign countdown_time = settings.countdown_time
assign countdown_collection = settings.countdown_collection | downcase | handle
assign countdown_style = settings.countdown_style
endif
assign show_quick_view_vendor = settings.show_quick_view_vendor
assign show_quick_view_availability = settings.show_quick_view_availability
assign show_quick_view_sku = settings.show_quick_view_sku
assign show_quick_view_product_type = settings.show_quick_view_product_type
assign quick_view_picker_type = settings.quick_view_picker_type
assign stock_level_display = settings.stock_level_display
assign show_hot_stock = settings.show_hot_stock
if show_hot_stock
assign productMaxStock = settings.hot_stock_limit | plus: 0
endif
assign show_quick_view_qty = settings.show_quick_view_qty
assign show_quick_view_subtotal = settings.show_quick_view_subtotal
assign show_subtotal = false
assign subtotal = 0
if show_quick_view_subtotal and show_quick_view_qty
assign show_subtotal = true
assign subtotal = current_variant.price | money
comment
[Yagi Automatic Discount Helper] start - overrride the subtotal if there is auto discount applied from the app
endcomment
assign auto_discounted_price = current_variant.metafields.app--168074346497.auto_discounted_price.value | default: current_variant.price
if auto_discounted_price < current_variant.price
assign subtotal = auto_discounted_price | money
endif
comment
[Yagi Automatic Discount Helper] end - overrride the subtotal if there is auto discount applied from the app
endcomment
endif
assign show_dynamic_checkout = settings.show_dynamic_checkout
assign show_quick_view_customer_viewing = settings.show_quick_view_customer_viewing
if show_quick_view_customer_viewing
assign quick_view_customer_viewing_number = settings.quick_view_customer_viewing_number
assign quick_view_customer_viewing_time = settings.quick_view_customer_viewing_time
endif
assign show_quick_view_trust_image = settings.show_quick_view_trust_image
assign show_quick_view_share = settings.show_quick_view_share
if show_quick_view_share
assign share_product_script = settings.share_product_script
endif
assign show_customization_option = settings.show_customization_option
if show_customization_option
assign has_customization_option = false
assign customization_option_type = settings.customization_option_type
assign customization_option_hidden = settings.customization_option_hidden
if customization_option_type == 'all'
assign has_customization_option = true
elsif customization_option_type == 'tag'
assign customization_option_tags = settings.customization_option_tags | downcase | strip | split: ","
for tag in customization_option_tags
assign tagtitle = tag | strip
assign productTag = product.tags | downcase
if productTag contains tagtitle
assign has_customization_option = true
endif
endfor
elsif customization_option_type == 'collection'
assign customization_option_collection = settings.customization_option_collection | downcase | handle
if customization_option_collection != blank
for collection in product.collections
assign collection_title = collection.title | downcase | handle
if collection_title == customization_option_collection
assign has_customization_option = true
endif
endfor
endif
endif
assign customization_option_1 = settings.customization_option_1
assign customization_option_2 = settings.customization_option_2
endif
assign show_quick_view_variant_image_group = settings.show_quick_view_variant_image_group
-%}
<style type="text/css">
.quickView .productView-thumbnail .productView-thumbnail-link:after{padding-bottom: {{ portrait_aspect_ratio }}}
</style>
{%- if variantCount > 0 and product.has_only_default_variant != true -%}
<script>
window.quick_view_inven_array_{{ product.id }} = {
{% for variant in product.variants %}
'{{ variant.id }}': '{{ variant.inventory_quantity }}',
{% endfor %}
};
</script>
{%- endif -%}
<script>
window.quick_view_subtotal = {
show: {{ show_subtotal }},
text: `{{ 'products.product.sub_total' | t : value : '[value]' }}`
};
window.quick_view_selling_array_{{ product.id }} = {
{% for variant in product.variants %}
'{{ variant.id }}': '{{ variant.inventory_policy }}',
{% endfor %}
};
</script>
<div class="productView quickView halo-quickView layout-{{ layout }}{% if product.media.size == 0 %} productView-no-media{% endif %}" data-product-quickview-handle="{{ product.handle }}">
<div class="productView-top">
<div class="halo-productView-left halo-quickView-left productView-images clearfix" data-image-gallery>
<div class="productView-images-wrapper">
<div class="productView-image-wrapper">
{%- if show_quick_view_badge -%}
{% render 'product-badge',
product: product,
class: 'productView-badge',
badge_detail: true,
serial: 1
%}
{%- endif -%}
<div class="productView-nav" data-image-gallery-main data-arrows-desk="false">
{%- for media in product.media -%}
{%- case media.media_type -%}
{%- when 'image' -%}
<div class="productView-image productView-image-{{ media_size }}{% if settings.show_quick_view_variant_image_group %} filter-{{ media.alt | handle }}{% endif %}">
<div class="productView-img-container product-single__media" data-media-id="{{ media.id }}"{% if product.featured_media %}{% if media_size == 'adapt' %} style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"{% elsif media_size == 'square' %} style="padding-bottom: 100%;"{% elsif media_size == 'portrait' %}{% if portrait_aspect_ratio != blank %} style="padding-bottom: {{ portrait_aspect_ratio }};"{% endif %}{% endif %}{% endif %}>
<div class="media" {% if quick_view_zoomed_image %} data-zoom-image="{{ media.preview_image | img_url: 'master' }}"{% endif %}>
<img id="product-featured-image-{{ media.id }}"
{% render 'lazyload', preview_img: media.preview_image, class: true %}
title="{{ media.preview_image.alt | escape }}" data-main-image >
{% if settings.enable_lazyload %}<span class="data-lazy-loading"></span>{% endif %}
</div>
</div>
</div>
{%- when 'external_video' -%}
<div class="productView-image productView-image-{{ media_size }}">
<div class="productView-img-container product-single__media" data-media-id="{{ media.id }}"
{% if media_size == 'adapt' %}
style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"
{% elsif media_size == 'square' %}
style="padding-bottom: 100%;"
{% elsif media_size == 'portrait' %}
{% if portrait_aspect_ratio != blank %}
style="padding-bottom: {{ portrait_aspect_ratio }};"
{% endif %}
{% endif %}
>
{%- if media.host == 'youtube' -%}
<div class="media has-video">
<img srcset="https://i.ytimg.com/vi/{{ media.external_id }}/maxresdefault.jpg" src="https://i.ytimg.com/vi/{{ media.external_id }}/maxresdefault.jpg" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}" sizes="(min-width: 1200px) calc((1200px - 10rem) / 2), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)" loading="lazy" data-sizes="auto">
</div>
<div class="productView-video youtube"><div data-youtube="{{ media.external_id }}"></div></div>
{%- else -%}
<div class="media has-video">
<img srcset="{{ media | img_url: 'master' }}" src="{{ media | img_url: 'master' }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}" sizes="(min-width: 1200px) calc((1200px - 10rem) / 2), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)" loading="lazy" data-sizes="auto">
</div>
<div class="productView-video vimeo" data-vimeo>{{ media | external_video_tag }}</div>
{%- endif -%}
</div>
</div>
{%- when 'video' -%}
<div class="productView-image productView-image-{{ media_size }}">
<div class="productView-img-container product-single__media" data-media-id="{{ media.id }}"
{% if media_size == 'adapt' %}
style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"
{% elsif media_size == 'square' %}
style="padding-bottom: 100%;"
{% elsif media_size == 'portrait' %}
{% if portrait_aspect_ratio != blank %}
style="padding-bottom: {{ portrait_aspect_ratio }};"
{% endif %}
{% endif %}
>
<div class="media has-video">
<img srcset="{{ media | img_url: 'master' }}" src="{{ media | img_url: 'master' }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}" sizes="(min-width: 1200px) calc((1200px - 10rem) / 2), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)" loading="lazy" data-sizes="auto">
</div>
<div class="productView-video mp4" data-mp4>{{ media | video_tag: controls: true, image_size: 'master' }}</div>
</div>
</div>
{%- when 'model' -%}
<div class="productView-image productView-image-{{ media_size }}">
<div class="model-viewer-click productView-img-container product-single__media"
{% if media_size == 'adapt' %}
style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"
{% elsif media_size == 'square' %}
style="padding-bottom: 100%;"
{% elsif media_size == 'portrait' %}
{% if portrait_aspect_ratio != blank %}
style="padding-bottom: {{ portrait_aspect_ratio }};"
{% endif %}
{% endif %}
>
{{ media | model_viewer_tag: image_size: '500x',
reveal: 'interaction',
toggleable: true,
data-model-id: media.id,
auto-rotate: true,
id: 'paused-change-demo'
}}
</div>
</div>
{%- else -%}
<div class="productView-image productView-image-{{ media_size }}">
<div class="productView-img-container product-single__media" data-media-id="{{ media.id }}"
{% if media_size == 'adapt' %}
style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"
{% elsif media_size == 'square' %}
style="padding-bottom: 100%;"
{% elsif media_size == 'portrait' %}
{% if portrait_aspect_ratio != blank %}
style="padding-bottom: {{ portrait_aspect_ratio }};"
{% endif %}
{% endif %}
>
{{ media | media_tag }}
</div>
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>
<div class="productView-thumbnail-wrapper">
<div class="productView-for clearfix" data-max-thumbnail-to-show="{{ max_thumbnail_to_show }}">
{%- for media in product.media -%}
{%- case media.media_type -%}
{%- when 'image' -%}
<div class="productView-thumbnail{% if settings.show_quick_view_variant_image_group %} filter-{{ media.alt | handle }}{% endif %}" data-media-id="{{ product.id }}-{{ media.id }}">
<a class="productView-thumbnail-link" href="javascript:void(0)" data-image="{{ media | img_url: 'original' }}"><img src="{{ media | img_url: 'compact' }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}"></a>
</div>
{%- when 'external_video' -%}
<div class="productView-thumbnail" data-media-id="{{ product.id }}-{{ media.id }}">
<div class="productView-thumbnail-link">
<img src="{{ media | img_url: 'compact' }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}">
</div>
<div class="productView-thumbnail-icon">{% render 'icon-video' %}</div>
</div>
{%- when 'video' -%}
<div class="productView-thumbnail" data-media-id="{{ product.id }}-{{ media.id }}">
<div class="productView-thumbnail-link"><img src="{{ media | media_tag | split: 'src="' | last | split: '">' | first }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}"/></div>
<div class="productView-thumbnail-icon">{% render 'icon-video' %}</div>
</div>
{%- when 'model' -%}
<div class="productView-thumbnail" data-media-id="{{ product.id }}-{{ media.id }}">
<div class="productView-thumbnail-link"><img src="{{ media | media_tag | split: 'poster="' | last | split: '">' | first }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}"/></div>
<div class="productView-thumbnail-icon">{%- render 'icon-3d-model' -%}</div>
</div>
{%- else -%}
<div class="productView-thumbnail" data-media-id="{{ product.id }}-{{ media.id }}">
<div class="productView-thumbnail-link">{{ media | media_tag }}</div>
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
</div>
<div class="halo-productView-right halo-quickView-right productView-details clearfix">
<div class="productView-product clearfix">
<h2 class="productView-title" style="--color-title: {{ color_title }};--fontsize-text: {{ fontsize_text | append: 'px' }}"><a href="{{ product.url }}">{{ product.title | escape }}</a></h2>
{%- if show_quick_view_review or show_quick_view_sold_in -%}
<div class="productView-meta clearfix" style="--color_short_desc: {{ color_short_desc }}; --fontsize_short_desc: {{ fontsize_short_desc | append: 'px' }}">
{%- if show_quick_view_review -%}
<div class="productView-rating halo-productReview"><span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span></div>
{%- endif -%}
{%- if show_quick_view_sold_in -%}
<div class="productView-soldProduct" data-sold-out-product data-item="{{ quick_view_sold_in_number }}" data-hours="{{ quick_view_sold_in_hours }}" style="display: none;">
{% render 'icon-fire-2' %}
<span class="text"><span data-sold-out-number>2</span> {{ 'products.product.sold_in_last.text_1' | t }} <span data-sold-out-hours>8</span> {{ 'products.product.sold_in_last.text_2' | t }}</span>
</div>
{%- endif -%}
</div>
{%- endif -%}
{%- if show_quick_view_short_description -%}
{%- liquid
assign desc = product.description
-%}
{%- if product.metafields.c_f.short_description -%}
{%- liquid
assign desc = product.metafields.c_f.short_description
-%}
{%- endif -%}
{%- if desc != blank -%}
<div class="productView-desc halo-text-format" style="--color_short_desc: {{ color_short_desc }};--fontsize_short_desc: {{ fontsize_short_desc | append: 'px' }}">{{ desc | truncatewords: word_number_short_desc }}</div>
{%- endif -%}
{%- endif -%}
{%- if show_quick_view_vendor or show_quick_view_availability or show_quick_view_sku or show_quick_view_product_type -%}
<div class="productView-info">
{%- if show_quick_view_sku -%}
<div class="productView-info-item" data-sku {% unless current_variant.sku != blank %} style="display: none;"{% endunless %}>
<span class="productView-info-name">{{ 'products.product.text.sku' | t }}</span>
<span class="productView-info-value">{{ current_variant.sku }}</span>
</div>
{%- endif -%}
{%- if show_quick_view_vendor -%}
<div class="productView-info-item">
<span class="productView-info-name">{{ 'products.product.text.vendor' | t }}</span>
<span class="productView-info-value">{{ product.vendor | link_to_vendor }}</span>
</div>
{%- endif -%}
{%- if show_quick_view_availability -%}
<div class="productView-info-item" data-inventory data-stock-level="{{ stock_level_display }}">
<span class="productView-info-name">{{ 'products.product.text.availability' | t }}</span>
<span class="productView-info-value">
{%- if current_variant.inventory_management -%}
{%- assign first_inventory = current_variant.inventory_quantity -%}
{%- if first_inventory > 0 -%}
{% if stock_level_display == 'show' %}{{ first_inventory }} {% endif %}
{{ 'products.product.in_stock' | t }}
{%- else -%}
{{ 'products.product.out_of_stock' | t }}
{%- endif -%}
{%- else -%}
{{ 'products.product.many_in_stock' | t }}
{%- endif -%}
</span>
</div>
{%- endif -%}
{%- if show_quick_view_product_type -%}
<div class="productView-info-item">
<span class="productView-info-name">{{ 'products.product.text.type' | t }}</span>
<span class="productView-info-value">{{ product.type | escape }}</span>
</div>
{%- endif -%}
</div>
{%- endif -%}
<div class="productView-price no-js-hidden clearfix" id="product-quick-view-price-{{ product.id }}"
style="--fontsize-text: {{ fontsize_price | append: 'px' }};"
>
{%- render 'price',
product: product,
use_variant: true,
price_class: 'price--medium'
-%}
</div>
{%- if show_countdown -%}
{%- if countdown_type == 'all_product' -%}
<div class="productView-countDown countdown_{{ product.id }} style-{{ countdown_style }} clearfix" data-countdown-id="{{ product.id }}" data-countdown="{{ countdown_time }}">
<span class="text animated-loading"><span>{{ settings.countdown_text }}</span></span>
<span class="num animated-loading"><span>151<span>D</span></span></span>
<span class="num animated-loading"><span>8<span>H</span></span></span>
<span class="num animated-loading"><span>23<span>M</span></span></span>
<span class="num animated-loading"><span>0<span>S</span></span></span>
</div>
{%- elsif countdown_type == 'collection_product' -%}
{%- liquid
assign hasCountdown = false
if countdown_collection != blank
for collection in product.collections
assign collection_title = collection.title | downcase | handle
if collection_title == countdown_collection
assign hasCountdown = true
endif
endfor
endif
-%}
{%- if hasCountdown -%}
<div class="productView-countDown countdown_{{ product.id }} clearfix" data-countdown-id="{{ product.id }}" data-countdown="{{ countdown_time }}">
<span class="text animated-loading"><span>{{ settings.countdown_text }}</span></span>
<span class="num animated-loading"><span>151<span>D</span></span></span>
<span class="num animated-loading"><span>8<span>H</span></span></span>
<span class="num animated-loading"><span>23<span>M</span></span></span>
<span class="num animated-loading"><span>0<span>S</span></span></span>
</div>
{%- endif -%}
{%- else -%}
{%- if product.metafields.c_f.countdown -%}
{% assign countdown_type = product.metafields.c_f.countdown %}
<div class="productView-countDown countdown_{{ product.id }} clearfix" data-countdown-id="{{ product.id }}" data-countdown="{{ countdown_type }}">
<span class="text animated-loading"><span>{{ settings.countdown_text }}</span></span>
<span class="num animated-loading"><span>151<span>D</span></span></span>
<span class="num animated-loading"><span>8<span>H</span></span></span>
<span class="num animated-loading"><span>23<span>M</span></span></span>
<span class="num animated-loading"><span>0<span>S</span></span></span>
</div>
{%- endif -%}
{%- endif -%}
{%- endif -%}
<div class="productView-options">
{%- assign product_form_installment_id = 'product-quick-view-form-installment-' | append: product.id -%}
{%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
<input type="hidden" name="id" value="{{ current_variant.id }}">
{{ form | payment_terms }}
{%- endform -%}
<div class="productView-variants halo-productOptions" id="product-quick-view-option-{{ product.id }}" data-type="{{ quick_view_picker_type }}">
{%- if variantCount > 0 and product.has_only_default_variant != true -%}
{%- if quick_view_picker_type == 'button' -%}
{%- assign product_swatch_option = settings.swatch | downcase -%}
<variant-quick-view-radios class="no-js-hidden product-option has-default" data-product="{{ product.id }}" data-url="{{ product.url }}" data-json='{{ product.variants | json | escape }}'>
{%- for option in product.options_with_values -%}
{%- liquid
assign is_swatch = false
assign option_name = option.name | downcase
if product_swatch_option contains option_name
assign is_swatch = true
endif
assign swatch_type = settings.swatch_type
assign option_index = forloop.index0
-%}
<fieldset class="js product-form__input{% if is_swatch %} product-form__swatch{% endif %} clearfix" data-product-attribute="set-rectangle" data-option-index="{{ forloop.index0 }}">
<legend class="form__label">
{{ option.name | append: ':' }}
<span data-header-option>
{{ option.selected_value }}
</span>
</legend>
{%- assign values = '' -%}
{%- liquid
assign variants_available_arr = product.variants | map: 'available'
assign variants_option1_arr = product.variants | map: 'option1'
assign variants_option2_arr = product.variants | map: 'option2'
assign variants_option3_arr = product.variants | map: 'option3'
-%}
{%- for variant in product.variants -%}
{%- assign value = variant.options[option_index] -%}
{%- unless values contains value -%}
{%- liquid
assign values = values | join: ';'
assign values = values | append: ';' | append: value
assign values = values | split: ';'
assign option_stock = 'soldout'
for option1_name in variants_option1_arr
case option.position
when 1
if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_stock = 'available'
endif
when 2
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_stock = 'available'
endif
when 3
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_stock = 'available'
endif
endcase
endfor
-%}
<input class="product-form__radio" type="radio" id="option-quick-view-{{ product.id }}-{{ option.name }}-{{ forloop.index0 }}" name="{{ option.name }}" value="{{ value | escape }}"{% if option.selected_value == value %} checked{% endif %}{% if settings.show_quick_view_variant_image_group %} data-filter=".filter-{{ value | handle }}"{% endif %}>
{%- if is_swatch -%}
{%- liquid
assign enable_variant_image = false
case swatch_type
when 'variant_image'
assign background_image = variant.image.src | product_img_url: '40x'
if variant.image
assign enable_variant_image = true
endif
when 'color'
assign background_image = value | handle | append: '.png' | file_url
assign enable_variant_image = true
when 'metafields'
assign variant_color = variant.metafields.custom.variant_color
assign color_codes = false
if variant_color
assign enable_variant_image = true
if variant_color contains '#' or variant_color contains 'rgb' or variant_color contains 'hsl'
assign color_codes = true
assign background_color = variant_color
else
assign background_image = variant_color | append: '.png' | file_url
endif
elsif variant.image
assign enable_variant_image = true
assign background_image = variant.image.src | product_img_url: '40x'
endif
endcase
-%}
<label class="product-form__label {{ option_stock }}" for="option-quick-view-{{ product.id }}-{{ option.name }}-{{ forloop.index0 }}">
<span
class="pattern"
style="background-color: {{ value | split: ' ' | last | handle }};{% if enable_variant_image %}{% if swatch_type == 'metafields' %}{% if color_codes %} background: {{ background_color }}{% else %} background: url({{ background_image }}); background-size: cover;{% endif %}{% else %} background-image: url({{ background_image }});{% endif %}{% endif %}"
></span>
</label>
{%- else -%}
<label class="product-form__label {{ option_stock }}" for="option-quick-view-{{ product.id }}-{{ option.name }}-{{ forloop.index0 }}"><span class="text">{{ value }}</span></label>
{%- endif -%}
{%- endunless -%}
{%- endfor -%}
</fieldset>
{%- endfor -%}
<script type="application/json">{{ product.variants | json }}</script>
</variant-quick-view-radios>
{%- else -%}
<variant-quick-view-selects class="no-js-hidden product-option has-default" data-product="{{ product.id }}" data-url="{{ product.url }}" data-json='{{ product.variants | json | escape }}'>
{%- for option in product.options_with_values -%}
<div class="product-form__input product-form__input--dropdown" data-product-attribute="set-select" data-option-index="{{ forloop.index0 }}">
<label class="form__label" for="option-quick-view-{{ forloop.index0 }}">{{ option.name | append: ':' }} <span data-header-option>{{ option.selected_value }}</span></label>
<div class="form__select select">
<select id="option-quick-view-{{ forloop.index0 }}" class="select__select" name="options[{{ option.name | escape }}]">
{%- for value in option.values -%}
<option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>{{ value }}</option>
{%- endfor -%}
</select>
</div>
</div>
{%- endfor -%}
<script type="application/json">{{ product.variants | json }}</script>
</variant-quick-view-selects>
{%- endif -%}
{%- if show_hot_stock -%}
<div class="productView-hotStock" data-hot-stock="{{ productMaxStock }}">
{%- if current_variant.inventory_management -%}
{%- if current_variant.inventory_quantity > 0 and current_variant.inventory_quantity <= productMaxStock -%}
{{ 'products.product.hot_stock' | t : inventory: current_variant.inventory_quantity }}
{%- endif -%}
{%- endif -%}
</div>
{%- endif -%}
{%- endif -%}
</div>
<noscript>
<div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
<label class="form__label" for="Variants-{{ section.id }}">{{ 'products.product.product_variants' | t }}</label>
<div class="select">
<select name="id" id="Variants-{{ section.id }}" class="select__select" form="product-form">
{%- for variant in product.variants -%}
<option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} {% if variant.available == false %}disabled{% endif %} value="{{ variant.id }}">{{ variant.title }}
{%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
- {{ variant.price | money | strip_html }}
</option>
{%- endfor -%}
</select>
</div>
</div>
</noscript>
{%- if show_quick_view_qty -%}
<div class="quantity_selector">
<quantity-quick-view-input class="productView-quantity quantity__group quantity__group--2 quantity__style--1 clearfix">
<label class="form-label quantity__label" for="quantity-{{ product.id }}-2">{{ 'products.product.quantity.label__2' | t }}</label>
<div class="quantity__container">
<button type="button" name="minus" class="minus btn-quantity"><span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span></button>
<input class="form-input quantity__input quantity" type="number" name="quantity" min="1" value="1" inputmode="numeric" pattern="[0-9]*" id="quantity-{{ product.id }}-2" data-product="{{ product.id }}" data-price="{{ current_variant.price }}" data-inventory-quantity="{{ current_variant.inventory_quantity }}">
<button type="button" name="plus" class="plus btn-quantity"><span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span></button>
</div>
</quantity-quick-view-input>
</div>
{%- endif -%}
{%- if show_subtotal -%}
<div class="productView-subtotal">
<span class="text">{{ 'sections.cart.subtotal' | t | append: ': ' }}</span>
<span class="money-subtotal">{{ subtotal }}</span>
</div>
{%- endif -%}
{%- liquid
assign show_size_chart = settings.show_size_chart
if show_size_chart
assign has_size_chart = false
assign size_chart_type = settings.size_chart_type
if size_chart_type == 'product_type' or size_chart_type == 'product_vendor'
assign size_chart_image_type = settings.size_chart_image_type
elsif size_chart_type == 'custom_image'
assign size_chart_image = settings.size_chart_image
endif
if size_chart_type == 'product_type'
if size_chart_image_type == 'jpg'
assign size_chart_image = product.type | handle | append: '-sizechart.jpg'
else
assign size_chart_image = product.type | handle | append: '-sizechart.png'
endif
if images[size_chart_image] != blank
assign has_size_chart = true
endif
elsif size_chart_type == 'product_vendor'
if size_chart_image_type == 'jpg'
assign size_chart_image = product.vendor | handle | append: '-sizechart.jpg'
else
assign size_chart_image = product.vendor | handle | append: '-sizechart.jpg'
endif
if images[size_chart_image] != blank
assign has_size_chart = true
endif
elsif size_chart_type == 'metafield'
if product.metafields.c_f.size_chart
assign has_size_chart = true
endif
elsif size_chart_type == 'custom_image'
if size_chart_image != blank
assign has_size_chart = true
endif
endif
endif
assign show_compare_color = settings.show_compare_color
if show_compare_color
assign show_compare_color_drop_drap = settings.show_compare_color_drop_drap
assign product_swatch_option = settings.swatch | downcase
assign isColor = false
for option in product.options_with_values
assign option_name = option.name | downcase
if product_swatch_option contains option_name
assign isColor = true
assign index = forloop.index0
if option.values.size > 1
assign show_compare_color = true
endif
endif
endfor
endif
-%}
<div class="productView-perks">
{%- if show_size_chart and has_size_chart -%}
<div class="productView-sizeChart">
<a class="link link-underline" href="javascript:void(0)" data-open-size-chart-popup>
{% render 'icon-size-chart-2' %}
<span class="text">{{ 'size_chart.general.text' | t }}</span>
</a>
</div>
{%- endif -%}
{%- if show_compare_color and isColor -%}
<div class="productView-compareColor style-1">
<button type="button" class="link link-underline" aria-label="{{ 'compare_color.general.title' | t }}" data-open-compare-color-popup>
{% render 'icon-compare-color-2' %}
<span class="text">{{ 'compare_color.general.title' | t }}</span>
</button>
</div>
{%- endif -%}
{%- if settings.show_ask_an_expert -%}
<div class="productView-askAnExpert">
<a class="link link-underline" href="javascript:void(0)" data-open-ask-an-expert>
{%- if settings.ask_an_expert_icon != blank -%}
{{ settings.ask_an_expert_icon }}
{%- endif -%}
<span class="text">{{ 'ask_an_expert.general.text' | t}}</span>
</a>
</div>
{%- endif -%}
</div>
{%- assign product_form_id = 'product-quick-view-form-' | append: product.id -%}
{%- form 'product', product, id: product_form_id, class: 'form productView-action', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
{%- if show_customization_option and has_customization_option -%}
{%- if customization_option_1 != blank or customization_option_2 != blank -%}
<div class="productView-group">
{% render 'product-customization',
product: product,
customization_option_hidden: customization_option_hidden,
customization_option_1: customization_option_1,
customization_option_2: customization_option_2
%}
</div>
{%- endif -%}
{%- endif -%}
<div class="productView-message" style="display: none;"></div>
<div class="productView-group">
{%- if show_quick_view_qty -%}
<quantity-quick-view-input class="productView-quantity quantity__group quantity__group--1 quantity__style--1 clearfix hidden">
<label class="form-label quantity__label" for="quantity-{{ product.id }}">{{ 'products.product.quantity.label__2' | t }}</label>
<div class="quantity__container">
<button type="button" name="minus" class="minus btn-quantity"><span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span></button>
<input class="form-input quantity__input quantity" type="number" name="quantity" min="1" value="1" inputmode="numeric" pattern="[0-9]*" id="quantity-{{ product.id }}" data-product="{{ product.id }}" data-price="{{ current_variant.price }}" data-inventory-quantity="{{ current_variant.inventory_quantity }}">
<button type="button" name="plus" class="plus btn-quantity"><span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span></button>
</div>
</quantity-quick-view-input>
{%- endif -%}
<div class="productView-groupTop">
<div class="productView-action{% unless settings.show_wishlist %} productView-action-2{% endunless %}" style="--atc-color: #ffffff;--atc-bg-color: #232323;--atc-border-color: #232323;--atc-color-hover: #232323;--atc-bg-color-hover: #ffffff;--atc-border-color-hover: #232323">
<input type="hidden" name="id" value="{{ current_variant.id }}">
<div class="product-form__buttons">
{%- if current_variant.available -%}
{%- if current_variant.inventory_management -%}
{%- assign first_inventory = current_variant.inventory_quantity -%}
{%- liquid
if current_variant.available and first_inventory == 0
assign allowOutStockSale = true
else
assign allowOutStockSale = false
endif
-%}
<input type="hidden" name="properties[Test 123]" value="1">
<button type="submit" name="add" data-btn-addToCart data-available="{{ allowOutStockSale }}" class="product-form__submit button button--primary{% if first_inventory == 0 %} button-text-change{% else %}{% if show_subtotal_text %} button-text-change{% endif %}{% endif %}" id="product-add-to-cart">
{%- if first_inventory > 0 -%}
{%- if show_subtotal_text and subtotal_style == '2' -%}
{%- assign subtotal = subtotal | strip_html -%}
{{ 'products.product.sub_total' | t : value : subtotal }}
{%- else -%}
{{ 'products.product.add_to_cart' | t}}
{%- endif -%}
{%- else -%}
{{ 'products.product.pre_order' | t }}
{%- endif -%}
</button>
{%- else -%}
<button type="submit" name="add" data-btn-addToCart class="product-form__submit button button--secondary{% if show_subtotal_text %} button-text-change{% endif %}" id="product-add-to-cart">
{%- if show_subtotal_text and subtotal_style == '2' -%}
{%- assign subtotal = subtotal | strip_html -%}
{{ 'products.product.sub_total' | t : value : subtotal }}
{%- else -%}
{{ 'products.product.add_to_cart' | t}}
{%- endif -%}
</button>
{%- endif -%}
{%- else -%}
<button type="submit" name="add" data-btn-addToCart class="product-form__submit button" id="product-add-to-cart" disabled>{{ 'products.product.sold_out' | t }}</button>
{%- endif -%}
</div>
</div>
{%- if settings.show_wishlist -%}
<div class="productView-wishlist clearfix">
<a data-wishlist href="#" data-wishlist-handle="{{ product.handle }}" data-product-id="{{ product.id }}"><span class="visually-hidden">{{ 'wishlist.general.add' | t }}</span> {% render 'icon-heart' %}</a>
</div>
{%- endif -%}
{%- if show_quick_view_share -%}
{% render 'halo-share', product: product, share_layout: '2' %}
{%- endif -%}
</div>
{%- if show_dynamic_checkout -%}
<div class="productView-groupBottom">
{%- if settings.show_global_checkbox -%}
<div class="productView-groupItem">
{%- if settings.show_global_checkbox -%}
<div class="productView-checkbox global-checkbox">
<input class="global-checkbox--input" type="checkbox" name="conditions" id="product_conditions_{{ product.id }}" data-target="#product-checkout-{{ product.id }}">
<label class="global-checkbox--label form-label--checkbox" for="product_conditions_{{ product.id }}">{{ settings.global_checkbox_text }}</label>
{%- if settings.global_checkbox_link_text != blank -%}
<a href="javascript:void(0)" data-term-condition>{{ settings.global_checkbox_link_text | escape }}</a>
{%- endif -%}
</div>
{%- endif -%}
</div>
{%- endif -%}
<div class="productView-groupItem">
<div class="productView-payment" {% if settings.show_global_checkbox %} disabled="disabled"{% endif %} id="product-checkout-{{ product.id }}" style="--bin-color: #232323;--bin-bg-color: #ffffff;--bin-border-color: #acacac;--bin-color-hover: #ffffff;--bin-bg-color-hover: #232323;--bin-border-color-hover: #232323">{{ form | payment_button }}</div>
</div>
</div>
{%- endif -%}
</div>
{%- endform -%}
{%- if settings.show_notify_form -%}
<div class="productView-notifyMe halo-notifyMe" {% if product.variants.size > 1 %}style="display: none;"{% else %}{% if product.available %}style="display: none;"{% endif %}{% endif %}>
{% render 'halo-notify-sold-out',
id: product.id,
current_variant: current_variant
%}
</div>
{%- endif -%}
{%- if show_quick_view_customer_viewing or show_quick_view_trust_image -%}
<div class="productView-more">
{%- if show_quick_view_customer_viewing -%}
<div class="productView-moreItem">
<div class="productView-ViewingProduct" data-customer-view="{{ quick_view_customer_viewing_number }}" data-customer-view-time="{{ quick_view_customer_viewing_time }}">
{% render 'icon-eyes-2' %}
<span class="text">{{ 'customer_viewing.general.text' | t: number : '10' }}</span>
</div>
</div>
{%- endif -%}
{%- if show_quick_view_trust_image -%}
<div class="productView-moreItem">
<div class="productView-securityImage">
{%- render 'halo-trust-image',
type: 'product'
-%}
</div>
</div>
{%- endif -%}
</div>
{%- endif -%}
</div>
</div>
</div>
</div>
</div>
{%- if show_size_chart and has_size_chart -%}
{% render 'halo-size-chart-popup',
product: product,
size_chart_type: size_chart_type,
size_chart_image: size_chart_image
%}
{%- endif -%}
{%- if show_compare_color and isColor -%}
{% render 'halo-compare-color-popup',
product: product,
show_compare_color_drop_drap: show_compare_color_drop_drap,
index: index
%}
{%- endif -%}

115
snippets/price.liquid Normal file
View File

@ -0,0 +1,115 @@
{%- comment -%}
Renders a list of product's price (regular, sale)
Accepts:
- product: {Object} Product Liquid object (optional)
- use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
- show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
- price_class: {String} Adds a price class to the price element (optional)
Usage:
{% render 'price', product: product %}
{%- endcomment -%}
{%- liquid
if use_variant
assign target = product.selected_or_first_available_variant
else
assign target = product
endif
assign compare_at_price = target.compare_at_price
assign price = target.price | default: 1999
comment
[Yagi Automatic Discount Helper] start - overrride the price if there is auto discount applied from the app
endcomment
if use_variant
assign auto_discounted_price = target.metafields.app--168074346497.auto_discounted_price.value | default: target.price
else
assign auto_discounted_price = target.metafields.app--168074346497.min_auto_discounted_price.value | default: target.price
endif
if auto_discounted_price < price
assign price = auto_discounted_price
assign compare_at_price = target.price
endif
comment
[Yagi Automatic Discount Helper] end - overrride the price if there is auto discount applied from the app
endcomment
assign available = target.available | default: false
if settings.currency_format_enable
assign money_price = price | money_with_currency
else
assign money_price = price | money
endif
if target == product and product.price_varies
assign money_price = 'products.product.price.from_price_html' | t: price: money_price
endif
-%}
<div class="price
{%- if price_class %} {{ price_class }}{% endif -%}
{%- if available == false %} price--sold-out {% endif -%}
{%- if compare_at_price > price %} price--on-sale {% endif -%}
{%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}">
<dl>
{%- comment -%}
Explanation of description list:
- div.price__regular: Displayed when there are no variants on sale
- div.price__sale: Displayed when a variant is a sale
- div.price__availability: Displayed when the product is sold out
{%- endcomment -%}
<div class="price__regular">
{%- comment -%}
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
</dt>
{%- endcomment -%}
<dd class="price__last"><span class="price-item price-item--regular">{{ money_price }}</span></dd>
</div>
<div class="price__sale">
{%- comment -%}
<dt class="price__compare">
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
</dt>
{%- endcomment -%}
<dd class="price__compare"><s class="price-item price-item--regular">{% if settings.currency_format_enable %}{{ compare_at_price | money_with_currency }}{% else %}{{ compare_at_price | money }}{% endif %}</s></dd>
{%- comment -%}
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
</dt>
{%- endcomment -%}
<dd class="price__last"><span class="price-item price-item--sale">{{ money_price }}</span></dd>
{%- if settings.show_saved_price and price != nil and price != blank and compare_at_price != nil and compare_at_price != blank -%}
{%- assign saved_price = compare_at_price | minus: price | money -%}
<div class="price__saved"><span class="price-item price-item--saved">{{'products.product.price.saved_price_html' | t: price: saved_price }}</span></div>
{%- endif -%}
{%- if hasCountdown == true or hasCountdown == 'true' -%}
<dd class="price__label_sale">
{%- liquid
assign list_compare = product.variants | where: 'compare_at_price'
assign compare = 0
for variant in list_compare
assign saving = variant.compare_at_price | minus: variant.price | times: 100.0 | divided_by: variant.compare_at_price | round
if saving > compare
assign compare = saving
endif
endfor
if compare < 1
assign compare = product.compare_at_price_min | minus: product.price_min | times: 100.0 | divided_by: product.compare_at_price_min | round
endif
-%}<span class="label_sale">-{{ compare | append: '%'}}</span></dd>
{%- endif -%}
</div>
<small class="unit-price caption{% if available == false or product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
<dt class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</dt>
<dd class="price__last"><span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span><span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span><span>{%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
{{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}{%- endif -%} {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}</span></dd>
</small>
</dl>
</div>

1299
snippets/product-page-full-width-2.liquid Normal file
View File

File diff suppressed because it is too large Load Diff

1337
snippets/product-page-full-width.liquid Normal file
View File

File diff suppressed because it is too large Load Diff

1351
snippets/product-page-gallery.liquid Normal file
View File

File diff suppressed because it is too large Load Diff

1330
snippets/product-page-horizontal-tabs-no-sidebar.liquid Normal file
View File

File diff suppressed because it is too large Load Diff

1375
snippets/product-page-left-right-sidebar.liquid Normal file
View File

File diff suppressed because it is too large Load Diff

1352
snippets/product-page-left-thumbs.liquid Normal file
View File

File diff suppressed because it is too large Load Diff

1341
snippets/product-page-right-thumbs.liquid Normal file
View File

File diff suppressed because it is too large Load Diff

1342
snippets/product-page.liquid Normal file
View File

File diff suppressed because it is too large Load Diff