From 3f1a3b6b2834845f502f8eabc92ff53e3cd74f49 Mon Sep 17 00:00:00 2001 From: Axel Date: Mon, 17 Feb 2025 12:35:22 +0800 Subject: [PATCH] first commit --- README.md | 5 + snippets/halo-quick-view.liquid | 807 ++++++++++ snippets/price.liquid | 115 ++ snippets/product-page-full-width-2.liquid | 1299 ++++++++++++++++ snippets/product-page-full-width.liquid | 1337 ++++++++++++++++ snippets/product-page-gallery.liquid | 1351 ++++++++++++++++ ...uct-page-horizontal-tabs-no-sidebar.liquid | 1330 ++++++++++++++++ .../product-page-left-right-sidebar.liquid | 1375 +++++++++++++++++ snippets/product-page-left-thumbs.liquid | 1352 ++++++++++++++++ snippets/product-page-right-thumbs.liquid | 1341 ++++++++++++++++ snippets/product-page.liquid | 1342 ++++++++++++++++ 11 files changed, 11654 insertions(+) create mode 100644 README.md create mode 100644 snippets/halo-quick-view.liquid create mode 100644 snippets/price.liquid create mode 100644 snippets/product-page-full-width-2.liquid create mode 100644 snippets/product-page-full-width.liquid create mode 100644 snippets/product-page-gallery.liquid create mode 100644 snippets/product-page-horizontal-tabs-no-sidebar.liquid create mode 100644 snippets/product-page-left-right-sidebar.liquid create mode 100644 snippets/product-page-left-thumbs.liquid create mode 100644 snippets/product-page-right-thumbs.liquid create mode 100644 snippets/product-page.liquid diff --git a/README.md b/README.md new file mode 100644 index 0000000..f82a35d --- /dev/null +++ b/README.md @@ -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. \ No newline at end of file diff --git a/snippets/halo-quick-view.liquid b/snippets/halo-quick-view.liquid new file mode 100644 index 0000000..cbb9828 --- /dev/null +++ b/snippets/halo-quick-view.liquid @@ -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 +-%} + + +{%- if variantCount > 0 and product.has_only_default_variant != true -%} + +{%- endif -%} + +
+
+
+
+
+ {%- if show_quick_view_badge -%} + {% render 'product-badge', + product: product, + class: 'productView-badge', + badge_detail: true, + serial: 1 + %} + {%- endif -%} +
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'image' -%} +
+
+
+ + {% if settings.enable_lazyload %}{% endif %} +
+
+
+ {%- when 'external_video' -%} +
+
+ {%- if media.host == 'youtube' -%} +
+ {{ media.alt | escape }} +
+
+ {%- else -%} +
+ {{ media.alt | escape }} +
+
{{ media | external_video_tag }}
+ {%- endif -%} +
+
+ {%- when 'video' -%} +
+
+
+ {{ media.alt | escape }} +
+
{{ media | video_tag: controls: true, image_size: 'master' }}
+
+
+ {%- when 'model' -%} +
+
+ {{ media | model_viewer_tag: image_size: '500x', + reveal: 'interaction', + toggleable: true, + data-model-id: media.id, + auto-rotate: true, + id: 'paused-change-demo' + }} +
+
+ {%- else -%} +
+
+ {{ media | media_tag }} +
+
+ {%- endcase -%} + {%- endfor -%} +
+
+
+
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'image' -%} +
+ {{ media.alt | escape }} +
+ {%- when 'external_video' -%} +
+
+ {{ media.alt | escape }} +
+
{% render 'icon-video' %}
+
+ {%- when 'video' -%} +
+
' | first }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}"/>
+
{% render 'icon-video' %}
+
+ {%- when 'model' -%} +
+
' | first }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}"/>
+
{%- render 'icon-3d-model' -%}
+
+ {%- else -%} +
+
{{ media | media_tag }}
+
+ {%- endcase -%} + {%- endfor -%} +
+
+
+
+
+
+

{{ product.title | escape }}

+ {%- if show_quick_view_review or show_quick_view_sold_in -%} +
+ {%- if show_quick_view_review -%} +
+ {%- endif -%} + {%- if show_quick_view_sold_in -%} + + {%- endif -%} +
+ {%- 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 -%} +
{{ desc | truncatewords: word_number_short_desc }}
+ {%- endif -%} + {%- endif -%} + {%- if show_quick_view_vendor or show_quick_view_availability or show_quick_view_sku or show_quick_view_product_type -%} +
+ {%- if show_quick_view_sku -%} + + {%- endif -%} + {%- if show_quick_view_vendor -%} +
+ {{ 'products.product.text.vendor' | t }} + {{ product.vendor | link_to_vendor }} +
+ {%- endif -%} + {%- if show_quick_view_availability -%} +
+ {{ 'products.product.text.availability' | t }} + + {%- 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 -%} + +
+ {%- endif -%} + {%- if show_quick_view_product_type -%} +
+ {{ 'products.product.text.type' | t }} + {{ product.type | escape }} +
+ {%- endif -%} +
+ {%- endif -%} +
+ {%- render 'price', + product: product, + use_variant: true, + price_class: 'price--medium' + -%} +
+ {%- if show_countdown -%} + {%- if countdown_type == 'all_product' -%} +
+ {{ settings.countdown_text }} + 151D + 8H + 23M + 0S +
+ {%- 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 -%} +
+ {{ settings.countdown_text }} + 151D + 8H + 23M + 0S +
+ {%- endif -%} + {%- else -%} + {%- if product.metafields.c_f.countdown -%} + {% assign countdown_type = product.metafields.c_f.countdown %} +
+ {{ settings.countdown_text }} + 151D + 8H + 23M + 0S +
+ {%- endif -%} + {%- endif -%} + {%- endif -%} +
+ {%- 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' -%} + + {{ form | payment_terms }} + {%- endform -%} +
+ {%- if variantCount > 0 and product.has_only_default_variant != true -%} + {%- if quick_view_picker_type == 'button' -%} + {%- assign product_swatch_option = settings.swatch | downcase -%} + + {%- 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 + -%} +
+ + {{ option.name | append: ':' }} + + {{ option.selected_value }} + + + {%- 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 + -%} + + {%- 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 + -%} + + {%- else -%} + + {%- endif -%} + {%- endunless -%} + {%- endfor -%} +
+ {%- endfor -%} + + + {%- else -%} + + {%- for option in product.options_with_values -%} +
+ +
+ +
+
+ {%- endfor -%} + + + {%- endif -%} + {%- if show_hot_stock -%} +
+ {%- 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 -%} +
+ {%- endif -%} + {%- endif -%} +
+ + {%- if show_quick_view_qty -%} +
+ + +
+ + + +
+ +
+ {%- endif -%} + {%- if show_subtotal -%} +
+ {{ 'sections.cart.subtotal' | t | append: ': ' }} + {{ subtotal }} +
+ {%- 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 + -%} + +
+ {%- if show_size_chart and has_size_chart -%} +
+ + {% render 'icon-size-chart-2' %} + {{ 'size_chart.general.text' | t }} + +
+ {%- endif -%} + {%- if show_compare_color and isColor -%} +
+ +
+ {%- endif -%} + {%- if settings.show_ask_an_expert -%} +
+ + {%- if settings.ask_an_expert_icon != blank -%} + {{ settings.ask_an_expert_icon }} + {%- endif -%} + {{ 'ask_an_expert.general.text' | t}} + +
+ {%- endif -%} +
+ + {%- 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 -%} +
+ {% render 'product-customization', + product: product, + customization_option_hidden: customization_option_hidden, + customization_option_1: customization_option_1, + customization_option_2: customization_option_2 + %} +
+ {%- endif -%} + {%- endif -%} + +
+ {%- if show_quick_view_qty -%} + + {%- endif -%} +
+
+ +
+ {%- 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 + -%} + + + {%- else -%} + + {%- endif -%} + {%- else -%} + + {%- endif -%} +
+
+ {%- if settings.show_wishlist -%} +
+ {% render 'icon-heart' %} +
+ {%- endif -%} + {%- if show_quick_view_share -%} + {% render 'halo-share', product: product, share_layout: '2' %} + {%- endif -%} +
+ {%- if show_dynamic_checkout -%} +
+ {%- if settings.show_global_checkbox -%} +
+ {%- if settings.show_global_checkbox -%} +
+ + + {%- if settings.global_checkbox_link_text != blank -%} + {{ settings.global_checkbox_link_text | escape }} + {%- endif -%} +
+ {%- endif -%} +
+ {%- endif -%} +
+
{{ form | payment_button }}
+
+
+ {%- endif -%} +
+ {%- endform -%} + {%- if settings.show_notify_form -%} +
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 + %} +
+ {%- endif -%} + {%- if show_quick_view_customer_viewing or show_quick_view_trust_image -%} +
+ {%- if show_quick_view_customer_viewing -%} +
+
+ {% render 'icon-eyes-2' %} + {{ 'customer_viewing.general.text' | t: number : '10' }} +
+
+ {%- endif -%} + {%- if show_quick_view_trust_image -%} +
+
+ {%- render 'halo-trust-image', + type: 'product' + -%} +
+
+ {%- endif -%} +
+ {%- endif -%} +
+
+
+
+
+{%- 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 -%} \ No newline at end of file diff --git a/snippets/price.liquid b/snippets/price.liquid new file mode 100644 index 0000000..d804048 --- /dev/null +++ b/snippets/price.liquid @@ -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 +-%} + +
+
+ {%- 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 -%} +
+ {%- comment -%} +
+ +
+ {%- endcomment -%} +
{{ money_price }}
+
+
+ {%- comment -%} +
+ +
+ {%- endcomment -%} +
{% if settings.currency_format_enable %}{{ compare_at_price | money_with_currency }}{% else %}{{ compare_at_price | money }}{% endif %}
+ {%- comment -%} +
+ +
+ {%- endcomment -%} +
{{ money_price }}
+ {%- 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 -%} +
{{'products.product.price.saved_price_html' | t: price: saved_price }}
+ {%- endif -%} + {%- if hasCountdown == true or hasCountdown == 'true' -%} +
+ {%- 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 + -%}-{{ compare | append: '%'}}
+ {%- endif -%} +
+ + +
{{- product.selected_or_first_available_variant.unit_price | money -}}{%- 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 }}
+ +
+
\ No newline at end of file diff --git a/snippets/product-page-full-width-2.liquid b/snippets/product-page-full-width-2.liquid new file mode 100644 index 0000000..857669e --- /dev/null +++ b/snippets/product-page-full-width-2.liquid @@ -0,0 +1,1299 @@ +{%- liquid + assign container = section.settings.container + assign padding_full_width = section.settings.padding_full_width + assign show_sticky_info = section.settings.show_sticky_info + assign mg_top_desktop = section.settings.mg_top_desktop + assign mg_top_tablet = section.settings.mg_top_tablet + assign mg_top_mobile = section.settings.mg_top_mobile + assign mg_bottom_desktop = section.settings.mg_bottom_desktop + assign mg_bottom_tablet = section.settings.mg_bottom_tablet + assign mg_bottom_mobile = section.settings.mg_bottom_mobile + assign main_image_position = section.settings.main_image_position + assign main_image_show_custom_cursor = section.settings.main_image_show_custom_cursor + assign count_color = section.settings.count_color + assign icon_color = section.settings.icon_color + assign thumnail_layout = section.settings.thumnail_layout + assign main_image_arrows_desktop = section.settings.main_image_arrows_desktop + assign main_image_arrows_mobile = section.settings.main_image_arrows_mobile + assign main_image_counter_mobile = section.settings.main_image_counter_mobile + assign main_image_enable_parallax_mb = section.settings.main_image_enable_parallax_mb + assign main_image_show_zoom_icon_mb = section.settings.main_image_show_zoom_icon_mb + assign main_image_layout = section.settings.main_image_layout + assign show_thumbnail_mobile = section.settings.show_thumbnail_mobile + assign max_thumbnail_to_show = section.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 = section.settings.product_image_ratio + assign portrait_aspect_ratio = section.settings.portrait_aspect_ratio | append: '%' + assign zoomed_image = section.settings.zoomed_image + assign media_fit = section.settings.media_fit + assign product_image_popup = section.settings.product_image_popup + assign video_layout = section.settings.video_layout + assign show_badge = section.settings.show_badge + assign show_hot_stock = settings.show_hot_stock + if show_hot_stock + assign productMaxStock = settings.hot_stock_limit | plus: 0 + endif + assign show_qty = section.settings.show_qty + assign show_subtotal = section.settings.show_subtotal + assign subtotal_style = section.settings.subtotal_style + assign show_subtotal_text = false + assign subtotal = 0 + if show_subtotal + assign show_subtotal_text = 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_sticky_add_to_cart = section.settings.show_sticky_add_to_cart + assign sticky_atc_layout = section.settings.sticky_atc_layout + assign show_sticky_vendor = section.settings.show_sticky_vendor + assign show_tab = section.settings.show_tab + if show_tab + assign tab_layout = section.settings.tab_layout + assign tab_layout_mobile = section.settings.tab_layout_mobile + assign icon_style_layout = section.settings.icon_style_layout + assign title_font_size = section.settings.title_font_size + assign title_font_size_mb = section.settings.title_font_size_mb + assign font_weight_title = section.settings.font_weight_title + assign title_text_transform = section.settings.title_text_transform + assign title_padding_top_bottom = section.settings.title_padding_top_bottom + if section.blocks.size > 0 + assign show_tab = true + else + assign show_tab = false + endif + endif + assign first_3d_model = product.media | where: "media_type", "model" | first + assign has_product_combo = false + + assign has_sidebar = false + assign show_sidebar = section.settings.show_sidebar + assign sidebar_type = 'vertical' + assign sidebar_position = section.settings.sidebar_position + assign show_sidebar_collapse = section.settings.show_sidebar_collapse + assign sidebar_collapse_default = section.settings.sidebar_collapse_default + if show_sidebar + if sidebar_type == 'vertical' + if section.blocks.size > 0 + assign has_sidebar = true + endif + endif + endif + if has_sidebar + assign sidebar_heading_font = section.settings.sidebar_heading_font + assign sidebar_heading_font_size = section.settings.sidebar_heading_font_size + assign sidebar_heading_font_weight = section.settings.sidebar_heading_font_weight + assign sidebar_heading_text_transform = section.settings.sidebar_heading_text_transform + assign enable_sticky = section.settings.enable_sticky + assign sidebar_layout = section.settings.sidebar_layout + endif + assign has_breadcrumb = false + for block in section.blocks + case block.type + when 'breadcrumb' + assign breadcrumb_layout = block.settings.breadcrumb_layout + assign breadcrumb_alignment = block.settings.breadcrumb_alignment + assign breadcrumb_mg_top_desktop = block.settings.breadcrumb_mg_top_desktop + assign breadcrumb_mg_top_mobile = block.settings.breadcrumb_mg_top_mobile + assign breadcrumb_mg_bottom_desktop = block.settings.breadcrumb_mg_bottom_desktop + assign breadcrumb_mg_bottom_mobile = block.settings.breadcrumb_mg_bottom_mobile + assign breadcrumb_bg = block.settings.breadcrumb_bg + assign breadcrumb_gradient = block.settings.breadcrumb_gradient + assign breadcrumb_bg_mb = block.settings.breadcrumb_bg_mb + assign breadcrumb_gradient_mb = block.settings.breadcrumb_gradient_mb + + if breadcrumb_layout == 'full' + assign check_breadcrumb_full = true + else + assign check_breadcrumb_full = false + endif + assign has_breadcrumb = true + when 'title' + assign check_block_title = true + + when 'quantity_selector' + assign check_block_qty = true + assign qty_style = block.settings.qty_style + assign qty_layout = block.settings.qty_layout + + when 'perks' + assign has_perks = true + assign show_compare_color = block.settings.show_compare_color + if show_compare_color + assign show_compare_color_drop_drap = block.settings.show_compare_color_drop_drap + assign product_swatch_option = settings.swatch | downcase + assign compare_layout = block.settings.compare_layout + 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 + assign show_size_chart = block.settings.show_size_chart + if show_size_chart + assign has_size_chart = false + assign size_chart_type = block.settings.size_chart_type + if size_chart_type == 'product_type' or size_chart_type == 'product_vendor' + assign size_chart_image_type = block.settings.size_chart_image_type + elsif size_chart_type == 'custom_image' + assign size_chart_image = block.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 + when 'buy_buttons' + assign check_block_buttons = true + when 'share' + assign show_share = block.settings.show_share + assign share_layout = block.settings.share_layout + when 'variant_picker' + assign picker_type = block.settings.picker_type + when 'grouped_product' + assign product_combo = product.metafields.c_f.product_combo + assign combo_discount_rate = product.metafields.c_f.combo_discount_rate | plus: 0 | divided_by: 100.00 + + if product_combo + assign has_product_combo = true + else + assign has_product_combo = false + endif + when 'complementary_products' + assign complementary_product_title = block.settings.complementary_product_title + assign complementary_product_arrows = block.settings.complementary_product_arrows + assign complementary_product_dots = block.settings.complementary_product_dots + assign complementary_product_layout = block.settings.complementary_product_layout + if complementary_product_layout == "1" + assign complementary_product_limit_1 = block.settings.complementary_product_limit_1 + endif + if complementary_product_layout == "2" + assign complementary_product_limit_2 = block.settings.complementary_product_limit_2 + assign complementary_product_object = block.settings.complementary_product_object + endif + endcase + endfor + + if show_qty + if check_block_qty + if check_block_buttons + if qty_layout == '1' + assign check_show_qty = 'show_qty_1' + elsif qty_layout == '2' + assign check_show_qty = 'show_qty_2' + endif + else + assign check_show_qty = 'show_qty_1' + endif + else + assign check_show_qty = 'show_qty_0' + endif + else + assign check_show_qty = 'show_qty_0' + endif + + if show_share + if check_block_title and check_block_buttons + assign check_show_share = share_layout + elsif check_block_title and check_block_buttons != true + if share_layout == '2' + assign check_show_share = '1' + else + assign check_show_share = share_layout + endif + elsif check_block_title != true and check_block_buttons + if share_layout == '3' + assign check_show_share = '1' + else + assign check_show_share = share_layout + endif + endif + 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 +-%} + +{%- if first_3d_model -%} + + + + +{%- endif -%} + + + +{%- if product_image_popup == 'fancybox' -%} + + +{%- endif -%} +
+ {% if has_breadcrumb %} + {%- liquid + if breadcrumb_gradient != 'rgba(0,0,0,0)' or breadcrumb_bg != 'rgba(0,0,0,0)' or breadcrumb_gradient_mb != 'rgba(0,0,0,0)' or breadcrumb_bg_mb != 'rgba(0,0,0,0)' + assign breadcrumb_has_bg = true + else + assign breadcrumb_has_bg = false + endif + -%} +
+ {% if breadcrumb_has_bg %} +
+ {% endif %} +
+ {% render 'breadcrumb', + alignment: breadcrumb_alignment + %} +
+ {% if breadcrumb_has_bg %} +
+ {% endif %} +
+ {% endif %} +
+
+ {%- if has_sidebar -%} + {{ 'component-main-sidebar.css' | asset_url | stylesheet_tag }} +
+
+ + {% render 'icon-sidebar' %} + +
+
+
+ + + {% render 'icon-close' %} + +
+ + {{ 'sections.sidebar.title' | t }} + +
+
+ {% render 'sidebar', + results: collection, + section: section, + sidebar_type: sidebar_type, + show_collapse: show_sidebar_collapse, + sidebar_collapse: sidebar_collapse_default + %} +
+
+ {%- endif -%} + {%- if has_sidebar -%} +
+ {%- endif -%} +
+
+ {%- if main_image_show_custom_cursor -%} +
+
+
+ +
+
+ {%- if product.media.size -%} +
1{{ product.media.size }}
+ {%- endif -%} +
+ {%- endif -%} +
+
+ {%- if show_badge -%} + {% render 'product-badge', + product: product, + class: 'productView-badge', + badge_detail: true, + serial: 1 + %} + {%- endif -%} +
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'image' -%} +
+
+
+ 3 %}data-{% endif %}srcset="{{ media.preview_image | img_url: 'master' }}" + {% unless settings.enable_lazyload and forloop.index > 3 %}src="{{ media | img_url: 'master' }}"{% endunless %} + alt="{{ media.preview_image.alt | escape }}" + sizes="auto" + loading="lazy" + data-sizes="auto" + data-main-image + data-index="{{ forloop.index }}" + data-cursor-image + {% if settings.enable_lazyload and forloop.index > 3 %}class="lazyload"{% endif %} + /> + {%- if settings.enable_lazyload and forloop.index > 3 -%}{%- endif -%} +
+
+
+ {%- when 'external_video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ {%- if media.host == 'youtube' -%} +
+ {{ media.alt | escape }} +
+
+
+
+ {%- else -%} +
+ {{ media.alt | escape }} +
+
+ {{ media | external_video_tag }} +
+ {%- endif -%} +
+
+ {%- endif -%} + {%- when 'video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+
+ {{ media.alt | escape }} +
+
+ {{ media | video_tag: controls: true, image_size: 'master' }} +
+
+
+ {%- endif -%} + {%- when 'model' -%} +
+ + + + + +
+ {%- else -%} +
+
+ {{ media | media_tag }} +
+
+ {%- endcase -%} + {%- endfor -%} +
+ {%- if video_layout == 'popup' -%} +
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'external_video' -%} + {%- if media.host == 'youtube' -%} + + {% render 'icon-video' %} + + {%- else -%} + + {% render 'icon-video' %} + + {%- endif -%} + {%- when 'video' -%} + ' | first | strip_html | remove: '">'}}" data-width="1200" data-height="675"> + {% render 'icon-video' %} + + {%- endcase -%} + {%- endfor -%} +
+ {%- endif -%} + {%- if main_image_show_zoom_icon_mb -%} +
+ {% render 'icon-zoom-1' %} +
+ {%- endif -%} + {%- if show_compare_color and isColor and compare_layout == '2' -%} +
+ +
+ {%- endif -%} +
+ {%- if thumnail_layout != '4' -%} +
+
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'image' -%} +
+ + {{ media.alt | escape }} + +
+ {%- when 'external_video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ {{ media.alt | escape }} +
+
+ {% render 'icon-video' %} +
+
+ {%- endif -%} + {%- when 'video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ ' | first }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}" loading="lazy" /> +
+
+ {% render 'icon-video' %} +
+
+ {%- endif -%} + {%- when 'model' -%} +
+
+ ' | first }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}" loading="lazy" /> +
+
+ {% render 'icon-3d-model' %} +
+
+ {%- else -%} +
+
+ {{ media | media_tag }} +
+
+ {%- endcase -%} + {%- endfor -%} +
+
+ {%- endif -%} +
+
+
+
+ {%- for block in section.blocks -%} + {%- liquid + assign spacing_top = block.settings.spacing_top + assign spacing_bottom = block.settings.spacing_bottom + -%} + {%- case block.type -%} + {%- when 'breadcrumb' -%} + {%- if breadcrumb_layout == 'content' -%} +
+ {% render 'breadcrumb', + alignment: breadcrumb_alignment + %} +
+ {%- endif -%} + {%- when 'vendor' -%} +
+ {% render 'product-vendor', + block: block, + product: product, + fontsize_text: fontsize_text, + color_title: color_title, + text_transform: text_transform + %} +
+ {%- when 'title' -%} + + {%- when 'meta' -%} + {%- liquid + assign show_review = block.settings.show_review + assign show_sold_in = block.settings.show_sold_in + assign sold_in_number = block.settings.sold_in_number + assign sold_in_hours = block.settings.sold_in_hours + assign color_text_sold_in = block.settings.color_text_sold_in + -%} + {%- if show_review or show_sold_in -%} +
+
+ {%- if show_review -%} + {% render 'product-rating', + product: product + %} + {%- endif -%} + {%- if show_sold_in -%} + {% render 'product-sold-in-last', + sold_in_number: sold_in_number, + sold_in_hours: sold_in_hours + %} + {%- endif -%} +
+
+ {%- endif -%} + {%- when 'short_description' -%} +
+ {% render 'product-short-description', + block: block, + product: product, + fontsize_text: fontsize_text, + color_text: color_text + %} +
+ {%- when 'variant_description' -%} +
+ {% render 'product-variant-description', + block: block, + product: product, + current_variant: current_variant + %} +
+ {%- when 'info' -%} + {%- liquid + assign show_vendor = block.settings.show_vendor + assign show_availability = block.settings.show_availability + assign show_sku = block.settings.show_sku + assign show_product_type = block.settings.show_product_type + assign stock_level_display = block.settings.stock_level_display + assign enable_border_top = block.settings.enable_border_top + assign enable_border_bottom = block.settings.enable_border_bottom + assign color_border = block.settings.color_border + -%} + {%- if show_vendor or show_availability or show_sku or show_product_type -%} +
+ {% render 'product-info', + product: product, + show_vendor: show_vendor, + show_availability: show_availability, + show_sku: show_sku, + current_variant: current_variant, + show_product_type: show_product_type, + stock_level_display: stock_level_display, + enable_border_top: enable_border_top, + enable_border_bottom: enable_border_bottom, + color_border: color_border + %} +
+ {%- endif -%} + {%- when 'price' -%} + {% assign fontsize_text = block.settings.fontsize_text %} +
+ {% if has_product_combo %} +
+ {%- if combo_discount_rate > 0 -%} + + {{ cart.total_price | money }} + + + {%- assign compensation = 1 | minus: combo_discount_rate -%} + {{ cart.total_price | times: compensation | money }} + + {%- endif -%} + +
+ {% else %} +
+ {%- render 'price', + product: product, + use_variant: true, + price_class: 'price--medium' + -%} +
+ {% endif %} +
+ {%- when 'countdown' -%} + {%- liquid + 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 + -%} + {%- if show_countdown -%} +
+ {% render 'product-countdown', + product: product, + countdown_type: countdown_type, + countdown_style: countdown_style, + countdown_time: countdown_time, + countdown_collection: countdown_collection + %} +
+ {%- endif -%} + {%- when 'variant_picker' -%} + {% unless has_product_combo %} +
+ {% render 'product-variant', + block: block, + product: product, + variantCount: variantCount, + current_variant: current_variant, + picker_type: picker_type + %} +
+ {% endunless %} + {%- when 'customization_property' -%} + {% if has_customization_option == true %} +
+ {% render 'product-customization', + block: block, + product: product, + customization_option_1: customization_option_1, + customization_option_2: customization_option_2, + customization_option_hidden: customization_option_hidden + %} +
+ {% endif %} + {%- when 'hot_stock' -%} + {% unless has_product_combo %} + {% render 'product-hot-stock', + block: block, + product: product, + variantCount: variantCount, + show_hot_stock: show_hot_stock, + productMaxStock: productMaxStock, + current_variant: current_variant + %} + {% endunless %} + {%- when 'perks' -%} + {% unless has_product_combo %} +
+ {% render 'product-perks', + product: product, + show_size_chart: show_size_chart, + has_size_chart: has_size_chart, + show_compare_color: show_compare_color, + isColor: isColor, + compare_layout: compare_layout + %} +
+ {% endunless %} + {%- when 'quantity_selector' -%} + {% unless has_product_combo %} + {%- if check_show_qty == 'show_qty_1' -%} +
+
+ {% render 'product-quantity', + current_variant: current_variant, + qty_style: qty_style, + check_hidden: false, + quantity_stt: 2 + %} +
+ {%- if show_subtotal and subtotal_style == '1' -%} +
+ {{ 'sections.cart.subtotal' | t | append: ': ' }} + {{ subtotal }} +
+ {%- endif -%} +
+ {%- endif -%} + {% endunless %} + {%- when 'buy_buttons' -%} + {% unless has_product_combo %} +
+ {% render 'product-button', + block: block, + product: product, + current_variant: current_variant, + check_show_share: check_show_share, + share_layout: check_show_share, + section: section, + check_show_qty: check_show_qty, + qty_style: qty_style, + show_subtotal_text: show_subtotal_text, + subtotal: subtotal, + subtotal_style: subtotal_style + %} +
+ {% endunless %} + {%- when 'customer_viewing' -%} +
+ {% render 'product-customer-viewing', + block: block + %} +
+ {%- when 'pickup_availability' -%} +
+ {%- liquid + assign show_pickup_availability = block.settings.show_pickup_availability + -%} + {%- if show_pickup_availability -%} + {% render 'product-pickup-availability', + product: product, + current_variant: current_variant + %} + {%- endif -%} +
+ {%- when 'share' -%} + {%- if check_show_share == '1' -%} +
+ {% render 'halo-share', + product: product, + share_layout: check_show_share + %} +
+ {%- endif -%} + {%- when 'trust_image' -%} + {%- liquid + assign show_trust_image = block.settings.show_trust_image + -%} + {%- if show_trust_image -%} +
+
+ {%- render 'halo-trust-image', + type: 'product' + -%} +
+
+ {%- endif -%} + {%- when 'product_text' -%} + {%- liquid + assign content_spacing = block.settings.content_spacing + assign custom_block_align = block.settings.custom_block_align + assign background_color_block = block.settings.background_color_block + assign background_gradient_color_block = block.settings.background_gradient_color_block + -%} +
+
+ {% render 'product-text', block: block %} +
+
+ {%- when 'custom_information' -%} +
+ {% render 'product-custom-information', + block: block + %} +
+ {%- when 'grouped_product' -%} + {%- if has_product_combo -%} +
+ {% render 'grouped-product', + block: block, + show_share: show_share + check_show_share: check_show_share, + share_layout: check_show_share, + picker_type: picker_type, + show_size_chart: show_size_chart, + has_size_chart: has_size_chart, + show_compare_color: show_compare_color, + isColor: isColor, + compare_layout: compare_layout, + has_perks: has_perks, + product_combo: product_combo + %} +
+ {%- endif -%} + {%- when 'custom_liquid' -%} + {{ block.settings.custom_liquid }} + {%- when 'complementary_products' -%} +
+ + {%- if recommendations.performed and recommendations.products_count > 0 -%} + {%- if complementary_product_title -%} +
+
{{ complementary_product_title | escape }}
+
+ {%- endif -%} +
+
+ {%- if complementary_product_layout == "1" -%} + {%- for product in recommendations.products limit: limit -%} +
+ {% render 'product-grid-layout', + product_card_product: product, + media_size: image_ratio, + portrait_aspect_ratio: portrait_aspect_ratio, + serial: forloop.index, + sectionId: section.id, + show_list: true, + loading: true + %} +
+ {%- endfor -%} + {%- endif -%} + + {%- if complementary_product_layout == "2" -%} + {%- for product in recommendations.products limit: limit offset: continue -%} +
+ {% render 'product-card-custom', + product_card_product: product + %} +
+ {%- endfor -%} + {%- endif -%} +
+
+ {%- endif-%} + + +
+ {%- when '@app' -%} + {% render block %} + {%- endcase -%} + {%- endfor -%} + {%- if show_tab -%} + {%- if tab_layout == 'vertical' or tab_layout == 'vertical_sidebar' or tab_layout == 'popup' -%} + {% render 'halo-product-tab', + product: product, + section: section, + tab_layout: tab_layout, + tab_layout_mobile: tab_layout_mobile, + icon_style_layout: icon_style_layout + %} + {%- endif -%} + {%- endif -%} +
+
+
+ {%- if has_sidebar -%} +
+ {% endif %} + {%- unless has_product_combo -%} + {%- if show_sticky_add_to_cart -%} + {{ 'component-sticky-add-to-cart.css' | asset_url | stylesheet_tag }} + {% render 'halo-sticky-add-to-cart', + product: product, + current_variant: current_variant, + variantCount: variantCount, + show_vendor: show_sticky_vendor, + sticky_atc_layout: sticky_atc_layout, + container: container, + show_qty: show_qty, + qty_style: qty_style, + subtotal: subtotal + %} + {% comment %} {% render 'halo-sticky-add-to-cart-mobile', + product: product, + current_variant: current_variant, + variantCount: variantCount, + show_vendor: show_sticky_vendor, + sticky_atc_layout: sticky_atc_layout, + container: container, + show_qty: show_qty, + qty_style: qty_style, + subtotal: subtotal + %} {% endcomment %} + {%- endif -%} + {%- endunless -%} +
+
+ {% unless has_product_combo %} + {% render 'product-bundle' %} + {% endunless %} +
+
+ {%- if show_tab and tab_layout == 'horizontal' -%} + {% render 'halo-product-tab', + product: product, + section: section, + tab_layout: tab_layout, + tab_layout_mobile: tab_layout_mobile, + icon_style_layout: icon_style_layout + %} + {%- endif -%} +
+
+
+ +{%- 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 -%} + + +{%- if show_sticky_add_to_cart -%} + +{%- endif -%} +{%- if first_3d_model -%} + + + +{%- endif -%} +{%- if main_image_show_custom_cursor -%} + +{%- endif -%} +{%- if product_image_popup == 'fancybox' -%} + +{%- endif -%} +{%- if zoomed_image and main_image_show_custom_cursor != true -%} + +{%- endif -%} +{% render 'schema', product: product %} \ No newline at end of file diff --git a/snippets/product-page-full-width.liquid b/snippets/product-page-full-width.liquid new file mode 100644 index 0000000..08465c5 --- /dev/null +++ b/snippets/product-page-full-width.liquid @@ -0,0 +1,1337 @@ +{%- liquid + assign container = section.settings.container + assign padding_full_width = section.settings.padding_full_width + assign show_sticky_info = section.settings.show_sticky_info + assign mg_top_desktop = section.settings.mg_top_desktop + assign mg_top_tablet = section.settings.mg_top_tablet + assign mg_top_mobile = section.settings.mg_top_mobile + assign mg_bottom_desktop = section.settings.mg_bottom_desktop + assign mg_bottom_tablet = section.settings.mg_bottom_tablet + assign mg_bottom_mobile = section.settings.mg_bottom_mobile + assign main_image_position = section.settings.main_image_position + assign main_image_show_custom_cursor = section.settings.main_image_show_custom_cursor + assign count_color = section.settings.count_color + assign icon_color = section.settings.icon_color + assign thumnail_layout = section.settings.thumnail_layout + assign main_image_arrows_desktop = section.settings.main_image_arrows_desktop + assign main_image_arrows_mobile = section.settings.main_image_arrows_mobile + assign main_image_counter_mobile = section.settings.main_image_counter_mobile + assign main_image_enable_parallax_mb = section.settings.main_image_enable_parallax_mb + assign main_image_show_zoom_icon_mb = section.settings.main_image_show_zoom_icon_mb + assign main_image_layout = section.settings.main_image_layout + assign show_thumbnail_mobile = section.settings.show_thumbnail_mobile + assign max_thumbnail_to_show = section.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 = section.settings.product_image_ratio + assign portrait_aspect_ratio = section.settings.portrait_aspect_ratio | append: '%' + assign zoomed_image = section.settings.zoomed_image + assign media_fit = section.settings.media_fit + assign product_image_popup = section.settings.product_image_popup + assign video_layout = section.settings.video_layout + assign show_badge = section.settings.show_badge + assign show_hot_stock = settings.show_hot_stock + if show_hot_stock + assign productMaxStock = settings.hot_stock_limit | plus: 0 + endif + assign show_qty = section.settings.show_qty + assign show_subtotal = section.settings.show_subtotal + assign subtotal_style = section.settings.subtotal_style + assign show_subtotal_text = false + assign subtotal = 0 + if show_subtotal + assign show_subtotal_text = 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_sticky_add_to_cart = section.settings.show_sticky_add_to_cart + assign sticky_atc_layout = section.settings.sticky_atc_layout + assign show_sticky_vendor = section.settings.show_sticky_vendor + assign show_tab = section.settings.show_tab + if show_tab + assign tab_layout = section.settings.tab_layout + assign tab_layout_mobile = section.settings.tab_layout_mobile + assign icon_style_layout = section.settings.icon_style_layout + assign title_font_size = section.settings.title_font_size + assign title_font_size_mb = section.settings.title_font_size_mb + assign font_weight_title = section.settings.font_weight_title + assign title_text_transform = section.settings.title_text_transform + assign title_padding_top_bottom = section.settings.title_padding_top_bottom + if section.blocks.size > 0 + assign show_tab = true + else + assign show_tab = false + endif + endif + assign first_3d_model = product.media | where: "media_type", "model" | first + assign has_product_combo = false + + assign has_sidebar = false + assign show_sidebar = section.settings.show_sidebar + assign sidebar_type = 'vertical' + assign sidebar_position = section.settings.sidebar_position + assign show_sidebar_collapse = section.settings.show_sidebar_collapse + assign sidebar_collapse_default = section.settings.sidebar_collapse_default + if show_sidebar + if sidebar_type == 'vertical' + if section.blocks.size > 0 + assign has_sidebar = true + endif + endif + endif + if has_sidebar + assign sidebar_heading_font = section.settings.sidebar_heading_font + assign sidebar_heading_font_size = section.settings.sidebar_heading_font_size + assign sidebar_heading_font_weight = section.settings.sidebar_heading_font_weight + assign sidebar_heading_text_transform = section.settings.sidebar_heading_text_transform + assign enable_sticky = section.settings.enable_sticky + assign sidebar_layout = section.settings.sidebar_layout + endif + assign has_breadcrumb = false + for block in section.blocks + case block.type + when 'breadcrumb' + assign breadcrumb_layout = block.settings.breadcrumb_layout + assign breadcrumb_alignment = block.settings.breadcrumb_alignment + assign breadcrumb_mg_top_desktop = block.settings.breadcrumb_mg_top_desktop + assign breadcrumb_mg_top_mobile = block.settings.breadcrumb_mg_top_mobile + assign breadcrumb_mg_bottom_desktop = block.settings.breadcrumb_mg_bottom_desktop + assign breadcrumb_mg_bottom_mobile = block.settings.breadcrumb_mg_bottom_mobile + assign breadcrumb_bg = block.settings.breadcrumb_bg + assign breadcrumb_gradient = block.settings.breadcrumb_gradient + assign breadcrumb_bg_mb = block.settings.breadcrumb_bg_mb + assign breadcrumb_gradient_mb = block.settings.breadcrumb_gradient_mb + + if breadcrumb_layout == 'full' + assign check_breadcrumb_full = true + else + assign check_breadcrumb_full = false + endif + + assign has_breadcrumb = true + when 'title' + assign check_block_title = true + + when 'quantity_selector' + assign check_block_qty = true + assign qty_style = block.settings.qty_style + assign qty_layout = block.settings.qty_layout + + when 'perks' + assign has_perks = true + assign show_compare_color = block.settings.show_compare_color + if show_compare_color + assign show_compare_color_drop_drap = block.settings.show_compare_color_drop_drap + assign product_swatch_option = settings.swatch | downcase + assign compare_layout = block.settings.compare_layout + 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 + assign show_size_chart = block.settings.show_size_chart + if show_size_chart + assign has_size_chart = false + assign size_chart_type = block.settings.size_chart_type + if size_chart_type == 'product_type' or size_chart_type == 'product_vendor' + assign size_chart_image_type = block.settings.size_chart_image_type + elsif size_chart_type == 'custom_image' + assign size_chart_image = block.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 + when 'buy_buttons' + assign check_block_buttons = true + when 'share' + assign show_share = block.settings.show_share + assign share_layout = block.settings.share_layout + when 'variant_picker' + assign picker_type = block.settings.picker_type + when 'grouped_product' + assign product_combo = product.metafields.c_f.product_combo + assign combo_discount_rate = product.metafields.c_f.combo_discount_rate | plus: 0 | divided_by: 100.00 + + if product_combo + assign has_product_combo = true + else + assign has_product_combo = false + endif + when 'complementary_products' + assign complementary_product_title = block.settings.complementary_product_title + assign complementary_product_arrows = block.settings.complementary_product_arrows + assign complementary_product_dots = block.settings.complementary_product_dots + assign complementary_product_layout = block.settings.complementary_product_layout + if complementary_product_layout == "1" + assign complementary_product_limit_1 = block.settings.complementary_product_limit_1 + endif + if complementary_product_layout == "2" + assign complementary_product_limit_2 = block.settings.complementary_product_limit_2 + assign complementary_product_object = block.settings.complementary_product_object + endif + endcase + endfor + + if show_qty + if check_block_qty + if check_block_buttons + if qty_layout == '1' + assign check_show_qty = 'show_qty_1' + elsif qty_layout == '2' + assign check_show_qty = 'show_qty_2' + endif + else + assign check_show_qty = 'show_qty_1' + endif + else + assign check_show_qty = 'show_qty_0' + endif + else + assign check_show_qty = 'show_qty_0' + endif + + if show_share + if check_block_title and check_block_buttons + assign check_show_share = share_layout + elsif check_block_title and check_block_buttons != true + if share_layout == '2' + assign check_show_share = '1' + else + assign check_show_share = share_layout + endif + elsif check_block_title != true and check_block_buttons + if share_layout == '3' + assign check_show_share = '1' + else + assign check_show_share = share_layout + endif + endif + 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 +-%} + +{%- if first_3d_model -%} + + + + +{%- endif -%} + + + +{%- if product_image_popup == 'fancybox' -%} + + +{%- endif -%} +
+ {% if has_breadcrumb %} + {%- liquid + if breadcrumb_gradient != 'rgba(0,0,0,0)' or breadcrumb_bg != 'rgba(0,0,0,0)' or breadcrumb_gradient_mb != 'rgba(0,0,0,0)' or breadcrumb_bg_mb != 'rgba(0,0,0,0)' + assign breadcrumb_has_bg = true + else + assign breadcrumb_has_bg = false + endif + -%} +
+ {% if breadcrumb_has_bg %} +
+ {% endif %} +
+ {% render 'breadcrumb', + alignment: breadcrumb_alignment + %} +
+ {% if breadcrumb_has_bg %} +
+ {% endif %} +
+ {% endif %} +
+
+ {%- if has_sidebar -%} + {{ 'component-main-sidebar.css' | asset_url | stylesheet_tag }} +
+
+ + {% render 'icon-sidebar' %} + +
+
+
+ + + {% render 'icon-close' %} + +
+ + {{ 'sections.sidebar.title' | t }} + +
+
+ {% render 'sidebar', + results: collection, + section: section, + sidebar_type: sidebar_type, + show_collapse: show_sidebar_collapse, + sidebar_collapse: sidebar_collapse_default + %} +
+
+ {%- endif -%} + {%- if has_sidebar -%} +
+ {%- endif -%} +
+
+ {%- if main_image_show_custom_cursor -%} +
+
+
+ +
+
+ {%- if product.media.size -%} +
1{{ product.media.size }}
+ {%- endif -%} +
+ {%- endif -%} +
+
+ {%- if show_badge -%} + {% render 'product-badge', + product: product, + class: 'productView-badge', + badge_detail: true, + serial: 1 + %} + {%- endif -%} +
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'image' -%} +
+
+
+ 1 %}data-{% endif %}srcset="{{ media.preview_image | img_url: 'master' }}" + {% unless settings.enable_lazyload and forloop.index > 1 %}src="{{ media | img_url: 'master' }}"{% endunless %} + alt="{{ media.preview_image.alt | escape }}" + sizes="auto" + loading="lazy" + data-sizes="auto" + data-main-image + data-index="{{ forloop.index }}" + data-cursor-image + {% if settings.enable_lazyload and forloop.index > 1 %}class="lazyload"{% endif %} + /> + {%- if settings.enable_lazyload and forloop.index > 1 -%}{%- endif -%} +
+
+
+ {%- when 'external_video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ {%- if media.host == 'youtube' -%} +
+ {{ media.alt | escape }} +
+
+
+
+ {%- else -%} +
+ {{ media.alt | escape }} +
+
+ {{ media | external_video_tag }} +
+ {%- endif -%} +
+
+ {%- endif -%} + {%- when 'video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+
+ {{ media.alt | escape }} +
+
+ {{ media | video_tag: controls: true, image_size: 'master' }} +
+
+
+ {%- endif -%} + {%- when 'model' -%} +
+ + + + + +
+ {%- else -%} +
+
+ {{ media | media_tag }} +
+
+ {%- endcase -%} + {%- endfor -%} +
+ {%- if video_layout == 'popup' -%} +
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'external_video' -%} + {%- if media.host == 'youtube' -%} + + {% render 'icon-video' %} + + {%- else -%} + + {% render 'icon-video' %} + + {%- endif -%} + {%- when 'video' -%} + ' | first | strip_html | remove: '">'}}" data-width="1200" data-height="675"> + {% render 'icon-video' %} + + {%- endcase -%} + {%- endfor -%} +
+ {%- endif -%} + {%- if main_image_show_zoom_icon_mb -%} +
+ {% render 'icon-zoom-1' %} +
+ {%- endif -%} + {%- if show_compare_color and isColor and compare_layout == '2' -%} +
+ +
+ {%- endif -%} +
+ {%- if thumnail_layout != '4' -%} +
+
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'image' -%} +
+ + {{ media.alt | escape }} + +
+ {%- when 'external_video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ {{ media.alt | escape }} +
+
+ {% render 'icon-video' %} +
+
+ {%- endif -%} + {%- when 'video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ ' | first }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}" loading="lazy" /> +
+
+ {% render 'icon-video' %} +
+
+ {%- endif -%} + {%- when 'model' -%} +
+
+ ' | first }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}" loading="lazy" /> +
+
+ {% render 'icon-3d-model' %} +
+
+ {%- else -%} +
+
+ {{ media | media_tag }} +
+
+ {%- endcase -%} + {%- endfor -%} +
+
+ {%- endif -%} +
+
+
+
+ {%- for block in section.blocks -%} + {%- liquid + assign spacing_top = block.settings.spacing_top + assign spacing_bottom = block.settings.spacing_bottom + -%} + {%- case block.type -%} + {%- when 'breadcrumb' -%} + {%- if breadcrumb_layout == 'content' -%} +
+ {% render 'breadcrumb', + alignment: breadcrumb_alignment + %} +
+ {%- endif -%} + {%- when 'vendor' -%} +
+ {% render 'product-vendor', + block: block, + product: product, + fontsize_text: fontsize_text, + color_title: color_title, + text_transform: text_transform + %} +
+ {%- when 'title' -%} + + {%- when 'meta' -%} + {%- liquid + assign show_review = block.settings.show_review + assign show_sold_in = block.settings.show_sold_in + assign sold_in_number = block.settings.sold_in_number + assign sold_in_hours = block.settings.sold_in_hours + assign color_text_sold_in = block.settings.color_text_sold_in + -%} + {%- if show_review or show_sold_in -%} +
+
+ {%- if show_review -%} + {% render 'product-rating', + product: product + %} + {%- endif -%} + {%- if show_sold_in -%} + {% render 'product-sold-in-last', + sold_in_number: sold_in_number, + sold_in_hours: sold_in_hours + %} + {%- endif -%} +
+
+ {%- endif -%} + {%- when 'short_description' -%} +
+ {% render 'product-short-description', + block: block, + product: product, + fontsize_text: fontsize_text, + color_text: color_text + %} +
+ {%- when 'variant_description' -%} +
+ {% render 'product-variant-description', + block: block, + product: product, + current_variant: current_variant + %} +
+ {%- when 'info' -%} + {%- liquid + assign show_vendor = block.settings.show_vendor + assign show_availability = block.settings.show_availability + assign show_sku = block.settings.show_sku + assign show_product_type = block.settings.show_product_type + assign stock_level_display = block.settings.stock_level_display + assign enable_border_top = block.settings.enable_border_top + assign enable_border_bottom = block.settings.enable_border_bottom + assign color_border = block.settings.color_border + -%} + {%- if show_vendor or show_availability or show_sku or show_product_type -%} +
+ {% render 'product-info', + product: product, + show_vendor: show_vendor, + show_availability: show_availability, + current_variant: current_variant, + show_sku: show_sku, + show_product_type: show_product_type, + stock_level_display: stock_level_display, + enable_border_top: enable_border_top, + enable_border_bottom: enable_border_bottom, + color_border: color_border + %} +
+ {%- endif -%} + {%- when 'price' -%} + {% assign fontsize_text = block.settings.fontsize_text %} +
+ {% if has_product_combo %} +
+ {%- if combo_discount_rate > 0 -%} + + {{ cart.total_price | money }} + + + {%- assign compensation = 1 | minus: combo_discount_rate -%} + {{ cart.total_price | times: compensation | money }} + + {%- endif -%} + +
+ {% else %} +
+ {%- render 'price', + product: product, + use_variant: true, + price_class: 'price--medium' + -%} +
+ {% endif %} +
+ {%- when 'countdown' -%} + {%- liquid + 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 + -%} + {%- if show_countdown -%} +
+ {% render 'product-countdown', + product: product, + countdown_type: countdown_type, + countdown_style: countdown_style, + countdown_time: countdown_time, + countdown_collection: countdown_collection + %} +
+ {%- endif -%} + {%- when 'variant_picker' -%} + {% unless has_product_combo %} +
+ {% render 'product-variant', + block: block, + product: product, + variantCount: variantCount, + current_variant: current_variant, + picker_type: picker_type + %} +
+ {% endunless %} + {%- when 'customization_property' -%} + {% if has_customization_option == true %} +
+ {% render 'product-customization', + block: block, + product: product, + customization_option_1: customization_option_1, + customization_option_2: customization_option_2, + customization_option_hidden: customization_option_hidden + %} +
+ {% endif %} + {%- when 'hot_stock' -%} + {% unless has_product_combo %} + {% render 'product-hot-stock', + block: block, + product: product, + variantCount: variantCount, + show_hot_stock: show_hot_stock, + productMaxStock: productMaxStock, + current_variant: current_variant + %} + {% endunless %} + {%- when 'perks' -%} + {% unless has_product_combo %} +
+ {% render 'product-perks', + product: product, + show_size_chart: show_size_chart, + has_size_chart: has_size_chart, + show_compare_color: show_compare_color, + isColor: isColor, + compare_layout: compare_layout + %} +
+ {% endunless %} + {%- when 'quantity_selector' -%} + {% unless has_product_combo %} + {%- if check_show_qty == 'show_qty_1' -%} +
+
+ {% render 'product-quantity', + current_variant: current_variant, + qty_style: qty_style, + check_hidden: false, + quantity_stt: 2 + %} +
+ {%- if show_subtotal and subtotal_style == '1' -%} +
+ {{ 'sections.cart.subtotal' | t | append: ': ' }} + {{ subtotal }} +
+ {%- endif -%} +
+ {%- endif -%} + {% endunless %} + {%- when 'buy_buttons' -%} + {% unless has_product_combo %} +
+ {% render 'product-button', + block: block, + product: product, + current_variant: current_variant, + check_show_share: check_show_share, + share_layout: check_show_share, + section: section, + check_show_qty: check_show_qty, + qty_style: qty_style, + show_subtotal_text: show_subtotal_text, + subtotal: subtotal, + subtotal_style: subtotal_style + %} +
+ {% endunless %} + {%- when 'customer_viewing' -%} +
+ {% render 'product-customer-viewing', + block: block + %} +
+ {%- when 'pickup_availability' -%} +
+ {%- liquid + assign show_pickup_availability = block.settings.show_pickup_availability + -%} + {%- if show_pickup_availability -%} + {% render 'product-pickup-availability', + product: product, + current_variant: current_variant + %} + {%- endif -%} +
+ {%- when 'share' -%} + {%- if check_show_share == '1' -%} +
+ {% render 'halo-share', + product: product, + share_layout: check_show_share + %} +
+ {%- endif -%} + {%- when 'trust_image' -%} + {%- liquid + assign show_trust_image = block.settings.show_trust_image + -%} + {%- if show_trust_image -%} +
+
+ {%- render 'halo-trust-image', + type: 'product' + -%} +
+
+ {%- endif -%} + {%- when 'product_text' -%} + {%- liquid + assign content_spacing = block.settings.content_spacing + assign custom_block_align = block.settings.custom_block_align + assign background_color_block = block.settings.background_color_block + assign background_gradient_color_block = block.settings.background_gradient_color_block + -%} +
+
+ {% render 'product-text', + block: block + %} +
+
+ {%- when 'custom_information' -%} +
+ {% render 'product-custom-information', + block: block + %} +
+ {%- when 'grouped_product' -%} + {%- if has_product_combo -%} +
+ {% render 'grouped-product', + block: block, + show_share: show_share + check_show_share: check_show_share, + share_layout: check_show_share, + picker_type: picker_type, + show_size_chart: show_size_chart, + has_size_chart: has_size_chart, + show_compare_color: show_compare_color, + isColor: isColor, + compare_layout: compare_layout, + has_perks: has_perks, + product_combo: product_combo + %} +
+ {%- endif -%} + {%- when 'custom_liquid' -%} + {{ block.settings.custom_liquid }} + {%- when 'complementary_products' -%} +
+ + {%- if recommendations.performed and recommendations.products_count > 0 -%} + {%- if complementary_product_title -%} +
+
+ + {{ complementary_product_title | escape }} + +
+
+ {%- endif -%} +
+
+ {%- if complementary_product_layout == "1" -%} + {%- for product in recommendations.products limit: limit -%} +
+ {% render 'product-grid-layout', + product_card_product: product, + media_size: image_ratio, + portrait_aspect_ratio: portrait_aspect_ratio, + serial: forloop.index, + sectionId: section.id, + show_list: true, + loading: true + %} +
+ {%- endfor -%} + {%- endif -%} + + {%- if complementary_product_layout == "2" -%} + {%- for product in recommendations.products limit: limit offset: continue -%} +
+ {% render 'product-card-custom', + product_card_product: product + %} +
+ {%- endfor -%} + {%- endif -%} +
+
+ {%- endif-%} + + +
+ {%- when '@app' -%} + {% render block %} + {%- endcase -%} + {%- endfor -%} + {%- if show_tab -%} + {%- if tab_layout == 'vertical' or tab_layout == 'vertical_sidebar' or tab_layout == 'popup' -%} + {% render 'halo-product-tab', + product: product, + section: section, + tab_layout: tab_layout, + tab_layout_mobile: tab_layout_mobile, + icon_style_layout: icon_style_layout + %} + {%- endif -%} + {%- endif -%} +
+
+
+ {%- if has_sidebar -%} +
+ {% endif %} + {%- unless has_product_combo -%} + {%- if show_sticky_add_to_cart -%} + {{ 'component-sticky-add-to-cart.css' | asset_url | stylesheet_tag }} + {% render 'halo-sticky-add-to-cart', + product: product, + current_variant: current_variant, + variantCount: variantCount, + show_vendor: show_sticky_vendor, + sticky_atc_layout: sticky_atc_layout, + container: container, + show_qty: show_qty, + qty_style: qty_style, + subtotal: subtotal + %} + {%- endif -%} + {%- endunless -%} +
+
+ {% unless has_product_combo %} + {% render 'product-bundle' %} + {% endunless %} +
+
+ {%- if show_tab and tab_layout == 'horizontal' -%} + {% render 'halo-product-tab', + product: product, + section: section, + tab_layout: tab_layout, + tab_layout_mobile: tab_layout_mobile, + icon_style_layout: icon_style_layout + %} + {%- endif -%} +
+
+
+ +{%- 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 -%} + + +{%- if show_sticky_add_to_cart -%} + +{%- endif -%} +{%- if first_3d_model -%} + + + +{%- endif -%} +{%- if main_image_show_custom_cursor -%} + +{%- endif -%} +{%- if product_image_popup == 'fancybox' -%} + +{%- endif -%} +{%- if zoomed_image and main_image_show_custom_cursor != true -%} + +{%- endif -%} + +{% render 'schema', + product: product +%} \ No newline at end of file diff --git a/snippets/product-page-gallery.liquid b/snippets/product-page-gallery.liquid new file mode 100644 index 0000000..8e4333c --- /dev/null +++ b/snippets/product-page-gallery.liquid @@ -0,0 +1,1351 @@ +{%- liquid + assign container = section.settings.container + assign padding_full_width = section.settings.padding_full_width + assign show_sticky_info = section.settings.show_sticky_info + assign mg_top_desktop = section.settings.mg_top_desktop + assign mg_top_tablet = section.settings.mg_top_tablet + assign mg_top_mobile = section.settings.mg_top_mobile + assign mg_bottom_desktop = section.settings.mg_bottom_desktop + assign mg_bottom_tablet = section.settings.mg_bottom_tablet + assign mg_bottom_mobile = section.settings.mg_bottom_mobile + assign main_image_position = section.settings.main_image_position + assign main_image_show_custom_cursor = section.settings.main_image_show_custom_cursor + assign count_color = section.settings.count_color + assign icon_color = section.settings.icon_color + assign thumnail_layout = section.settings.thumnail_layout + assign main_image_arrows_desktop = section.settings.main_image_arrows_desktop + assign main_image_arrows_mobile = section.settings.main_image_arrows_mobile + assign main_image_counter_mobile = section.settings.main_image_counter_mobile + assign main_image_enable_parallax_mb = section.settings.main_image_enable_parallax_mb + assign main_image_show_zoom_icon_mb = section.settings.main_image_show_zoom_icon_mb + assign main_image_layout = section.settings.main_image_layout + assign show_thumbnail_mobile = section.settings.show_thumbnail_mobile + assign max_thumbnail_to_show = section.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 = section.settings.product_image_ratio + assign portrait_aspect_ratio = section.settings.portrait_aspect_ratio | append: '%' + assign zoomed_image = section.settings.zoomed_image + assign media_fit = section.settings.media_fit + assign product_image_popup = section.settings.product_image_popup + assign video_layout = section.settings.video_layout + assign show_badge = section.settings.show_badge + assign show_hot_stock = settings.show_hot_stock + if show_hot_stock + assign productMaxStock = settings.hot_stock_limit | plus: 0 + endif + assign show_qty = section.settings.show_qty + assign show_subtotal = section.settings.show_subtotal + assign subtotal_style = section.settings.subtotal_style + assign show_subtotal_text = false + assign subtotal = 0 + if show_subtotal + assign show_subtotal_text = 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_sticky_add_to_cart = section.settings.show_sticky_add_to_cart + assign sticky_atc_layout = section.settings.sticky_atc_layout + assign show_sticky_vendor = section.settings.show_sticky_vendor + assign show_tab = section.settings.show_tab + if show_tab + assign tab_layout = section.settings.tab_layout + assign tab_layout_mobile = section.settings.tab_layout_mobile + assign icon_style_layout = section.settings.icon_style_layout + assign title_font_size = section.settings.title_font_size + assign title_font_size_mb = section.settings.title_font_size_mb + assign font_weight_title = section.settings.font_weight_title + assign title_text_transform = section.settings.title_text_transform + assign title_padding_top_bottom = section.settings.title_padding_top_bottom + if section.blocks.size > 0 + assign show_tab = true + else + assign show_tab = false + endif + endif + assign first_3d_model = product.media | where: "media_type", "model" | first + assign has_product_combo = false + + assign has_sidebar = false + assign show_sidebar = section.settings.show_sidebar + assign sidebar_type = 'vertical' + assign sidebar_position = section.settings.sidebar_position + assign show_sidebar_collapse = section.settings.show_sidebar_collapse + assign sidebar_collapse_default = section.settings.sidebar_collapse_default + if show_sidebar + if sidebar_type == 'vertical' + if section.blocks.size > 0 + assign has_sidebar = true + endif + endif + endif + if has_sidebar + assign sidebar_heading_font = section.settings.sidebar_heading_font + assign sidebar_heading_font_size = section.settings.sidebar_heading_font_size + assign sidebar_heading_font_weight = section.settings.sidebar_heading_font_weight + assign sidebar_heading_text_transform = section.settings.sidebar_heading_text_transform + assign enable_sticky = section.settings.enable_sticky + assign sidebar_layout = section.settings.sidebar_layout + endif + assign has_breadcrumb = false + for block in section.blocks + case block.type + when 'breadcrumb' + assign breadcrumb_layout = block.settings.breadcrumb_layout + assign breadcrumb_alignment = block.settings.breadcrumb_alignment + assign breadcrumb_mg_top_desktop = block.settings.breadcrumb_mg_top_desktop + assign breadcrumb_mg_top_mobile = block.settings.breadcrumb_mg_top_mobile + assign breadcrumb_mg_bottom_desktop = block.settings.breadcrumb_mg_bottom_desktop + assign breadcrumb_mg_bottom_mobile = block.settings.breadcrumb_mg_bottom_mobile + assign breadcrumb_bg = block.settings.breadcrumb_bg + assign breadcrumb_gradient = block.settings.breadcrumb_gradient + assign breadcrumb_bg_mb = block.settings.breadcrumb_bg_mb + assign breadcrumb_gradient_mb = block.settings.breadcrumb_gradient_mb + + if breadcrumb_layout == 'full' + assign check_breadcrumb_full = true + else + assign check_breadcrumb_full = false + endif + + assign has_breadcrumb = true + when 'title' + assign check_block_title = true + + when 'quantity_selector' + assign check_block_qty = true + assign qty_style = block.settings.qty_style + assign qty_layout = block.settings.qty_layout + + when 'perks' + assign has_perks = true + assign show_compare_color = block.settings.show_compare_color + if show_compare_color + assign show_compare_color_drop_drap = block.settings.show_compare_color_drop_drap + assign product_swatch_option = settings.swatch | downcase + assign compare_layout = block.settings.compare_layout + 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 + assign show_size_chart = block.settings.show_size_chart + if show_size_chart + assign has_size_chart = false + assign size_chart_type = block.settings.size_chart_type + if size_chart_type == 'product_type' or size_chart_type == 'product_vendor' + assign size_chart_image_type = block.settings.size_chart_image_type + elsif size_chart_type == 'custom_image' + assign size_chart_image = block.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 + when 'buy_buttons' + assign check_block_buttons = true + when 'share' + assign show_share = block.settings.show_share + assign share_layout = block.settings.share_layout + when 'variant_picker' + assign picker_type = block.settings.picker_type + assign show_variant_image_group = block.settings.show_variant_image_group + when 'grouped_product' + assign product_combo = product.metafields.c_f.product_combo + assign combo_discount_rate = product.metafields.c_f.combo_discount_rate | plus: 0 | divided_by: 100.00 + + if product_combo + assign has_product_combo = true + else + assign has_product_combo = false + endif + when 'complementary_products' + assign complementary_product_title = block.settings.complementary_product_title + assign complementary_product_arrows = block.settings.complementary_product_arrows + assign complementary_product_dots = block.settings.complementary_product_dots + assign complementary_product_layout = block.settings.complementary_product_layout + if complementary_product_layout == "1" + assign complementary_product_limit_1 = block.settings.complementary_product_limit_1 + endif + if complementary_product_layout == "2" + assign complementary_product_limit_2 = block.settings.complementary_product_limit_2 + assign complementary_product_object = block.settings.complementary_product_object + endif + endcase + endfor + + if show_qty + if check_block_qty + if check_block_buttons + if qty_layout == '1' + assign check_show_qty = 'show_qty_1' + elsif qty_layout == '2' + assign check_show_qty = 'show_qty_2' + endif + else + assign check_show_qty = 'show_qty_1' + endif + else + assign check_show_qty = 'show_qty_0' + endif + else + assign check_show_qty = 'show_qty_0' + endif + + if show_share + if check_block_title and check_block_buttons + assign check_show_share = share_layout + elsif check_block_title and check_block_buttons != true + if share_layout == '2' + assign check_show_share = '1' + else + assign check_show_share = share_layout + endif + elsif check_block_title != true and check_block_buttons + if share_layout == '3' + assign check_show_share = '1' + else + assign check_show_share = share_layout + endif + endif + 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 +-%} + +{%- if first_3d_model -%} + + + + +{%- endif -%} + + + +{%- if product_image_popup == 'fancybox' -%} + + +{%- endif -%} +
+ {% if has_breadcrumb %} + {%- liquid + if breadcrumb_gradient != 'rgba(0,0,0,0)' or breadcrumb_bg != 'rgba(0,0,0,0)' or breadcrumb_gradient_mb != 'rgba(0,0,0,0)' or breadcrumb_bg_mb != 'rgba(0,0,0,0)' + assign breadcrumb_has_bg = true + else + assign breadcrumb_has_bg = false + endif + -%} +
+ {% if breadcrumb_has_bg %} +
+ {% endif %} +
+ {% render 'breadcrumb', + alignment: breadcrumb_alignment + %} +
+ {% if breadcrumb_has_bg %} +
+ {% endif %} +
+ {% endif %} +
+
+ {%- if has_sidebar -%} + {{ 'component-main-sidebar.css' | asset_url | stylesheet_tag }} +
+
+ + {% render 'icon-sidebar' %} + +
+
+
+ + + {% render 'icon-close' %} + +
+ + {{ 'sections.sidebar.title' | t }} + +
+
+ {% render 'sidebar', + results: collection, + section: section, + sidebar_type: sidebar_type, + show_collapse: show_sidebar_collapse, + sidebar_collapse: sidebar_collapse_default + %} +
+
+ {%- endif -%} + {%- if has_sidebar -%} +
+ {%- endif -%} +
+
+ {%- if main_image_show_custom_cursor -%} +
+
+
+ +
+
+
+ {%- endif -%} +
+
+ {%- if show_badge -%} + {% render 'product-badge', + product: product, + class: 'productView-badge', + badge_detail: true, + serial: 1 + %} + {%- endif -%} +
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'image' -%} +
+
+
+ 4 %}data-{% endif %}srcset="{{ media.preview_image | img_url: 'master' }}" + {% unless settings.enable_lazyload and forloop.index > 4 %}src="{{ media | img_url: 'master' }}"{% endunless %} + alt="{{ media.preview_image.alt | escape }}" + sizes="auto" + loading="lazy" + data-sizes="auto" + data-main-image + data-index="{{ forloop.index }}" + data-cursor-image + {% if settings.enable_lazyload and forloop.index > 4 %}class="lazyload"{% endif %} + /> + {%- if settings.enable_lazyload and forloop.index > 4 -%}{%- endif -%} +
+
+
+ {%- when 'external_video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ {%- if media.host == 'youtube' -%} +
+ {{ media.alt | escape }} +
+
+
+
+ {%- else -%} +
+ {{ media.alt | escape }} +
+
+ {{ media | external_video_tag }} +
+ {%- endif -%} +
+
+ {%- endif -%} + {%- when 'video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+
+ {{ media.alt | escape }} +
+
+ {{ media | video_tag: controls: true, image_size: 'master' }} +
+
+
+ {%- endif -%} + {%- when 'model' -%} +
+ + + + + +
+ {%- else -%} +
+
+ {{ media | media_tag }} +
+
+ {%- endcase -%} + {%- endfor -%} +
+ {%- if video_layout == 'popup' -%} +
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'external_video' -%} + {%- if media.host == 'youtube' -%} + + {% render 'icon-video' %} + + {%- else -%} + + {% render 'icon-video' %} + + {%- endif -%} + {%- when 'video' -%} + ' | first | strip_html | remove: '">'}}" data-width="1200" data-height="675"> + {% render 'icon-video' %} + + {%- endcase -%} + {%- endfor -%} +
+ {%- endif -%} + {%- if main_image_show_zoom_icon_mb -%} +
+ {% render 'icon-zoom-1' %} +
+ {%- endif -%} + {%- if show_compare_color and isColor and compare_layout == '2' -%} +
+ +
+ {%- endif -%} +
+ {%- if thumnail_layout != '4' -%} +
+
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'image' -%} +
+ + {{ media.alt | escape }} + +
+ {%- when 'external_video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ {{ media.alt | escape }} +
+
+ {% render 'icon-video' %} +
+
+ {%- endif -%} + {%- when 'video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ ' | first }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}" loading="lazy" /> +
+
+ {% render 'icon-video' %} +
+
+ {%- endif -%} + {%- when 'model' -%} +
+
+ ' | first }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}" loading="lazy" /> +
+
+ {% render 'icon-3d-model' %} +
+
+ {%- else -%} +
+
+ {{ media | media_tag }} +
+
+ {%- endcase -%} + {%- endfor -%} +
+
+ {%- endif -%} +
+
+
+
+ {%- for block in section.blocks -%} + {%- liquid + assign spacing_top = block.settings.spacing_top + assign spacing_bottom = block.settings.spacing_bottom + -%} + {%- case block.type -%} + {%- when 'breadcrumb' -%} + {%- if breadcrumb_layout == 'content' -%} +
+ {% render 'breadcrumb', + alignment: breadcrumb_alignment + %} +
+ {%- endif -%} + {%- when 'vendor' -%} +
+ {% render 'product-vendor', + block: block, + product: product, + fontsize_text: fontsize_text, + color_title: color_title, + text_transform: text_transform + %} +
+ {%- when 'title' -%} + + {%- when 'meta' -%} + {%- liquid + assign show_review = block.settings.show_review + assign show_sold_in = block.settings.show_sold_in + assign sold_in_number = block.settings.sold_in_number + assign sold_in_hours = block.settings.sold_in_hours + assign color_text_sold_in = block.settings.color_text_sold_in + -%} + {%- if show_review or show_sold_in -%} +
+
+ {%- if show_review -%} + {% render 'product-rating', + product: product + %} + {%- endif -%} + {%- if show_sold_in -%} + {% render 'product-sold-in-last', + sold_in_number: sold_in_number, + sold_in_hours: sold_in_hours + %} + {%- endif -%} +
+
+ {%- endif -%} + {%- when 'short_description' -%} +
+ {% render 'product-short-description', + block: block, + product: product, + fontsize_text: fontsize_text, + color_text: color_text + %} +
+ {%- when 'variant_description' -%} +
+ {% render 'product-variant-description', + block: block, + product: product, + current_variant: current_variant + %} +
+ {%- when 'info' -%} + {%- liquid + assign show_vendor = block.settings.show_vendor + assign show_availability = block.settings.show_availability + assign show_sku = block.settings.show_sku + assign show_product_type = block.settings.show_product_type + assign stock_level_display = block.settings.stock_level_display + assign enable_border_top = block.settings.enable_border_top + assign enable_border_bottom = block.settings.enable_border_bottom + assign color_border = block.settings.color_border + -%} + {%- if show_vendor or show_availability or show_sku or show_product_type -%} +
+ {% render 'product-info', + product: product, + show_vendor: show_vendor, + current_variant: current_variant, + show_availability: show_availability, + show_sku: show_sku, + show_product_type: show_product_type, + stock_level_display: stock_level_display, + enable_border_top: enable_border_top, + enable_border_bottom: enable_border_bottom, + color_border: color_border + %} +
+ {%- endif -%} + {%- when 'price' -%} + {% assign fontsize_text = block.settings.fontsize_text %} +
+ {% if has_product_combo %} +
+ {%- if combo_discount_rate > 0 -%} + + {{ cart.total_price | money }} + + + {%- assign compensation = 1 | minus: combo_discount_rate -%} + {{ cart.total_price | times: compensation | money }} + + {%- endif -%} + +
+ {% else %} +
+ {%- render 'price', + product: product, + use_variant: true, + price_class: 'price--medium' + -%} +
+ {% endif %} +
+ {%- when 'countdown' -%} + {%- liquid + 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 + -%} + {%- if show_countdown -%} +
+ {% render 'product-countdown', + product: product, + countdown_type: countdown_type, + countdown_style: countdown_style, + countdown_time: countdown_time, + countdown_collection: countdown_collection + %} +
+ {%- endif -%} + {%- when 'variant_picker' -%} + {% unless has_product_combo %} +
+ {% render 'product-variant', + block: block, + product: product, + variantCount: variantCount, + current_variant: current_variant, + picker_type: picker_type, + show_variant_image_group: show_variant_image_group + %} +
+ {% endunless %} + {%- when 'customization_property' -%} + {% if has_customization_option == true %} +
+ {% render 'product-customization', + block: block, + product: product, + customization_option_1: customization_option_1, + customization_option_2: customization_option_2, + customization_option_hidden: customization_option_hidden + %} +
+ {% endif %} + {%- when 'hot_stock' -%} + {% unless has_product_combo %} + {% render 'product-hot-stock', + block: block, + product: product, + variantCount: variantCount, + show_hot_stock: show_hot_stock, + productMaxStock: productMaxStock, + current_variant: current_variant + %} + {% endunless %} + {%- when 'perks' -%} + {% unless has_product_combo %} +
+ {% render 'product-perks', + product: product, + show_size_chart: show_size_chart, + has_size_chart: has_size_chart, + show_compare_color: show_compare_color, + isColor: isColor, + compare_layout: compare_layout + %} +
+ {% endunless %} + {%- when 'quantity_selector' -%} + {% unless has_product_combo %} + {%- if check_show_qty == 'show_qty_1' -%} +
+
+ {% render 'product-quantity', + current_variant: current_variant, + qty_style: qty_style, + check_hidden: false, + quantity_stt: 2 + %} +
+ {%- if show_subtotal and subtotal_style == '1' -%} +
+ {{ 'sections.cart.subtotal' | t | append: ': ' }} + {{ subtotal }} +
+ {%- endif -%} +
+ {%- endif -%} + {% endunless %} + {%- when 'buy_buttons' -%} + {% unless has_product_combo %} +
+ {% render 'product-button', + block: block, + product: product, + current_variant: current_variant, + check_show_share: check_show_share, + share_layout: check_show_share, + section: section, + check_show_qty: check_show_qty, + qty_style: qty_style, + show_subtotal_text: show_subtotal_text, + subtotal: subtotal, + subtotal_style: subtotal_style + %} +
+ {% endunless %} + {%- when 'customer_viewing' -%} +
+ {% render 'product-customer-viewing', + block: block + %} +
+ {%- when 'pickup_availability' -%} +
+ {%- liquid + assign show_pickup_availability = block.settings.show_pickup_availability + -%} + {%- if show_pickup_availability -%} + {% render 'product-pickup-availability', + product: product, + current_variant: current_variant + %} + {%- endif -%} +
+ {%- when 'share' -%} + {%- if check_show_share == '1' -%} +
+ {% render 'halo-share', + product: product, + share_layout: check_show_share + %} +
+ {%- endif -%} + {%- when 'trust_image' -%} + {%- liquid + assign show_trust_image = block.settings.show_trust_image + -%} + {%- if show_trust_image -%} +
+
+ {%- render 'halo-trust-image', + type: 'product' + -%} +
+
+ {%- endif -%} + {%- when 'product_text' -%} + {%- liquid + assign content_spacing = block.settings.content_spacing + assign custom_block_align = block.settings.custom_block_align + assign background_color_block = block.settings.background_color_block + assign background_gradient_color_block = block.settings.background_gradient_color_block + -%} +
+
+ {% render 'product-text', + block: block + %} +
+
+ {%- when 'custom_information' -%} +
+ {% render 'product-custom-information', + block: block + %} +
+ {%- when 'grouped_product' -%} + {%- if has_product_combo -%} +
+ {% render 'grouped-product', + block: block, + show_share: show_share + check_show_share: check_show_share, + share_layout: check_show_share, + picker_type: picker_type, + show_size_chart: show_size_chart, + has_size_chart: has_size_chart, + show_compare_color: show_compare_color, + isColor: isColor, + compare_layout: compare_layout, + has_perks: has_perks, + product_combo: product_combo + %} +
+ {%- endif -%} + {%- when 'custom_liquid' -%} + {{ block.settings.custom_liquid }} + {%- when 'complementary_products' -%} +
+ + {%- if recommendations.performed and recommendations.products_count > 0 -%} + {%- if complementary_product_title -%} +
+
+ + {{ complementary_product_title | escape }} + +
+
+ {%- endif -%} +
+
+ {%- if complementary_product_layout == "1" -%} + {%- for product in recommendations.products limit: limit -%} +
+ {% render 'product-grid-layout', + product_card_product: product, + media_size: image_ratio, + portrait_aspect_ratio: portrait_aspect_ratio, + serial: forloop.index, + sectionId: section.id, + show_list: true, + loading: true + %} +
+ {%- endfor -%} + {%- endif -%} + + {%- if complementary_product_layout == "2" -%} + {%- for product in recommendations.products limit: limit offset: continue -%} +
+ {% render 'product-card-custom', + product_card_product: product + %} +
+ {%- endfor -%} + {%- endif -%} +
+
+ {%- endif-%} + + +
+ {%- when '@app' -%} + {% render block %} + {%- endcase -%} + {%- endfor -%} + {%- if show_tab -%} + {%- if tab_layout == 'vertical' or tab_layout == 'vertical_sidebar' or tab_layout == 'popup' -%} + {% render 'halo-product-tab', + product: product, + section: section, + tab_layout: tab_layout, + tab_layout_mobile: tab_layout_mobile, + icon_style_layout: icon_style_layout + %} + {%- endif -%} + {%- endif -%} +
+
+
+ {%- if has_sidebar -%} +
+ {% endif %} + {%- unless has_product_combo -%} + {%- if show_sticky_add_to_cart -%} + {{ 'component-sticky-add-to-cart.css' | asset_url | stylesheet_tag }} + {% render 'halo-sticky-add-to-cart', + product: product, + current_variant: current_variant, + variantCount: variantCount, + show_vendor: show_sticky_vendor, + sticky_atc_layout: sticky_atc_layout, + container: container, + show_qty: show_qty, + qty_style: qty_style, + subtotal: subtotal + %} + {% comment %} {% render 'halo-sticky-add-to-cart-mobile', + product: product, + current_variant: current_variant, + variantCount: variantCount, + show_vendor: show_sticky_vendor, + sticky_atc_layout: sticky_atc_layout, + container: container, + show_qty: show_qty, + qty_style: qty_style, + subtotal: subtotal + %} {% endcomment %} + {%- endif -%} + {%- endunless -%} +
+
+ {% unless has_product_combo %} + {% render 'product-bundle' %} + {% endunless %} +
+
+ {%- if show_tab and tab_layout == 'horizontal' -%} + {% render 'halo-product-tab', + product: product, + section: section, + tab_layout: tab_layout, + tab_layout_mobile: tab_layout_mobile, + icon_style_layout: icon_style_layout + %} + {%- endif -%} +
+
+
+ +{%- 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 -%} + + +{%- if show_sticky_add_to_cart -%} + +{%- endif -%} +{%- if first_3d_model -%} + + + +{%- endif -%} +{%- if main_image_show_custom_cursor -%} + +{%- endif -%} +{%- if product_image_popup == 'fancybox' -%} + +{%- endif -%} +{%- if zoomed_image and main_image_show_custom_cursor != true -%} + +{%- endif -%} + +{% render 'schema', + product: product +%} \ No newline at end of file diff --git a/snippets/product-page-horizontal-tabs-no-sidebar.liquid b/snippets/product-page-horizontal-tabs-no-sidebar.liquid new file mode 100644 index 0000000..08d0c0c --- /dev/null +++ b/snippets/product-page-horizontal-tabs-no-sidebar.liquid @@ -0,0 +1,1330 @@ +{%- liquid + assign container = section.settings.container + assign padding_full_width = section.settings.padding_full_width + assign show_sticky_info = section.settings.show_sticky_info + assign mg_top_desktop = section.settings.mg_top_desktop + assign mg_top_tablet = section.settings.mg_top_tablet + assign mg_top_mobile = section.settings.mg_top_mobile + assign mg_bottom_desktop = section.settings.mg_bottom_desktop + assign mg_bottom_tablet = section.settings.mg_bottom_tablet + assign mg_bottom_mobile = section.settings.mg_bottom_mobile + assign main_image_position = section.settings.main_image_position + assign main_image_show_custom_cursor = section.settings.main_image_show_custom_cursor + assign count_color = section.settings.count_color + assign icon_color = section.settings.icon_color + assign thumnail_layout = section.settings.thumnail_layout + assign main_image_arrows_desktop = section.settings.main_image_arrows_desktop + assign main_image_arrows_mobile = section.settings.main_image_arrows_mobile + assign main_image_counter_mobile = section.settings.main_image_counter_mobile + assign main_image_enable_parallax_mb = section.settings.main_image_enable_parallax_mb + assign main_image_show_zoom_icon_mb = section.settings.main_image_show_zoom_icon_mb + assign main_image_layout = section.settings.main_image_layout + assign show_thumbnail_mobile = section.settings.show_thumbnail_mobile + assign max_thumbnail_to_show = section.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 = section.settings.product_image_ratio + assign portrait_aspect_ratio = section.settings.portrait_aspect_ratio | append: '%' + assign zoomed_image = section.settings.zoomed_image + assign media_fit = section.settings.media_fit + assign product_image_popup = section.settings.product_image_popup + assign video_layout = section.settings.video_layout + assign show_badge = section.settings.show_badge + assign show_hot_stock = settings.show_hot_stock + if show_hot_stock + assign productMaxStock = settings.hot_stock_limit | plus: 0 + endif + assign show_qty = section.settings.show_qty + assign show_subtotal = section.settings.show_subtotal + assign subtotal_style = section.settings.subtotal_style + assign show_subtotal_text = false + assign subtotal = 0 + if show_subtotal + assign show_subtotal_text = 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_sticky_add_to_cart = section.settings.show_sticky_add_to_cart + assign sticky_atc_layout = section.settings.sticky_atc_layout + assign show_sticky_vendor = section.settings.show_sticky_vendor + assign show_tab = section.settings.show_tab + if show_tab + assign tab_layout = section.settings.tab_layout + assign tab_layout_mobile = section.settings.tab_layout_mobile + assign icon_style_layout = section.settings.icon_style_layout + assign title_font_size = section.settings.title_font_size + assign title_font_size_mb = section.settings.title_font_size_mb + assign font_weight_title = section.settings.font_weight_title + assign title_text_transform = section.settings.title_text_transform + assign title_padding_top_bottom = section.settings.title_padding_top_bottom + if section.blocks.size > 0 + assign show_tab = true + else + assign show_tab = false + endif + endif + assign first_3d_model = product.media | where: "media_type", "model" | first + assign has_product_combo = false + + assign has_sidebar = false + assign show_sidebar = section.settings.show_sidebar + assign sidebar_type = 'vertical' + assign sidebar_position = section.settings.sidebar_position + assign show_sidebar_collapse = section.settings.show_sidebar_collapse + assign sidebar_collapse_default = section.settings.sidebar_collapse_default + if show_sidebar + if sidebar_type == 'vertical' + if section.blocks.size > 0 + assign has_sidebar = true + endif + endif + endif + if has_sidebar + assign sidebar_heading_font = section.settings.sidebar_heading_font + assign sidebar_heading_font_size = section.settings.sidebar_heading_font_size + assign sidebar_heading_font_weight = section.settings.sidebar_heading_font_weight + assign sidebar_heading_text_transform = section.settings.sidebar_heading_text_transform + assign enable_sticky = section.settings.enable_sticky + assign sidebar_layout = section.settings.sidebar_layout + endif + assign has_breadcrumb = false + for block in section.blocks + case block.type + when 'breadcrumb' + assign breadcrumb_layout = block.settings.breadcrumb_layout + assign breadcrumb_alignment = block.settings.breadcrumb_alignment + assign breadcrumb_mg_top_desktop = block.settings.breadcrumb_mg_top_desktop + assign breadcrumb_mg_top_mobile = block.settings.breadcrumb_mg_top_mobile + assign breadcrumb_mg_bottom_desktop = block.settings.breadcrumb_mg_bottom_desktop + assign breadcrumb_mg_bottom_mobile = block.settings.breadcrumb_mg_bottom_mobile + assign breadcrumb_bg = block.settings.breadcrumb_bg + assign breadcrumb_gradient = block.settings.breadcrumb_gradient + assign breadcrumb_bg_mb = block.settings.breadcrumb_bg_mb + assign breadcrumb_gradient_mb = block.settings.breadcrumb_gradient_mb + + if breadcrumb_layout == 'full' + assign check_breadcrumb_full = true + else + assign check_breadcrumb_full = false + endif + assign has_breadcrumb = true + when 'title' + assign check_block_title = true + + when 'quantity_selector' + assign check_block_qty = true + assign qty_style = block.settings.qty_style + assign qty_layout = block.settings.qty_layout + + when 'perks' + assign has_perks = true + assign show_compare_color = block.settings.show_compare_color + if show_compare_color + assign show_compare_color_drop_drap = block.settings.show_compare_color_drop_drap + assign product_swatch_option = settings.swatch | downcase + assign compare_layout = block.settings.compare_layout + 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 + assign show_size_chart = block.settings.show_size_chart + if show_size_chart + assign has_size_chart = false + assign size_chart_type = block.settings.size_chart_type + if size_chart_type == 'product_type' or size_chart_type == 'product_vendor' + assign size_chart_image_type = block.settings.size_chart_image_type + elsif size_chart_type == 'custom_image' + assign size_chart_image = block.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 + when 'buy_buttons' + assign check_block_buttons = true + when 'share' + assign show_share = block.settings.show_share + assign share_layout = block.settings.share_layout + when 'variant_picker' + assign picker_type = block.settings.picker_type + when 'grouped_product' + assign product_combo = product.metafields.c_f.product_combo + assign combo_discount_rate = product.metafields.c_f.combo_discount_rate | plus: 0 | divided_by: 100.00 + + if product_combo + assign has_product_combo = true + else + assign has_product_combo = false + endif + when 'complementary_products' + assign complementary_product_title = block.settings.complementary_product_title + assign complementary_product_arrows = block.settings.complementary_product_arrows + assign complementary_product_dots = block.settings.complementary_product_dots + assign complementary_product_layout = block.settings.complementary_product_layout + if complementary_product_layout == "1" + assign complementary_product_limit_1 = block.settings.complementary_product_limit_1 + endif + if complementary_product_layout == "2" + assign complementary_product_limit_2 = block.settings.complementary_product_limit_2 + assign complementary_product_object = block.settings.complementary_product_object + endif + endcase + endfor + + if show_qty + if check_block_qty + if check_block_buttons + if qty_layout == '1' + assign check_show_qty = 'show_qty_1' + elsif qty_layout == '2' + assign check_show_qty = 'show_qty_2' + endif + else + assign check_show_qty = 'show_qty_1' + endif + else + assign check_show_qty = 'show_qty_0' + endif + else + assign check_show_qty = 'show_qty_0' + endif + + if show_share + if check_block_title and check_block_buttons + assign check_show_share = share_layout + elsif check_block_title and check_block_buttons != true + if share_layout == '2' + assign check_show_share = '1' + else + assign check_show_share = share_layout + endif + elsif check_block_title != true and check_block_buttons + if share_layout == '3' + assign check_show_share = '1' + else + assign check_show_share = share_layout + endif + endif + 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 +-%} + +{%- if first_3d_model -%} + + + + +{%- endif -%} + + + +{%- if product_image_popup == 'fancybox' -%} + + +{%- endif -%} +
+ {% if has_breadcrumb %} + {%- liquid + if breadcrumb_gradient != 'rgba(0,0,0,0)' or breadcrumb_bg != 'rgba(0,0,0,0)' or breadcrumb_gradient_mb != 'rgba(0,0,0,0)' or breadcrumb_bg_mb != 'rgba(0,0,0,0)' + assign breadcrumb_has_bg = true + else + assign breadcrumb_has_bg = false + endif + -%} +
+ {% if breadcrumb_has_bg %} +
+ {% endif %} +
+ {% render 'breadcrumb', + alignment: breadcrumb_alignment + %} +
+ {% if breadcrumb_has_bg %} +
+ {% endif %} +
+ {% endif %} +
+
+ {%- if has_sidebar -%} + {{ 'component-main-sidebar.css' | asset_url | stylesheet_tag }} +
+
+ + {% render 'icon-sidebar' %} + +
+
+
+ + + {% render 'icon-close' %} + +
+ + {{ 'sections.sidebar.title' | t }} + +
+
+ {% render 'sidebar', + results: collection, + section: section, + sidebar_type: sidebar_type, + show_collapse: show_sidebar_collapse, + sidebar_collapse: sidebar_collapse_default + %} +
+
+ {%- endif -%} + {%- if has_sidebar -%} +
+ {%- endif -%} +
+
+ {%- if main_image_show_custom_cursor -%} +
+
+
+ +
+
+
+ {%- endif -%} +
+
+ {%- if show_badge -%} + {% render 'product-badge', + product: product, + class: 'productView-badge', + badge_detail: true, + serial: 1 + %} + {%- endif -%} +
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'image' -%} +
+
+
+ 2 %}data-{% endif %}srcset="{{ media.preview_image | img_url: 'master' }}" + {% unless settings.enable_lazyload and forloop.index > 2 %}src="{{ media | img_url: 'master' }}"{% endunless %} + alt="{{ media.preview_image.alt | escape }}" + sizes="auto" + loading="lazy" + data-sizes="auto" + data-main-image + data-index="{{ forloop.index }}" + data-cursor-image + {% if settings.enable_lazyload and forloop.index > 2 %}class="lazyload"{% endif %} + /> + {%- if settings.enable_lazyload and forloop.index > 2 -%}{%- endif -%} +
+
+
+ {%- when 'external_video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ {%- if media.host == 'youtube' -%} +
+ {{ media.alt | escape }} +
+
+
+
+ {%- else -%} +
+ {{ media.alt | escape }} +
+
+ {{ media | external_video_tag }} +
+ {%- endif -%} +
+
+ {%- endif -%} + {%- when 'video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+
+ {{ media.alt | escape }} +
+
+ {{ media | video_tag: controls: true, image_size: 'master' }} +
+
+
+ {%- endif -%} + {%- when 'model' -%} +
+ + + + + +
+ {%- else -%} +
+
+ {{ media | media_tag }} +
+
+ {%- endcase -%} + {%- endfor -%} +
+ {%- if video_layout == 'popup' -%} +
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'external_video' -%} + {%- if media.host == 'youtube' -%} + + {% render 'icon-video' %} + + {%- else -%} + + {% render 'icon-video' %} + + {%- endif -%} + {%- when 'video' -%} + ' | first | strip_html | remove: '">'}}" data-width="1200" data-height="675"> + {% render 'icon-video' %} + + {%- endcase -%} + {%- endfor -%} +
+ {%- endif -%} + {%- if main_image_show_zoom_icon_mb -%} +
+ {% render 'icon-zoom-1' %} +
+ {%- endif -%} + {%- if show_compare_color and isColor and compare_layout == '2' -%} +
+ +
+ {%- endif -%} +
+ {%- if thumnail_layout != '4' -%} +
+
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'image' -%} +
+ + {{ media.alt | escape }} + +
+ {%- when 'external_video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ {{ media.alt | escape }} +
+
+ {% render 'icon-video' %} +
+
+ {%- endif -%} + {%- when 'video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ ' | first }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}" loading="lazy" /> +
+
+ {% render 'icon-video' %} +
+
+ {%- endif -%} + {%- when 'model' -%} +
+
+ ' | first }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}" loading="lazy" /> +
+
+ {% render 'icon-3d-model' %} +
+
+ {%- else -%} +
+
+ {{ media | media_tag }} +
+
+ {%- endcase -%} + {%- endfor -%} +
+
+ {%- endif -%} +
+
+
+
+ {%- for block in section.blocks -%} + {%- liquid + assign spacing_top = block.settings.spacing_top + assign spacing_bottom = block.settings.spacing_bottom + -%} + {%- case block.type -%} + {%- when 'breadcrumb' -%} + {%- if breadcrumb_layout == 'content' -%} +
+ {% render 'breadcrumb', + alignment: breadcrumb_alignment + %} +
+ {%- endif -%} + {%- when 'vendor' -%} +
+ {% render 'product-vendor', + block: block, + product: product, + fontsize_text: fontsize_text, + color_title: color_title, + text_transform: text_transform + %} +
+ {%- when 'title' -%} + + {%- when 'meta' -%} + {%- liquid + assign show_review = block.settings.show_review + assign show_sold_in = block.settings.show_sold_in + assign sold_in_number = block.settings.sold_in_number + assign sold_in_hours = block.settings.sold_in_hours + assign color_text_sold_in = block.settings.color_text_sold_in + -%} + {%- if show_review or show_sold_in -%} +
+
+ {%- if show_review -%} + {% render 'product-rating', + product: product + %} + {%- endif -%} + {%- if show_sold_in -%} + {% render 'product-sold-in-last', + sold_in_number: sold_in_number, + sold_in_hours: sold_in_hours + %} + {%- endif -%} +
+
+ {%- endif -%} + {%- when 'short_description' -%} +
+ {% render 'product-short-description', + block: block, + product: product, + fontsize_text: fontsize_text, + color_text: color_text + %} +
+ {%- when 'variant_description' -%} +
+ {% render 'product-variant-description', + block: block, + product: product, + current_variant: current_variant + %} +
+ {%- when 'info' -%} + {%- liquid + assign show_vendor = block.settings.show_vendor + assign show_availability = block.settings.show_availability + assign show_sku = block.settings.show_sku + assign show_product_type = block.settings.show_product_type + assign stock_level_display = block.settings.stock_level_display + assign enable_border_top = block.settings.enable_border_top + assign enable_border_bottom = block.settings.enable_border_bottom + assign color_border = block.settings.color_border + -%} + {%- if show_vendor or show_availability or show_sku or show_product_type -%} +
+ {% render 'product-info', + product: product, + show_vendor: show_vendor, + show_availability: show_availability, + show_sku: show_sku, + current_variant: current_variant, + show_product_type: show_product_type, + stock_level_display: stock_level_display, + enable_border_top: enable_border_top, + enable_border_bottom: enable_border_bottom, + color_border: color_border + %} +
+ {%- endif -%} + {%- when 'price' -%} + {% assign fontsize_text = block.settings.fontsize_text %} +
+ {% if has_product_combo %} +
+ {%- if combo_discount_rate > 0 -%} + + {{ cart.total_price | money }} + + + {%- assign compensation = 1 | minus: combo_discount_rate -%} + {{ cart.total_price | times: compensation | money }} + + {%- endif -%} + +
+ {% else %} +
+ {%- render 'price', + product: product, + use_variant: true, + price_class: 'price--medium' + -%} +
+ {% endif %} +
+ {%- when 'countdown' -%} + {%- liquid + 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 + -%} + {%- if show_countdown -%} +
+ {% render 'product-countdown', + product: product, + countdown_type: countdown_type, + countdown_style: countdown_style, + countdown_time: countdown_time, + countdown_collection: countdown_collection + %} +
+ {%- endif -%} + {%- when 'variant_picker' -%} + {% unless has_product_combo %} +
+ {% render 'product-variant', + block: block, + product: product, + variantCount: variantCount, + current_variant: current_variant, + picker_type: picker_type + %} +
+ {% endunless %} + {%- when 'customization_property' -%} + {% if has_customization_option == true %} +
+ {% render 'product-customization', + block: block, + product: product, + customization_option_1: customization_option_1, + customization_option_2: customization_option_2, + customization_option_hidden: customization_option_hidden + %} +
+ {% endif %} + {%- when 'hot_stock' -%} + {% unless has_product_combo %} + {% render 'product-hot-stock', + block: block, + product: product, + variantCount: variantCount, + show_hot_stock: show_hot_stock, + productMaxStock: productMaxStock, + current_variant: current_variant + %} + {% endunless %} + {%- when 'perks' -%} + {% unless has_product_combo %} +
+ {% render 'product-perks', + product: product, + show_size_chart: show_size_chart, + has_size_chart: has_size_chart, + show_compare_color: show_compare_color, + isColor: isColor, + compare_layout: compare_layout + %} +
+ {% endunless %} + {%- when 'quantity_selector' -%} + {% unless has_product_combo %} + {%- if check_show_qty == 'show_qty_1' -%} +
+
+ {% render 'product-quantity', + current_variant: current_variant, + qty_style: qty_style, + check_hidden: false, + quantity_stt: 2 + %} +
+ {%- if show_subtotal and subtotal_style == '1' -%} +
+ {{ 'sections.cart.subtotal' | t | append: ': ' }} + {{ subtotal }} +
+ {%- endif -%} +
+ {%- endif -%} + {% endunless %} + {%- when 'buy_buttons' -%} + {% unless has_product_combo %} +
+ {% render 'product-button', + block: block, + product: product, + current_variant: current_variant, + check_show_share: check_show_share, + share_layout: check_show_share, + section: section, + check_show_qty: check_show_qty, + qty_style: qty_style, + show_subtotal_text: show_subtotal_text, + subtotal: subtotal, + subtotal_style: subtotal_style + %} +
+ {% endunless %} + {%- when 'customer_viewing' -%} +
+ {% render 'product-customer-viewing', + block: block + %} +
+ {%- when 'pickup_availability' -%} +
+ {%- liquid + assign show_pickup_availability = block.settings.show_pickup_availability + -%} + {%- if show_pickup_availability -%} + {% render 'product-pickup-availability', + product: product, + current_variant: current_variant + %} + {%- endif -%} +
+ {%- when 'share' -%} + {%- if check_show_share == '1' -%} +
+ {% render 'halo-share', + product: product, + share_layout: check_show_share + %} +
+ {%- endif -%} + {%- when 'trust_image' -%} + {%- liquid + assign show_trust_image = block.settings.show_trust_image + -%} + {%- if show_trust_image -%} +
+
+ {%- render 'halo-trust-image', + type: 'product' + -%} +
+
+ {%- endif -%} + {%- when 'product_text' -%} + {%- liquid + assign content_spacing = block.settings.content_spacing + assign custom_block_align = block.settings.custom_block_align + assign background_color_block = block.settings.background_color_block + assign background_gradient_color_block = block.settings.background_gradient_color_block + -%} +
+
+ {% render 'product-text', + block: block + %} +
+
+ {%- when 'custom_information' -%} +
+ {% render 'product-custom-information', + block: block + %} +
+ {%- when 'grouped_product' -%} + {%- if has_product_combo -%} +
+ {% render 'grouped-product', + block: block, + show_share: show_share + check_show_share: check_show_share, + share_layout: check_show_share, + picker_type: picker_type, + show_size_chart: show_size_chart, + has_size_chart: has_size_chart, + show_compare_color: show_compare_color, + isColor: isColor, + compare_layout: compare_layout, + has_perks: has_perks, + product_combo: product_combo, + combo_discount_rate: combo_discount_rate, + %} +
+ {%- endif -%} + {%- when 'custom_liquid' -%} + {{ block.settings.custom_liquid }} + {%- when 'complementary_products' -%} +
+ + {%- if recommendations.performed and recommendations.products_count > 0 -%} + {%- if complementary_product_title -%} +
+
+ + {{ complementary_product_title | escape }} + +
+
+ {%- endif -%} +
+
+ {%- if complementary_product_layout == "1" -%} + {%- for product in recommendations.products limit: limit -%} +
+ {% render 'product-grid-layout', + product_card_product: product, + media_size: image_ratio, + portrait_aspect_ratio: portrait_aspect_ratio, + serial: forloop.index, + sectionId: section.id, + show_list: true, + loading: true + %} +
+ {%- endfor -%} + {%- endif -%} + + {%- if complementary_product_layout == "2" -%} + {%- for product in recommendations.products limit: limit offset: continue -%} +
+ {% render 'product-card-custom', + product_card_product: product + %} +
+ {%- endfor -%} + {%- endif -%} +
+
+ {%- endif-%} + + +
+ {%- when '@app' -%} + {% render block %} + {%- endcase -%} + {%- endfor -%} + {%- if show_tab -%} + {%- if tab_layout == 'vertical' or tab_layout == 'vertical_sidebar' or tab_layout == 'popup' -%} + {% render 'halo-product-tab', + product: product, + section: section, + tab_layout: tab_layout, + tab_layout_mobile: tab_layout_mobile, + icon_style_layout: icon_style_layout + %} + {%- endif -%} + {%- endif -%} +
+
+
+
+ {%- if show_tab and tab_layout == 'horizontal' -%} + {% render 'halo-product-tab', + product: product, + section: section, + tab_layout: tab_layout, + tab_layout_mobile: tab_layout_mobile, + icon_style_layout: icon_style_layout + %} + {%- endif -%} +
+ {%- if has_sidebar -%} +
+ {% endif %} + {%- unless has_product_combo -%} + {%- if show_sticky_add_to_cart -%} + {{ 'component-sticky-add-to-cart.css' | asset_url | stylesheet_tag }} + {% render 'halo-sticky-add-to-cart', + product: product, + current_variant: current_variant, + variantCount: variantCount, + show_vendor: show_sticky_vendor, + sticky_atc_layout: sticky_atc_layout, + container: container, + show_qty: show_qty, + qty_style: qty_style, + subtotal: subtotal + %} + {%- endif -%} + {%- endunless -%} +
+
+ {% unless has_product_combo %} + {% render 'product-bundle' %} + {% endunless %} +
+ +{%- 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 -%} + + +{%- if show_sticky_add_to_cart -%} + +{%- endif -%} +{%- if first_3d_model -%} + + + +{%- endif -%} +{%- if main_image_show_custom_cursor -%} + +{%- endif -%} +{%- if product_image_popup == 'fancybox' -%} + +{%- endif -%} +{%- if zoomed_image and main_image_show_custom_cursor != true -%} + +{%- endif -%} + +{% render 'schema', + product: product +%} \ No newline at end of file diff --git a/snippets/product-page-left-right-sidebar.liquid b/snippets/product-page-left-right-sidebar.liquid new file mode 100644 index 0000000..5ff567f --- /dev/null +++ b/snippets/product-page-left-right-sidebar.liquid @@ -0,0 +1,1375 @@ +{%- liquid + assign container = section.settings.container + assign padding_full_width = section.settings.padding_full_width + assign show_sticky_info = section.settings.show_sticky_info + assign mg_top_desktop = section.settings.mg_top_desktop + assign mg_top_tablet = section.settings.mg_top_tablet + assign mg_top_mobile = section.settings.mg_top_mobile + assign mg_bottom_desktop = section.settings.mg_bottom_desktop + assign mg_bottom_tablet = section.settings.mg_bottom_tablet + assign mg_bottom_mobile = section.settings.mg_bottom_mobile + assign main_image_position = section.settings.main_image_position + assign main_image_show_custom_cursor = section.settings.main_image_show_custom_cursor + assign count_color = section.settings.count_color + assign icon_color = section.settings.icon_color + assign thumnail_layout = section.settings.thumnail_layout + assign main_image_arrows_desktop = section.settings.main_image_arrows_desktop + assign main_image_arrows_mobile = section.settings.main_image_arrows_mobile + assign main_image_counter_mobile = section.settings.main_image_counter_mobile + assign main_image_enable_parallax_mb = section.settings.main_image_enable_parallax_mb + assign main_image_show_zoom_icon_mb = section.settings.main_image_show_zoom_icon_mb + assign main_image_layout = section.settings.main_image_layout + assign show_thumbnail_mobile = section.settings.show_thumbnail_mobile + assign max_thumbnail_to_show = section.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 = section.settings.product_image_ratio + assign portrait_aspect_ratio = section.settings.portrait_aspect_ratio | append: '%' + assign zoomed_image = section.settings.zoomed_image + assign media_fit = section.settings.media_fit + assign product_image_popup = section.settings.product_image_popup + assign video_layout = section.settings.video_layout + assign show_badge = section.settings.show_badge + assign show_hot_stock = settings.show_hot_stock + if show_hot_stock + assign productMaxStock = settings.hot_stock_limit | plus: 0 + endif + assign show_qty = section.settings.show_qty + assign show_subtotal = section.settings.show_subtotal + assign subtotal_style = section.settings.subtotal_style + assign show_subtotal_text = false + assign subtotal = 0 + if show_subtotal + assign show_subtotal_text = 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_sticky_add_to_cart = section.settings.show_sticky_add_to_cart + assign sticky_atc_layout = section.settings.sticky_atc_layout + assign show_sticky_vendor = section.settings.show_sticky_vendor + assign show_tab = section.settings.show_tab + if show_tab + assign tab_layout = section.settings.tab_layout + assign tab_layout_mobile = section.settings.tab_layout_mobile + assign icon_style_layout = section.settings.icon_style_layout + assign title_font_size = section.settings.title_font_size + assign title_font_size_mb = section.settings.title_font_size_mb + assign font_weight_title = section.settings.font_weight_title + assign title_text_transform = section.settings.title_text_transform + assign title_padding_top_bottom = section.settings.title_padding_top_bottom + if section.blocks.size > 0 + assign show_tab = true + else + assign show_tab = false + endif + endif + assign first_3d_model = product.media | where: "media_type", "model" | first + assign has_product_combo = false + + assign has_sidebar = false + assign show_sidebar = section.settings.show_sidebar + assign sidebar_type = 'vertical' + assign sidebar_position = section.settings.sidebar_position + assign show_sidebar_collapse = section.settings.show_sidebar_collapse + assign sidebar_collapse_default = section.settings.sidebar_collapse_default + if show_sidebar + if sidebar_type == 'vertical' + if section.blocks.size > 0 + assign has_sidebar = true + endif + endif + endif + if has_sidebar + assign sidebar_heading_font = section.settings.sidebar_heading_font + assign sidebar_heading_font_size = section.settings.sidebar_heading_font_size + assign sidebar_heading_font_weight = section.settings.sidebar_heading_font_weight + assign sidebar_heading_text_transform = section.settings.sidebar_heading_text_transform + assign enable_sticky = section.settings.enable_sticky + assign sidebar_layout = section.settings.sidebar_layout + endif + assign has_breadcrumb = false + for block in section.blocks + case block.type + when 'breadcrumb' + assign breadcrumb_layout = block.settings.breadcrumb_layout + assign breadcrumb_alignment = block.settings.breadcrumb_alignment + assign breadcrumb_mg_top_desktop = block.settings.breadcrumb_mg_top_desktop + assign breadcrumb_mg_top_mobile = block.settings.breadcrumb_mg_top_mobile + assign breadcrumb_mg_bottom_desktop = block.settings.breadcrumb_mg_bottom_desktop + assign breadcrumb_mg_bottom_mobile = block.settings.breadcrumb_mg_bottom_mobile + assign breadcrumb_bg = block.settings.breadcrumb_bg + assign breadcrumb_gradient = block.settings.breadcrumb_gradient + assign breadcrumb_bg_mb = block.settings.breadcrumb_bg_mb + assign breadcrumb_gradient_mb = block.settings.breadcrumb_gradient_mb + + if breadcrumb_layout == 'full' + assign check_breadcrumb_full = true + else + assign check_breadcrumb_full = false + endif + assign has_breadcrumb = true + when 'title' + assign check_block_title = true + + when 'quantity_selector' + assign check_block_qty = true + assign qty_style = block.settings.qty_style + assign qty_layout = block.settings.qty_layout + + when 'perks' + assign has_perks = true + assign show_compare_color = block.settings.show_compare_color + if show_compare_color + assign show_compare_color_drop_drap = block.settings.show_compare_color_drop_drap + assign product_swatch_option = settings.swatch | downcase + assign compare_layout = block.settings.compare_layout + 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 + assign show_size_chart = block.settings.show_size_chart + if show_size_chart + assign has_size_chart = false + assign size_chart_type = block.settings.size_chart_type + if size_chart_type == 'product_type' or size_chart_type == 'product_vendor' + assign size_chart_image_type = block.settings.size_chart_image_type + elsif size_chart_type == 'custom_image' + assign size_chart_image = block.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 + when 'buy_buttons' + assign check_block_buttons = true + when 'share' + assign show_share = block.settings.show_share + assign share_layout = block.settings.share_layout + when 'variant_picker' + assign picker_type = block.settings.picker_type + assign show_variant_image_group = block.settings.show_variant_image_group + when 'grouped_product' + assign product_combo = product.metafields.c_f.product_combo + assign combo_discount_rate = product.metafields.c_f.combo_discount_rate | plus: 0 | divided_by: 100.00 + + if product_combo + assign has_product_combo = true + else + assign has_product_combo = false + endif + when 'complementary_products' + assign complementary_product_title = block.settings.complementary_product_title + assign complementary_product_arrows = block.settings.complementary_product_arrows + assign complementary_product_dots = block.settings.complementary_product_dots + assign complementary_product_layout = block.settings.complementary_product_layout + if complementary_product_layout == "1" + assign complementary_product_limit_1 = block.settings.complementary_product_limit_1 + endif + if complementary_product_layout == "2" + assign complementary_product_limit_2 = block.settings.complementary_product_limit_2 + assign complementary_product_object = block.settings.complementary_product_object + endif + endcase + endfor + + if show_qty + if check_block_qty + if check_block_buttons + if qty_layout == '1' + assign check_show_qty = 'show_qty_1' + elsif qty_layout == '2' + assign check_show_qty = 'show_qty_2' + endif + else + assign check_show_qty = 'show_qty_1' + endif + else + assign check_show_qty = 'show_qty_0' + endif + else + assign check_show_qty = 'show_qty_0' + endif + + if show_share + if check_block_title and check_block_buttons + assign check_show_share = share_layout + elsif check_block_title and check_block_buttons != true + if share_layout == '2' + assign check_show_share = '1' + else + assign check_show_share = share_layout + endif + elsif check_block_title != true and check_block_buttons + if share_layout == '3' + assign check_show_share = '1' + else + assign check_show_share = share_layout + endif + endif + 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 +-%} + +{%- if first_3d_model -%} + + + + +{%- endif -%} + + + +{%- if product_image_popup == 'fancybox' -%} + + +{%- endif -%} + +{%- if has_sidebar -%} + {{ 'component-main-sidebar.css' | asset_url | stylesheet_tag }} +{%- endif -%} + +
+ {%- if check_breadcrumb_full or has_sidebar -%} + {% if has_breadcrumb %} + {%- liquid + if breadcrumb_gradient != 'rgba(0,0,0,0)' or breadcrumb_bg != 'rgba(0,0,0,0)' or breadcrumb_gradient_mb != 'rgba(0,0,0,0)' or breadcrumb_bg_mb != 'rgba(0,0,0,0)' + assign breadcrumb_has_bg = true + else + assign breadcrumb_has_bg = false + endif + -%} +
+ {% if breadcrumb_has_bg %} +
+ {% endif %} +
+ {% if has_sidebar %} +
+
+
+ + {% render 'icon-sidebar' %} + +
+
+ {% endif %} + {% render 'breadcrumb', + alignment: breadcrumb_alignment + %} + {% if has_sidebar %} +
+ {% endif %} +
+ {% if breadcrumb_has_bg %} +
+ {% endif %} +
+ {% endif %} + {%- endif -%} +
+
+ {%- if has_sidebar -%} +
+ + + {% render 'icon-close' %} + +
+ + {{ 'sections.sidebar.title' | t }} + +
+
+ {% render 'sidebar', + results: collection, + section: section, + sidebar_type: sidebar_type, + show_collapse: show_sidebar_collapse, + sidebar_collapse: sidebar_collapse_default + %} +
+
+ {%- endif -%} + {%- if has_sidebar -%} +
+ {%- endif -%} +
+
+ {%- if main_image_show_custom_cursor -%} +
+
+
+ +
+
+
+ {%- endif -%} +
+
+ {%- if show_badge -%} + {% render 'product-badge', + product: product, + class: 'productView-badge', + badge_detail: true, + serial: 1 + %} + {%- endif -%} +
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'image' -%} +
+
+
+ {{ media.preview_image.alt | escape }} + {%- if settings.enable_lazyload and forloop.first == false -%}{%- endif -%} +
+
+
+ {%- when 'external_video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ {%- if media.host == 'youtube' -%} +
+ {{ media.alt | escape }} +
+
+
+
+ {%- else -%} +
+ {{ media.alt | escape }} +
+
+ {{ media | external_video_tag }} +
+ {%- endif -%} +
+
+ {%- endif -%} + {%- when 'video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+
+ {{ media.alt | escape }} +
+
+ {{ media | video_tag: controls: true, image_size: 'master' }} +
+
+
+ {%- endif -%} + {%- when 'model' -%} +
+ + + + + +
+ {%- else -%} +
+
+ {{ media | media_tag }} +
+
+ {%- endcase -%} + {%- endfor -%} +
+ {%- if video_layout == 'popup' -%} +
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'external_video' -%} + {%- if media.host == 'youtube' -%} + + {% render 'icon-video' %} + + {%- else -%} + + {% render 'icon-video' %} + + {%- endif -%} + {%- when 'video' -%} + ' | first | strip_html | remove: '">'}}" data-width="1200" data-height="675"> + {% render 'icon-video' %} + + {%- endcase -%} + {%- endfor -%} +
+ {%- endif -%} + {%- if main_image_show_zoom_icon_mb -%} +
+ {% render 'icon-zoom-1' %} +
+ {%- endif -%} + {%- if show_compare_color and isColor and compare_layout == '2' -%} +
+ +
+ {%- endif -%} +
+ {%- if thumnail_layout != '4' -%} +
+
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'image' -%} +
+ + {{ media.alt | escape }} + +
+ {%- when 'external_video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ {{ media.alt | escape }} +
+
+ {% render 'icon-video' %} +
+
+ {%- endif -%} + {%- when 'video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ ' | first }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}" loading="lazy" /> +
+
+ {% render 'icon-video' %} +
+
+ {%- endif -%} + {%- when 'model' -%} +
+
+ ' | first }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}" loading="lazy" /> +
+
+ {% render 'icon-3d-model' %} +
+
+ {%- else -%} +
+
+ {{ media | media_tag }} +
+
+ {%- endcase -%} + {%- endfor -%} +
+
+ {%- endif -%} +
+
+
+
+ {%- for block in section.blocks -%} + {%- liquid + assign spacing_top = block.settings.spacing_top + assign spacing_bottom = block.settings.spacing_bottom + -%} + {%- case block.type -%} + {%- when 'breadcrumb' -%} + {%- if breadcrumb_layout == 'content' -%} +
+ {% if has_sidebar %} +
+
+
+ + {% render 'icon-sidebar' %} + +
+
+ {% endif %} + {% render 'breadcrumb', + alignment: breadcrumb_alignment + %} + {% if has_sidebar %} +
+ {% endif %} +
+ {%- endif -%} + {%- when 'vendor' -%} +
+ {% render 'product-vendor', + block: block, + product: product, + fontsize_text: fontsize_text, + color_title: color_title, + text_transform: text_transform + %} +
+ {%- when 'title' -%} + + {%- when 'meta' -%} + {%- liquid + assign show_review = block.settings.show_review + assign show_sold_in = block.settings.show_sold_in + assign sold_in_number = block.settings.sold_in_number + assign sold_in_hours = block.settings.sold_in_hours + assign color_text_sold_in = block.settings.color_text_sold_in + -%} + {%- if show_review or show_sold_in -%} +
+
+ {%- if show_review -%} + {% render 'product-rating', + product: product + %} + {%- endif -%} + {%- if show_sold_in -%} + {% render 'product-sold-in-last', + sold_in_number: sold_in_number, + sold_in_hours: sold_in_hours + %} + {%- endif -%} +
+
+ {%- endif -%} + {%- when 'short_description' -%} +
+ {% render 'product-short-description', + block: block, + product: product, + fontsize_text: fontsize_text, + color_text: color_text + %} +
+ {%- when 'variant_description' -%} +
+ {% render 'product-variant-description', + block: block, + product: product, + current_variant: current_variant + %} +
+ {%- when 'info' -%} + {%- liquid + assign show_vendor = block.settings.show_vendor + assign show_availability = block.settings.show_availability + assign show_sku = block.settings.show_sku + assign show_product_type = block.settings.show_product_type + assign stock_level_display = block.settings.stock_level_display + assign enable_border_top = block.settings.enable_border_top + assign enable_border_bottom = block.settings.enable_border_bottom + assign color_border = block.settings.color_border + -%} + {%- if show_vendor or show_availability or show_sku or show_product_type -%} +
+ {% render 'product-info', + product: product, + show_vendor: show_vendor, + show_availability: show_availability, + current_variant: current_variant, + show_sku: show_sku, + show_product_type: show_product_type, + stock_level_display: stock_level_display, + enable_border_top: enable_border_top, + enable_border_bottom: enable_border_bottom, + color_border: color_border + %} +
+ {%- endif -%} + {%- when 'price' -%} + {% assign fontsize_text = block.settings.fontsize_text %} +
+ {% if has_product_combo %} +
+ {%- if combo_discount_rate > 0 -%} + + {{ cart.total_price | money }} + + + {%- assign compensation = 1 | minus: combo_discount_rate -%} + {{ cart.total_price | times: compensation | money }} + + {%- endif -%} + +
+ {% else %} +
+ {%- render 'price', + product: product, + use_variant: true, + price_class: 'price--medium' + -%} +
+ {% endif %} +
+ {%- when 'countdown' -%} + {%- liquid + 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 + -%} + {%- if show_countdown -%} +
+ {% render 'product-countdown', + product: product, + countdown_type: countdown_type, + countdown_style: countdown_style, + countdown_time: countdown_time, + countdown_collection: countdown_collection + %} +
+ {%- endif -%} + {%- when 'variant_picker' -%} + {% unless has_product_combo %} +
+ {% render 'product-variant', + block: block, + product: product, + variantCount: variantCount, + current_variant: current_variant, + picker_type: picker_type, + show_variant_image_group: show_variant_image_group + %} +
+ {% endunless %} + {%- when 'customization_property' -%} + {% if has_customization_option == true %} +
+ {% render 'product-customization', + block: block, + product: product, + customization_option_1: customization_option_1, + customization_option_2: customization_option_2, + customization_option_hidden: customization_option_hidden + %} +
+ {% endif %} + {%- when 'hot_stock' -%} + {% unless has_product_combo %} + {% render 'product-hot-stock', + block: block, + product: product, + variantCount: variantCount, + show_hot_stock: show_hot_stock, + productMaxStock: productMaxStock, + current_variant: current_variant + %} + {% endunless %} + {%- when 'perks' -%} + {% unless has_product_combo %} +
+ {% render 'product-perks', + product: product, + show_size_chart: show_size_chart, + has_size_chart: has_size_chart, + show_compare_color: show_compare_color, + isColor: isColor, + compare_layout: compare_layout + %} +
+ {% endunless %} + {%- when 'quantity_selector' -%} + {% unless has_product_combo %} + {%- if check_show_qty == 'show_qty_1' -%} +
+
+ {% render 'product-quantity', + current_variant: current_variant, + qty_style: qty_style, + check_hidden: false, + quantity_stt: 2 + %} +
+ {%- if show_subtotal and subtotal_style == '1' -%} +
+ {{ 'sections.cart.subtotal' | t | append: ': ' }} + {{ subtotal }} +
+ {%- endif -%} +
+ {%- endif -%} + {% endunless %} + {%- when 'buy_buttons' -%} + {% unless has_product_combo %} +
+ {% render 'product-button', + block: block, + product: product, + current_variant: current_variant, + check_show_share: check_show_share, + share_layout: check_show_share, + section: section, + check_show_qty: check_show_qty, + qty_style: qty_style, + show_subtotal_text: show_subtotal_text, + subtotal: subtotal, + subtotal_style: subtotal_style + %} +
+ {% endunless %} + {%- when 'customer_viewing' -%} +
+ {% render 'product-customer-viewing', + block: block + %} +
+ {%- when 'pickup_availability' -%} +
+ {%- liquid + assign show_pickup_availability = block.settings.show_pickup_availability + -%} + {%- if show_pickup_availability -%} + {% render 'product-pickup-availability', + product: product, + current_variant: current_variant + %} + {%- endif -%} +
+ {%- when 'share' -%} + {%- if check_show_share == '1' -%} +
+ {% render 'halo-share', + product: product, + share_layout: check_show_share + %} +
+ {%- endif -%} + {%- when 'trust_image' -%} + {%- liquid + assign show_trust_image = block.settings.show_trust_image + -%} + {%- if show_trust_image -%} +
+
+ {%- render 'halo-trust-image', + type: 'product' + -%} +
+
+ {%- endif -%} + {%- when 'product_text' -%} + {%- liquid + assign content_spacing = block.settings.content_spacing + assign custom_block_align = block.settings.custom_block_align + assign background_color_block = block.settings.background_color_block + assign background_gradient_color_block = block.settings.background_gradient_color_block + -%} +
+
+ {% render 'product-text', + block: block + %} +
+
+ {%- when 'custom_information' -%} +
+ {% render 'product-custom-information', + block: block + %} +
+ {%- when 'grouped_product' -%} + {%- if has_product_combo -%} +
+ {% render 'grouped-product', + block: block, + show_share: show_share + check_show_share: check_show_share, + share_layout: check_show_share, + picker_type: picker_type, + show_size_chart: show_size_chart, + has_size_chart: has_size_chart, + show_compare_color: show_compare_color, + isColor: isColor, + compare_layout: compare_layout, + has_perks: has_perks, + product_combo: product_combo + %} +
+ {%- endif -%} + {%- when 'custom_liquid' -%} + {{ block.settings.custom_liquid }} + {%- when 'complementary_products' -%} +
+ + {%- if recommendations.performed and recommendations.products_count > 0 -%} + {%- if complementary_product_title -%} +
+
+ + {{ complementary_product_title | escape }} + +
+
+ {%- endif -%} +
+
+ {%- if complementary_product_layout == "1" -%} + {%- for product in recommendations.products limit: limit -%} +
+ {% render 'product-grid-layout', + product_card_product: product, + media_size: image_ratio, + portrait_aspect_ratio: portrait_aspect_ratio, + serial: forloop.index, + sectionId: section.id, + show_list: true, + loading: true + %} +
+ {%- endfor -%} + {%- endif -%} + + {%- if complementary_product_layout == "2" -%} + {%- for product in recommendations.products limit: limit offset: continue -%} +
+ {% render 'product-card-custom', + product_card_product: product + %} +
+ {%- endfor -%} + {%- endif -%} +
+
+ {%- endif-%} + + +
+ {%- when '@app' -%} + {% render block %} + {%- endcase -%} + {%- endfor -%} + {%- if show_tab -%} + {%- if tab_layout == 'vertical' or tab_layout == 'vertical_sidebar' or tab_layout == 'popup' -%} + {% render 'halo-product-tab', + product: product, + section: section, + tab_layout: tab_layout, + tab_layout_mobile: tab_layout_mobile, + icon_style_layout: icon_style_layout + %} + {%- endif -%} + {%- endif -%} +
+
+
+ {%- if has_sidebar -%} +
+ {% endif %} + {%- unless has_product_combo -%} + {%- if show_sticky_add_to_cart -%} + {{ 'component-sticky-add-to-cart.css' | asset_url | stylesheet_tag }} + {% render 'halo-sticky-add-to-cart', + product: product, + current_variant: current_variant, + variantCount: variantCount, + show_vendor: show_sticky_vendor, + sticky_atc_layout: sticky_atc_layout, + container: container, + show_qty: show_qty, + qty_style: qty_style, + subtotal: subtotal + %} + {% comment %} {% render 'halo-sticky-add-to-cart-mobile', + product: product, + current_variant: current_variant, + variantCount: variantCount, + show_vendor: show_sticky_vendor, + sticky_atc_layout: sticky_atc_layout, + container: container, + show_qty: show_qty, + qty_style: qty_style, + subtotal: subtotal + %} {% endcomment %} + {%- endif -%} + {%- endunless -%} +
+
+ {% unless has_product_combo %} + {% render 'product-bundle' %} + {% endunless %} +
+
+ {%- if show_tab and tab_layout == 'horizontal' -%} + {% render 'halo-product-tab', + product: product, + section: section, + tab_layout: tab_layout, + tab_layout_mobile: tab_layout_mobile, + icon_style_layout: icon_style_layout + %} + {%- endif -%} +
+
+
+ +{%- 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 -%} + + +{%- if show_sticky_add_to_cart -%} + +{%- endif -%} +{%- if first_3d_model -%} + + + +{%- endif -%} +{%- if main_image_show_custom_cursor -%} + +{%- endif -%} +{%- if product_image_popup == 'fancybox' -%} + +{%- endif -%} +{%- if zoomed_image and main_image_show_custom_cursor != true -%} + +{%- endif -%} + +{% render 'schema', + product: product +%} \ No newline at end of file diff --git a/snippets/product-page-left-thumbs.liquid b/snippets/product-page-left-thumbs.liquid new file mode 100644 index 0000000..e0bf28d --- /dev/null +++ b/snippets/product-page-left-thumbs.liquid @@ -0,0 +1,1352 @@ +{%- liquid + assign container = section.settings.container + assign padding_full_width = section.settings.padding_full_width + assign show_sticky_info = section.settings.show_sticky_info + assign mg_top_desktop = section.settings.mg_top_desktop + assign mg_top_tablet = section.settings.mg_top_tablet + assign mg_top_mobile = section.settings.mg_top_mobile + assign mg_bottom_desktop = section.settings.mg_bottom_desktop + assign mg_bottom_tablet = section.settings.mg_bottom_tablet + assign mg_bottom_mobile = section.settings.mg_bottom_mobile + assign main_image_position = section.settings.main_image_position + assign main_image_show_custom_cursor = section.settings.main_image_show_custom_cursor + assign count_color = section.settings.count_color + assign icon_color = section.settings.icon_color + assign thumnail_layout = section.settings.thumnail_layout + assign main_image_arrows_desktop = section.settings.main_image_arrows_desktop + assign main_image_arrows_mobile = section.settings.main_image_arrows_mobile + assign main_image_counter_mobile = section.settings.main_image_counter_mobile + assign main_image_enable_parallax_mb = section.settings.main_image_enable_parallax_mb + assign main_image_show_zoom_icon_mb = section.settings.main_image_show_zoom_icon_mb + assign main_image_layout = section.settings.main_image_layout + assign show_thumbnail_mobile = section.settings.show_thumbnail_mobile + assign max_thumbnail_to_show = section.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 = section.settings.product_image_ratio + assign portrait_aspect_ratio = section.settings.portrait_aspect_ratio | append: '%' + assign zoomed_image = section.settings.zoomed_image + assign media_fit = section.settings.media_fit + assign product_image_popup = section.settings.product_image_popup + assign video_layout = section.settings.video_layout + assign show_badge = section.settings.show_badge + assign show_hot_stock = settings.show_hot_stock + if show_hot_stock + assign productMaxStock = settings.hot_stock_limit | plus: 0 + endif + assign show_qty = section.settings.show_qty + assign show_subtotal = section.settings.show_subtotal + assign subtotal_style = section.settings.subtotal_style + assign show_subtotal_text = false + assign subtotal = 0 + if show_subtotal + assign show_subtotal_text = 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_sticky_add_to_cart = section.settings.show_sticky_add_to_cart + assign sticky_atc_layout = section.settings.sticky_atc_layout + assign show_sticky_vendor = section.settings.show_sticky_vendor + assign show_tab = section.settings.show_tab + if show_tab + assign tab_layout = section.settings.tab_layout + assign tab_layout_mobile = section.settings.tab_layout_mobile + assign icon_style_layout = section.settings.icon_style_layout + assign title_font_size = section.settings.title_font_size + assign title_font_size_mb = section.settings.title_font_size_mb + assign font_weight_title = section.settings.font_weight_title + assign title_text_transform = section.settings.title_text_transform + assign title_padding_top_bottom = section.settings.title_padding_top_bottom + if section.blocks.size > 0 + assign show_tab = true + else + assign show_tab = false + endif + endif + assign first_3d_model = product.media | where: "media_type", "model" | first + assign has_product_combo = false + + assign has_sidebar = false + assign show_sidebar = section.settings.show_sidebar + assign sidebar_type = 'vertical' + assign sidebar_position = section.settings.sidebar_position + assign show_sidebar_collapse = section.settings.show_sidebar_collapse + assign sidebar_collapse_default = section.settings.sidebar_collapse_default + if show_sidebar + if sidebar_type == 'vertical' + if section.blocks.size > 0 + assign has_sidebar = true + endif + endif + endif + if has_sidebar + assign sidebar_heading_font = section.settings.sidebar_heading_font + assign sidebar_heading_font_size = section.settings.sidebar_heading_font_size + assign sidebar_heading_font_weight = section.settings.sidebar_heading_font_weight + assign sidebar_heading_text_transform = section.settings.sidebar_heading_text_transform + assign enable_sticky = section.settings.enable_sticky + assign sidebar_layout = section.settings.sidebar_layout + endif + assign has_breadcrumb = false + for block in section.blocks + case block.type + when 'breadcrumb' + assign breadcrumb_layout = block.settings.breadcrumb_layout + assign breadcrumb_alignment = block.settings.breadcrumb_alignment + assign breadcrumb_mg_top_desktop = block.settings.breadcrumb_mg_top_desktop + assign breadcrumb_mg_top_mobile = block.settings.breadcrumb_mg_top_mobile + assign breadcrumb_mg_bottom_desktop = block.settings.breadcrumb_mg_bottom_desktop + assign breadcrumb_mg_bottom_mobile = block.settings.breadcrumb_mg_bottom_mobile + assign breadcrumb_bg = block.settings.breadcrumb_bg + assign breadcrumb_gradient = block.settings.breadcrumb_gradient + assign breadcrumb_bg_mb = block.settings.breadcrumb_bg_mb + assign breadcrumb_gradient_mb = block.settings.breadcrumb_gradient_mb + + if breadcrumb_layout == 'full' + assign check_breadcrumb_full = true + else + assign check_breadcrumb_full = false + endif + assign has_breadcrumb = true + when 'title' + assign check_block_title = true + + when 'quantity_selector' + assign check_block_qty = true + assign qty_style = block.settings.qty_style + assign qty_layout = block.settings.qty_layout + + when 'perks' + assign has_perks = true + assign show_compare_color = block.settings.show_compare_color + if show_compare_color + assign show_compare_color_drop_drap = block.settings.show_compare_color_drop_drap + assign product_swatch_option = settings.swatch | downcase + assign compare_layout = block.settings.compare_layout + 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 + assign show_size_chart = block.settings.show_size_chart + if show_size_chart + assign has_size_chart = false + assign size_chart_type = block.settings.size_chart_type + if size_chart_type == 'product_type' or size_chart_type == 'product_vendor' + assign size_chart_image_type = block.settings.size_chart_image_type + elsif size_chart_type == 'custom_image' + assign size_chart_image = block.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 + when 'buy_buttons' + assign check_block_buttons = true + when 'share' + assign show_share = block.settings.show_share + assign share_layout = block.settings.share_layout + when 'variant_picker' + assign picker_type = block.settings.picker_type + assign show_variant_image_group = block.settings.show_variant_image_group + when 'grouped_product' + assign product_combo = product.metafields.c_f.product_combo + assign combo_discount_rate = product.metafields.c_f.combo_discount_rate | plus: 0 | divided_by: 100.00 + + if product_combo + assign has_product_combo = true + else + assign has_product_combo = false + endif + when 'complementary_products' + assign complementary_product_title = block.settings.complementary_product_title + assign complementary_product_arrows = block.settings.complementary_product_arrows + assign complementary_product_dots = block.settings.complementary_product_dots + assign complementary_product_layout = block.settings.complementary_product_layout + if complementary_product_layout == "1" + assign complementary_product_limit_1 = block.settings.complementary_product_limit_1 + endif + if complementary_product_layout == "2" + assign complementary_product_limit_2 = block.settings.complementary_product_limit_2 + assign complementary_product_object = block.settings.complementary_product_object + endif + endcase + endfor + + if show_qty + if check_block_qty + if check_block_buttons + if qty_layout == '1' + assign check_show_qty = 'show_qty_1' + elsif qty_layout == '2' + assign check_show_qty = 'show_qty_2' + endif + else + assign check_show_qty = 'show_qty_1' + endif + else + assign check_show_qty = 'show_qty_0' + endif + else + assign check_show_qty = 'show_qty_0' + endif + + if show_share + if check_block_title and check_block_buttons + assign check_show_share = share_layout + elsif check_block_title and check_block_buttons != true + if share_layout == '2' + assign check_show_share = '1' + else + assign check_show_share = share_layout + endif + elsif check_block_title != true and check_block_buttons + if share_layout == '3' + assign check_show_share = '1' + else + assign check_show_share = share_layout + endif + endif + 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 +-%} + +{%- if first_3d_model -%} + + + + +{%- endif -%} + + + +{%- if product_image_popup == 'fancybox' -%} + + +{%- endif -%} +
+ {% if has_breadcrumb %} + {%- liquid + if breadcrumb_gradient != 'rgba(0,0,0,0)' or breadcrumb_bg != 'rgba(0,0,0,0)' or breadcrumb_gradient_mb != 'rgba(0,0,0,0)' or breadcrumb_bg_mb != 'rgba(0,0,0,0)' + assign breadcrumb_has_bg = true + else + assign breadcrumb_has_bg = false + endif + -%} +
+ {% if breadcrumb_has_bg %} +
+ {% endif %} +
+ {% render 'breadcrumb', + alignment: breadcrumb_alignment + %} +
+ {% if breadcrumb_has_bg %} +
+ {% endif %} +
+ {% endif %} +
+
+ {%- if has_sidebar -%} + {{ 'component-main-sidebar.css' | asset_url | stylesheet_tag }} +
+
+ + {% render 'icon-sidebar' %} + +
+
+
+ + + {% render 'icon-close' %} + +
+ + {{ 'sections.sidebar.title' | t }} + +
+
+ {% render 'sidebar', + results: collection, + section: section, + sidebar_type: sidebar_type, + show_collapse: show_sidebar_collapse, + sidebar_collapse: sidebar_collapse_default + %} +
+
+ {%- endif -%} + {%- if has_sidebar -%} +
+ {%- endif -%} +
+
+ {%- if main_image_show_custom_cursor -%} +
+
+
+ +
+
+
+ {%- endif -%} +
+
+ {%- if show_badge -%} + {% render 'product-badge', + product: product, + class: 'productView-badge', + badge_detail: true, + serial: 1 + %} + {%- endif -%} +
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'image' -%} +
+
+
+ {{ media.preview_image.alt | escape }} +
+
+
+ {%- when 'external_video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ {%- if media.host == 'youtube' -%} +
+ {{ media.alt | escape }} +
+
+
+
+ {%- else -%} +
+ {{ media.alt | escape }} +
+
+ {{ media | external_video_tag }} +
+ {%- endif -%} +
+
+ {%- endif -%} + {%- when 'video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+
+ {{ media.alt | escape }} +
+
+ {{ media | video_tag: controls: true, image_size: 'master' }} +
+
+
+ {%- endif -%} + {%- when 'model' -%} +
+ + + + + +
+ {%- else -%} +
+
+ {{ media | media_tag }} +
+
+ {%- endcase -%} + {%- endfor -%} +
+ {%- if video_layout == 'popup' -%} +
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'external_video' -%} + {%- if media.host == 'youtube' -%} + + {% render 'icon-video' %} + + {%- else -%} + + {% render 'icon-video' %} + + {%- endif -%} + {%- when 'video' -%} + ' | first | strip_html | remove: '">'}}" data-width="1200" data-height="675"> + {% render 'icon-video' %} + + {%- endcase -%} + {%- endfor -%} +
+ {%- endif -%} + {%- if main_image_show_zoom_icon_mb -%} +
+ {% render 'icon-zoom-1' %} +
+ {%- endif -%} + {%- if show_compare_color and isColor and compare_layout == '2' -%} +
+ +
+ {%- endif -%} +
+ {%- if thumnail_layout != '4' -%} +
+
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'image' -%} +
+ + {{ media.alt | escape }} + +
+ {%- when 'external_video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ {{ media.alt | escape }} +
+
+ {% render 'icon-video' %} +
+
+ {%- endif -%} + {%- when 'video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ ' | first }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}" loading="lazy" /> +
+
+ {% render 'icon-video' %} +
+
+ {%- endif -%} + {%- when 'model' -%} +
+
+ ' | first }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}" loading="lazy" /> +
+
+ {% render 'icon-3d-model' %} +
+
+ {%- else -%} +
+
+ {{ media | media_tag }} +
+
+ {%- endcase -%} + {%- endfor -%} +
+
+ {%- endif -%} +
+
+
+
+ {%- for block in section.blocks -%} + {%- liquid + assign spacing_top = block.settings.spacing_top + assign spacing_bottom = block.settings.spacing_bottom + -%} + {%- case block.type -%} + {%- when 'breadcrumb' -%} + {%- if breadcrumb_layout == 'content' -%} +
+ {% render 'breadcrumb', + alignment: breadcrumb_alignment + %} +
+ {%- endif -%} + {%- when 'vendor' -%} +
+ {% render 'product-vendor', + block: block, + product: product, + fontsize_text: fontsize_text, + color_title: color_title, + text_transform: text_transform + %} +
+ {%- when 'title' -%} + + {%- when 'meta' -%} + {%- liquid + assign show_review = block.settings.show_review + assign show_sold_in = block.settings.show_sold_in + assign sold_in_number = block.settings.sold_in_number + assign sold_in_hours = block.settings.sold_in_hours + assign color_text_sold_in = block.settings.color_text_sold_in + -%} + {%- if show_review or show_sold_in -%} +
+
+ {%- if show_review -%} + {% render 'product-rating', + product: product + %} + {%- endif -%} + {%- if show_sold_in -%} + {% render 'product-sold-in-last', + sold_in_number: sold_in_number, + sold_in_hours: sold_in_hours + %} + {%- endif -%} +
+
+ {%- endif -%} + {%- when 'short_description' -%} +
+ {% render 'product-short-description', + block: block, + product: product, + fontsize_text: fontsize_text, + color_text: color_text + %} +
+ {%- when 'variant_description' -%} +
+ {% render 'product-variant-description', + block: block, + product: product, + current_variant: current_variant + %} +
+ {%- when 'info' -%} + {%- liquid + assign show_vendor = block.settings.show_vendor + assign show_availability = block.settings.show_availability + assign show_sku = block.settings.show_sku + assign show_product_type = block.settings.show_product_type + assign stock_level_display = block.settings.stock_level_display + assign enable_border_top = block.settings.enable_border_top + assign enable_border_bottom = block.settings.enable_border_bottom + assign color_border = block.settings.color_border + -%} + {%- if show_vendor or show_availability or show_sku or show_product_type -%} +
+ {% render 'product-info', + product: product, + show_vendor: show_vendor, + show_availability: show_availability, + show_sku: show_sku, + current_variant: current_variant, + show_product_type: show_product_type, + stock_level_display: stock_level_display, + enable_border_top: enable_border_top, + enable_border_bottom: enable_border_bottom, + color_border: color_border + %} +
+ {%- endif -%} + {%- when 'price' -%} + {% assign fontsize_text = block.settings.fontsize_text %} +
+ {% if has_product_combo %} +
+ {%- if combo_discount_rate > 0 -%} + + {{ cart.total_price | money }} + + + {%- assign compensation = 1 | minus: combo_discount_rate -%} + {{ cart.total_price | times: compensation | money }} + + {%- endif -%} + +
+ {% else %} +
+ {%- render 'price', + product: product, + use_variant: true, + price_class: 'price--medium' + -%} +
+ {% endif %} +
+ {%- when 'countdown' -%} + {%- liquid + 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 + -%} + {%- if show_countdown -%} +
+ {% render 'product-countdown', + product: product, + countdown_type: countdown_type, + countdown_style: countdown_style, + countdown_time: countdown_time, + countdown_collection: countdown_collection + %} +
+ {%- endif -%} + {%- when 'variant_picker' -%} + {% unless has_product_combo %} +
+ {% render 'product-variant', + block: block, + product: product, + variantCount: variantCount, + current_variant: current_variant, + picker_type: picker_type, + show_variant_image_group: show_variant_image_group + %} +
+ {% endunless %} + {%- when 'customization_property' -%} + {% if has_customization_option == true %} +
+ {% render 'product-customization', + block: block, + product: product, + customization_option_1: customization_option_1, + customization_option_2: customization_option_2, + customization_option_hidden: customization_option_hidden + %} +
+ {% endif %} + {%- when 'hot_stock' -%} + {% unless has_product_combo %} + {% render 'product-hot-stock', + block: block, + product: product, + variantCount: variantCount, + show_hot_stock: show_hot_stock, + productMaxStock: productMaxStock, + current_variant: current_variant + %} + {% endunless %} + {%- when 'perks' -%} + {% unless has_product_combo %} +
+ {% render 'product-perks', + product: product, + show_size_chart: show_size_chart, + has_size_chart: has_size_chart, + show_compare_color: show_compare_color, + isColor: isColor, + compare_layout: compare_layout + %} +
+ {% endunless %} + {%- when 'quantity_selector' -%} + {% unless has_product_combo %} + {%- if check_show_qty == 'show_qty_1' -%} +
+
+ {% render 'product-quantity', + current_variant: current_variant, + qty_style: qty_style, + check_hidden: false, + quantity_stt: 2 + %} +
+ {%- if show_subtotal and subtotal_style == '1' -%} +
+ {{ 'sections.cart.subtotal' | t | append: ': ' }} + {{ subtotal }} +
+ {%- endif -%} +
+ {%- endif -%} + {% endunless %} + {%- when 'buy_buttons' -%} + {% unless has_product_combo %} +
+ {% render 'product-button', + block: block, + product: product, + current_variant: current_variant, + check_show_share: check_show_share, + share_layout: check_show_share, + section: section, + check_show_qty: check_show_qty, + qty_style: qty_style, + show_subtotal_text: show_subtotal_text, + subtotal: subtotal, + subtotal_style: subtotal_style + %} +
+ {% endunless %} + {%- when 'customer_viewing' -%} +
+ {% render 'product-customer-viewing', + block: block + %} +
+ {%- when 'pickup_availability' -%} +
+ {%- liquid + assign show_pickup_availability = block.settings.show_pickup_availability + -%} + {%- if show_pickup_availability -%} + {% render 'product-pickup-availability', + product: product, + current_variant: current_variant + %} + {%- endif -%} +
+ {%- when 'share' -%} + {%- if check_show_share == '1' -%} +
+ {% render 'halo-share', + product: product, + share_layout: check_show_share + %} +
+ {%- endif -%} + {%- when 'trust_image' -%} + {%- liquid + assign show_trust_image = block.settings.show_trust_image + -%} + {%- if show_trust_image -%} +
+
+ {%- render 'halo-trust-image', + type: 'product' + -%} +
+
+ {%- endif -%} + {%- when 'product_text' -%} + {%- liquid + assign content_spacing = block.settings.content_spacing + assign custom_block_align = block.settings.custom_block_align + assign background_color_block = block.settings.background_color_block + assign background_gradient_color_block = block.settings.background_gradient_color_block + -%} +
+
+ {% render 'product-text', + block: block + %} +
+
+ {%- when 'custom_information' -%} +
+ {% render 'product-custom-information', + block: block + %} +
+ {%- when 'grouped_product' -%} + {%- if has_product_combo -%} +
+ {% render 'grouped-product', + block: block, + show_share: show_share + check_show_share: check_show_share, + share_layout: check_show_share, + picker_type: picker_type, + show_size_chart: show_size_chart, + has_size_chart: has_size_chart, + show_compare_color: show_compare_color, + isColor: isColor, + compare_layout: compare_layout, + has_perks: has_perks, + product_combo: product_combo + %} +
+ {%- endif -%} + {%- when 'custom_liquid' -%} + {{ block.settings.custom_liquid }} + {%- when 'complementary_products' -%} +
+ + {%- if recommendations.performed and recommendations.products_count > 0 -%} + {%- if complementary_product_title -%} +
+
+ + {{ complementary_product_title | escape }} + +
+
+ {%- endif -%} +
+
+ {%- if complementary_product_layout == "1" -%} + {%- for product in recommendations.products limit: limit -%} +
+ {% render 'product-grid-layout', + product_card_product: product, + media_size: image_ratio, + portrait_aspect_ratio: portrait_aspect_ratio, + serial: forloop.index, + sectionId: section.id, + show_list: true, + loading: true + %} +
+ {%- endfor -%} + {%- endif -%} + + {%- if complementary_product_layout == "2" -%} + {%- for product in recommendations.products limit: limit offset: continue -%} +
+ {% render 'product-card-custom', + product_card_product: product + %} +
+ {%- endfor -%} + {%- endif -%} +
+
+ {%- endif-%} + + +
+ {%- when '@app' -%} + {% render block %} + {%- endcase -%} + {%- endfor -%} + {%- if show_tab -%} + {%- if tab_layout == 'vertical' or tab_layout == 'vertical_sidebar' or tab_layout == 'popup' -%} + {% render 'halo-product-tab', + product: product, + section: section, + tab_layout: tab_layout, + tab_layout_mobile: tab_layout_mobile, + icon_style_layout: icon_style_layout + %} + {%- endif -%} + {%- endif -%} +
+
+
+ {%- if has_sidebar -%} +
+ {% endif %} + {%- unless has_product_combo -%} + {%- if show_sticky_add_to_cart -%} + {{ 'component-sticky-add-to-cart.css' | asset_url | stylesheet_tag }} + {% render 'halo-sticky-add-to-cart', + product: product, + current_variant: current_variant, + variantCount: variantCount, + show_vendor: show_sticky_vendor, + sticky_atc_layout: sticky_atc_layout, + container: container, + show_qty: show_qty, + qty_style: qty_style, + subtotal: subtotal + %} + {% comment %} {% render 'halo-sticky-add-to-cart-mobile', + product: product, + current_variant: current_variant, + variantCount: variantCount, + show_vendor: show_sticky_vendor, + sticky_atc_layout: sticky_atc_layout, + container: container, + show_qty: show_qty, + qty_style: qty_style, + subtotal: subtotal + %} {% endcomment %} + {%- endif -%} + {%- endunless -%} +
+
+ {% unless has_product_combo %} + {% render 'product-bundle' %} + {% endunless %} +
+
+ {%- if show_tab and tab_layout == 'horizontal' -%} + {% render 'halo-product-tab', + product: product, + section: section, + tab_layout: tab_layout, + tab_layout_mobile: tab_layout_mobile, + icon_style_layout: icon_style_layout + %} + {%- endif -%} +
+
+
+ +{%- 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 -%} + + +{%- if show_sticky_add_to_cart -%} + +{%- endif -%} +{%- if first_3d_model -%} + + + +{%- endif -%} +{%- if main_image_show_custom_cursor -%} + +{%- endif -%} +{%- if product_image_popup == 'fancybox' -%} + +{%- endif -%} +{%- if zoomed_image and main_image_show_custom_cursor != true -%} + +{%- endif -%} + +{% render 'schema', + product: product +%} \ No newline at end of file diff --git a/snippets/product-page-right-thumbs.liquid b/snippets/product-page-right-thumbs.liquid new file mode 100644 index 0000000..0983eee --- /dev/null +++ b/snippets/product-page-right-thumbs.liquid @@ -0,0 +1,1341 @@ +{%- liquid + assign container = section.settings.container + assign padding_full_width = section.settings.padding_full_width + assign show_sticky_info = section.settings.show_sticky_info + assign mg_top_desktop = section.settings.mg_top_desktop + assign mg_top_tablet = section.settings.mg_top_tablet + assign mg_top_mobile = section.settings.mg_top_mobile + assign mg_bottom_desktop = section.settings.mg_bottom_desktop + assign mg_bottom_tablet = section.settings.mg_bottom_tablet + assign mg_bottom_mobile = section.settings.mg_bottom_mobile + assign main_image_position = section.settings.main_image_position + assign main_image_show_custom_cursor = section.settings.main_image_show_custom_cursor + assign count_color = section.settings.count_color + assign icon_color = section.settings.icon_color + assign thumnail_layout = section.settings.thumnail_layout + assign main_image_arrows_desktop = section.settings.main_image_arrows_desktop + assign main_image_arrows_mobile = section.settings.main_image_arrows_mobile + assign main_image_counter_mobile = section.settings.main_image_counter_mobile + assign main_image_enable_parallax_mb = section.settings.main_image_enable_parallax_mb + assign main_image_show_zoom_icon_mb = section.settings.main_image_show_zoom_icon_mb + assign main_image_layout = section.settings.main_image_layout + assign show_thumbnail_mobile = section.settings.show_thumbnail_mobile + assign max_thumbnail_to_show = section.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 = section.settings.product_image_ratio + assign portrait_aspect_ratio = section.settings.portrait_aspect_ratio | append: '%' + assign zoomed_image = section.settings.zoomed_image + assign media_fit = section.settings.media_fit + assign product_image_popup = section.settings.product_image_popup + assign video_layout = section.settings.video_layout + assign show_badge = section.settings.show_badge + assign show_hot_stock = settings.show_hot_stock + if show_hot_stock + assign productMaxStock = settings.hot_stock_limit | plus: 0 + endif + assign show_qty = section.settings.show_qty + assign show_subtotal = section.settings.show_subtotal + assign subtotal_style = section.settings.subtotal_style + assign show_subtotal_text = false + assign subtotal = 0 + if show_subtotal + assign show_subtotal_text = 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_sticky_add_to_cart = section.settings.show_sticky_add_to_cart + assign sticky_atc_layout = section.settings.sticky_atc_layout + assign show_sticky_vendor = section.settings.show_sticky_vendor + assign show_tab = section.settings.show_tab + if show_tab + assign tab_layout = section.settings.tab_layout + assign tab_layout_mobile = section.settings.tab_layout_mobile + assign icon_style_layout = section.settings.icon_style_layout + assign title_font_size = section.settings.title_font_size + assign title_font_size_mb = section.settings.title_font_size_mb + assign font_weight_title = section.settings.font_weight_title + assign title_text_transform = section.settings.title_text_transform + assign title_padding_top_bottom = section.settings.title_padding_top_bottom + if section.blocks.size > 0 + assign show_tab = true + else + assign show_tab = false + endif + endif + assign first_3d_model = product.media | where: "media_type", "model" | first + assign has_product_combo = false + + assign has_sidebar = false + assign show_sidebar = section.settings.show_sidebar + assign sidebar_type = 'vertical' + assign sidebar_position = section.settings.sidebar_position + assign show_sidebar_collapse = section.settings.show_sidebar_collapse + assign sidebar_collapse_default = section.settings.sidebar_collapse_default + if show_sidebar + if sidebar_type == 'vertical' + if section.blocks.size > 0 + assign has_sidebar = true + endif + endif + endif + if has_sidebar + assign sidebar_heading_font = section.settings.sidebar_heading_font + assign sidebar_heading_font_size = section.settings.sidebar_heading_font_size + assign sidebar_heading_font_weight = section.settings.sidebar_heading_font_weight + assign sidebar_heading_text_transform = section.settings.sidebar_heading_text_transform + assign enable_sticky = section.settings.enable_sticky + assign sidebar_layout = section.settings.sidebar_layout + endif + assign has_breadcrumb = false + for block in section.blocks + case block.type + when 'breadcrumb' + assign breadcrumb_layout = block.settings.breadcrumb_layout + assign breadcrumb_alignment = block.settings.breadcrumb_alignment + assign breadcrumb_mg_top_desktop = block.settings.breadcrumb_mg_top_desktop + assign breadcrumb_mg_top_mobile = block.settings.breadcrumb_mg_top_mobile + assign breadcrumb_mg_bottom_desktop = block.settings.breadcrumb_mg_bottom_desktop + assign breadcrumb_mg_bottom_mobile = block.settings.breadcrumb_mg_bottom_mobile + assign breadcrumb_bg = block.settings.breadcrumb_bg + assign breadcrumb_gradient = block.settings.breadcrumb_gradient + assign breadcrumb_bg_mb = block.settings.breadcrumb_bg_mb + assign breadcrumb_gradient_mb = block.settings.breadcrumb_gradient_mb + + if breadcrumb_layout == 'full' + assign check_breadcrumb_full = true + else + assign check_breadcrumb_full = false + endif + assign has_breadcrumb = true + when 'title' + assign check_block_title = true + + when 'quantity_selector' + assign check_block_qty = true + assign qty_style = block.settings.qty_style + assign qty_layout = block.settings.qty_layout + + when 'perks' + assign has_perks = true + assign show_compare_color = block.settings.show_compare_color + if show_compare_color + assign show_compare_color_drop_drap = block.settings.show_compare_color_drop_drap + assign product_swatch_option = settings.swatch | downcase + assign compare_layout = block.settings.compare_layout + 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 + assign show_size_chart = block.settings.show_size_chart + if show_size_chart + assign has_size_chart = false + assign size_chart_type = block.settings.size_chart_type + if size_chart_type == 'product_type' or size_chart_type == 'product_vendor' + assign size_chart_image_type = block.settings.size_chart_image_type + elsif size_chart_type == 'custom_image' + assign size_chart_image = block.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 + when 'buy_buttons' + assign check_block_buttons = true + when 'share' + assign show_share = block.settings.show_share + assign share_layout = block.settings.share_layout + when 'variant_picker' + assign picker_type = block.settings.picker_type + assign show_variant_image_group = block.settings.show_variant_image_group + when 'grouped_product' + assign product_combo = product.metafields.c_f.product_combo + assign combo_discount_rate = product.metafields.c_f.combo_discount_rate | plus: 0 | divided_by: 100.00 + + if product_combo + assign has_product_combo = true + else + assign has_product_combo = false + endif + when 'complementary_products' + assign complementary_product_title = block.settings.complementary_product_title + assign complementary_product_arrows = block.settings.complementary_product_arrows + assign complementary_product_dots = block.settings.complementary_product_dots + assign complementary_product_layout = block.settings.complementary_product_layout + if complementary_product_layout == "1" + assign complementary_product_limit_1 = block.settings.complementary_product_limit_1 + endif + if complementary_product_layout == "2" + assign complementary_product_limit_2 = block.settings.complementary_product_limit_2 + assign complementary_product_object = block.settings.complementary_product_object + endif + endcase + endfor + + if show_qty + if check_block_qty + if check_block_buttons + if qty_layout == '1' + assign check_show_qty = 'show_qty_1' + elsif qty_layout == '2' + assign check_show_qty = 'show_qty_2' + endif + else + assign check_show_qty = 'show_qty_1' + endif + else + assign check_show_qty = 'show_qty_0' + endif + else + assign check_show_qty = 'show_qty_0' + endif + + if show_share + if check_block_title and check_block_buttons + assign check_show_share = share_layout + elsif check_block_title and check_block_buttons != true + if share_layout == '2' + assign check_show_share = '1' + else + assign check_show_share = share_layout + endif + elsif check_block_title != true and check_block_buttons + if share_layout == '3' + assign check_show_share = '1' + else + assign check_show_share = share_layout + endif + endif + 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 +-%} + +{%- if first_3d_model -%} + + + + +{%- endif -%} + + + +{%- if product_image_popup == 'fancybox' -%} + + +{%- endif -%} +
+ {% if has_breadcrumb %} + {%- liquid + if breadcrumb_gradient != 'rgba(0,0,0,0)' or breadcrumb_bg != 'rgba(0,0,0,0)' or breadcrumb_gradient_mb != 'rgba(0,0,0,0)' or breadcrumb_bg_mb != 'rgba(0,0,0,0)' + assign breadcrumb_has_bg = true + else + assign breadcrumb_has_bg = false + endif + -%} +
+ {% if breadcrumb_has_bg %} +
+ {% endif %} +
+ {% render 'breadcrumb', + alignment: breadcrumb_alignment + %} +
+ {% if breadcrumb_has_bg %} +
+ {% endif %} +
+ {% endif %} +
+
+ {%- if has_sidebar -%} + {{ 'component-main-sidebar.css' | asset_url | stylesheet_tag }} +
+
+ + {% render 'icon-sidebar' %} + +
+
+
+ + + {% render 'icon-close' %} + +
+ + {{ 'sections.sidebar.title' | t }} + +
+
+ {% render 'sidebar', + results: collection, + section: section, + sidebar_type: sidebar_type, + show_collapse: show_sidebar_collapse, + sidebar_collapse: sidebar_collapse_default + %} +
+
+ {%- endif -%} + {%- if has_sidebar -%} +
+ {%- endif -%} +
+
+ {%- if main_image_show_custom_cursor -%} +
+
+
+ +
+
+
+ {%- endif -%} +
+
+ {%- if show_badge -%} + {% render 'product-badge', + product: product, + class: 'productView-badge', + badge_detail: true, + serial: 1 + %} + {%- endif -%} +
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'image' -%} +
+
+
+ {{ media.preview_image.alt | escape }} +
+
+
+ {%- when 'external_video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ {%- if media.host == 'youtube' -%} +
+ {{ media.alt | escape }} +
+
+
+
+ {%- else -%} +
+ {{ media.alt | escape }} +
+
+ {{ media | external_video_tag }} +
+ {%- endif -%} +
+
+ {%- endif -%} + {%- when 'video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+
+ {{ media.alt | escape }} +
+
+ {{ media | video_tag: controls: true, image_size: 'master' }} +
+
+
+ {%- endif -%} + {%- when 'model' -%} +
+ + + + + +
+ {%- else -%} +
+
+ {{ media | media_tag }} +
+
+ {%- endcase -%} + {%- endfor -%} +
+ {%- if video_layout == 'popup' -%} +
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'external_video' -%} + {%- if media.host == 'youtube' -%} + + {% render 'icon-video' %} + + {%- else -%} + + {% render 'icon-video' %} + + {%- endif -%} + {%- when 'video' -%} + ' | first | strip_html | remove: '">'}}" data-width="1200" data-height="675"> + {% render 'icon-video' %} + + {%- endcase -%} + {%- endfor -%} +
+ {%- endif -%} + {%- if main_image_show_zoom_icon_mb -%} +
+ {% render 'icon-zoom-1' %} +
+ {%- endif -%} + {%- if show_compare_color and isColor and compare_layout == '2' -%} +
+ +
+ {%- endif -%} +
+ {%- if thumnail_layout != '4' -%} +
+
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'image' -%} +
+ + {{ media.alt | escape }} + +
+ {%- when 'external_video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ {{ media.alt | escape }} +
+
+ {% render 'icon-video' %} +
+
+ {%- endif -%} + {%- when 'video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ ' | first }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}" loading="lazy" /> +
+
+ {% render 'icon-video' %} +
+
+ {%- endif -%} + {%- when 'model' -%} +
+
+ ' | first }}" alt="{{ media.alt | escape }}" title="{{ media.alt | escape }}" loading="lazy" /> +
+
+ {% render 'icon-3d-model' %} +
+
+ {%- else -%} +
+
+ {{ media | media_tag }} +
+
+ {%- endcase -%} + {%- endfor -%} +
+
+ {%- endif -%} +
+
+
+
+ {%- for block in section.blocks -%} + {%- liquid + assign spacing_top = block.settings.spacing_top + assign spacing_bottom = block.settings.spacing_bottom + -%} + {%- case block.type -%} + {%- when 'breadcrumb' -%} + {%- if breadcrumb_layout == 'content' -%} +
+ {% render 'breadcrumb', + alignment: breadcrumb_alignment + %} +
+ {%- endif -%} + {%- when 'vendor' -%} +
+ {% render 'product-vendor', + block: block, + product: product, + fontsize_text: fontsize_text, + color_title: color_title, + text_transform: text_transform + %} +
+ {%- when 'title' -%} + + {%- when 'meta' -%} + {%- liquid + assign show_review = block.settings.show_review + assign show_sold_in = block.settings.show_sold_in + assign sold_in_number = block.settings.sold_in_number + assign sold_in_hours = block.settings.sold_in_hours + assign color_text_sold_in = block.settings.color_text_sold_in + -%} + {%- if show_review or show_sold_in -%} +
+
+ {%- if show_review -%} + {% render 'product-rating', + product: product + %} + {%- endif -%} + {%- if show_sold_in -%} + {% render 'product-sold-in-last', + sold_in_number: sold_in_number, + sold_in_hours: sold_in_hours + %} + {%- endif -%} +
+
+ {%- endif -%} + {%- when 'short_description' -%} +
+ {% render 'product-short-description', + block: block, + product: product, + fontsize_text: fontsize_text, + color_text: color_text + %} +
+ {%- when 'variant_description' -%} +
+ {% render 'product-variant-description', + block: block, + product: product, + current_variant: current_variant + %} +
+ {%- when 'info' -%} + {%- liquid + assign show_vendor = block.settings.show_vendor + assign show_availability = block.settings.show_availability + assign show_sku = block.settings.show_sku + assign show_product_type = block.settings.show_product_type + assign stock_level_display = block.settings.stock_level_display + assign enable_border_top = block.settings.enable_border_top + assign enable_border_bottom = block.settings.enable_border_bottom + assign color_border = block.settings.color_border + -%} + {%- if show_vendor or show_availability or show_sku or show_product_type -%} +
+ {% render 'product-info', + product: product, + show_vendor: show_vendor, + show_availability: show_availability, + current_variant: current_variant, + show_sku: show_sku, + show_product_type: show_product_type, + stock_level_display: stock_level_display, + enable_border_top: enable_border_top, + enable_border_bottom: enable_border_bottom, + color_border: color_border + %} +
+ {%- endif -%} + {%- when 'price' -%} + {% assign fontsize_text = block.settings.fontsize_text %} +
+ {% if has_product_combo %} +
+ {%- if combo_discount_rate > 0 -%} + + {{ cart.total_price | money }} + + + {%- assign compensation = 1 | minus: combo_discount_rate -%} + {{ cart.total_price | times: compensation | money }} + + {%- endif -%} + +
+ {% else %} +
+ {%- render 'price', + product: product, + use_variant: true, + price_class: 'price--medium' + -%} +
+ {% endif %} +
+ {%- when 'countdown' -%} + {%- liquid + 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 + -%} + {%- if show_countdown -%} +
+ {% render 'product-countdown', + product: product, + countdown_type: countdown_type, + countdown_style: countdown_style, + countdown_time: countdown_time, + countdown_collection: countdown_collection + %} +
+ {%- endif -%} + {%- when 'variant_picker' -%} + {% unless has_product_combo %} +
+ {% render 'product-variant', + block: block, + product: product, + variantCount: variantCount, + current_variant: current_variant, + picker_type: picker_type, + show_variant_image_group: show_variant_image_group + %} +
+ {% endunless %} + {%- when 'customization_property' -%} + {% if has_customization_option == true %} +
+ {% render 'product-customization', + block: block, + product: product, + customization_option_1: customization_option_1, + customization_option_2: customization_option_2, + customization_option_hidden: customization_option_hidden + %} +
+ {% endif %} + {%- when 'hot_stock' -%} + {% unless has_product_combo %} + {% render 'product-hot-stock', + block: block, + product: product, + variantCount: variantCount, + show_hot_stock: show_hot_stock, + productMaxStock: productMaxStock, + current_variant: current_variant + %} + {% endunless %} + {%- when 'perks' -%} + {% unless has_product_combo %} +
+ {% render 'product-perks', + product: product, + show_size_chart: show_size_chart, + has_size_chart: has_size_chart, + show_compare_color: show_compare_color, + isColor: isColor, + compare_layout: compare_layout + %} +
+ {% endunless %} + {%- when 'quantity_selector' -%} + {% unless has_product_combo %} + {%- if check_show_qty == 'show_qty_1' -%} +
+
+ {% render 'product-quantity', + current_variant: current_variant, + qty_style: qty_style, + check_hidden: false, + quantity_stt: 2 + %} +
+ {%- if show_subtotal and subtotal_style == '1' -%} +
+ {{ 'sections.cart.subtotal' | t | append: ': ' }} + {{ subtotal }} +
+ {%- endif -%} +
+ {%- endif -%} + {% endunless %} + {%- when 'buy_buttons' -%} + {% unless has_product_combo %} +
+ {% render 'product-button', + block: block, + product: product, + current_variant: current_variant, + check_show_share: check_show_share, + share_layout: check_show_share, + section: section, + check_show_qty: check_show_qty, + qty_style: qty_style, + show_subtotal_text: show_subtotal_text, + subtotal: subtotal, + subtotal_style: subtotal_style + %} +
+ {% endunless %} + {%- when 'customer_viewing' -%} +
+ {% render 'product-customer-viewing', + block: block + %} +
+ {%- when 'pickup_availability' -%} +
+ {%- liquid + assign show_pickup_availability = block.settings.show_pickup_availability + -%} + {%- if show_pickup_availability -%} + {% render 'product-pickup-availability', + product: product, + current_variant: current_variant + %} + {%- endif -%} +
+ {%- when 'share' -%} + {%- if check_show_share == '1' -%} +
+ {% render 'halo-share', + product: product, + share_layout: check_show_share + %} +
+ {%- endif -%} + {%- when 'trust_image' -%} + {%- liquid + assign show_trust_image = block.settings.show_trust_image + -%} + {%- if show_trust_image -%} +
+
+ {%- render 'halo-trust-image', + type: 'product' + -%} +
+
+ {%- endif -%} + {%- when 'product_text' -%} + {%- liquid + assign content_spacing = block.settings.content_spacing + assign custom_block_align = block.settings.custom_block_align + assign background_color_block = block.settings.background_color_block + assign background_gradient_color_block = block.settings.background_gradient_color_block + -%} +
+
+ {% render 'product-text', + block: block + %} +
+
+ {%- when 'custom_information' -%} +
+ {% render 'product-custom-information', + block: block + %} +
+ {%- when 'grouped_product' -%} + {%- if has_product_combo -%} +
+ {% render 'grouped-product', + block: block, + show_share: show_share + check_show_share: check_show_share, + share_layout: check_show_share, + picker_type: picker_type, + show_size_chart: show_size_chart, + has_size_chart: has_size_chart, + show_compare_color: show_compare_color, + isColor: isColor, + compare_layout: compare_layout, + has_perks: has_perks, + product_combo: product_combo + %} +
+ {%- endif -%} + {%- when 'custom_liquid' -%} + {{ block.settings.custom_liquid }} + {%- when 'complementary_products' -%} +
+ + {%- if recommendations.performed and recommendations.products_count > 0 -%} + {%- if complementary_product_title -%} +
+
+ + {{ complementary_product_title | escape }} + +
+
+ {%- endif -%} +
+
+ {%- if complementary_product_layout == "1" -%} + {%- for product in recommendations.products limit: limit -%} +
+ {% render 'product-grid-layout', + product_card_product: product, + media_size: image_ratio, + portrait_aspect_ratio: portrait_aspect_ratio, + serial: forloop.index, + sectionId: section.id, + show_list: true, + loading: true + %} +
+ {%- endfor -%} + {%- endif -%} + + {%- if complementary_product_layout == "2" -%} + {%- for product in recommendations.products limit: limit offset: continue -%} +
+ {% render 'product-card-custom', + product_card_product: product + %} +
+ {%- endfor -%} + {%- endif -%} +
+
+ {%- endif-%} + + +
+ {%- when '@app' -%} + {% render block %} + {%- endcase -%} + {%- endfor -%} + {%- if show_tab -%} + {%- if tab_layout == 'vertical' or tab_layout == 'vertical_sidebar' or tab_layout == 'popup' -%} + {% render 'halo-product-tab', + product: product, + section: section, + tab_layout: tab_layout, + tab_layout_mobile: tab_layout_mobile, + icon_style_layout: icon_style_layout + %} + {%- endif -%} + {%- endif -%} +
+
+
+ {%- if has_sidebar -%} +
+ {% endif %} + {%- unless has_product_combo -%} + {%- if show_sticky_add_to_cart -%} + {{ 'component-sticky-add-to-cart.css' | asset_url | stylesheet_tag }} + {% render 'halo-sticky-add-to-cart', + product: product, + current_variant: current_variant, + variantCount: variantCount, + show_vendor: show_sticky_vendor, + sticky_atc_layout: sticky_atc_layout, + container: container, + show_qty: show_qty, + qty_style: qty_style, + subtotal: subtotal + %} + {%- endif -%} + {%- endunless -%} +
+
+ {% unless has_product_combo %} + {% render 'product-bundle' %} + {% endunless %} +
+
+ {%- if show_tab and tab_layout == 'horizontal' -%} + {% render 'halo-product-tab', + product: product, + section: section, + tab_layout: tab_layout, + tab_layout_mobile: tab_layout_mobile, + icon_style_layout: icon_style_layout + %} + {%- endif -%} +
+
+
+ +{%- 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 -%} + + +{%- if show_sticky_add_to_cart -%} + +{%- endif -%} +{%- if first_3d_model -%} + + + +{%- endif -%} +{%- if main_image_show_custom_cursor -%} + +{%- endif -%} +{%- if product_image_popup == 'fancybox' -%} + +{%- endif -%} +{%- if zoomed_image and main_image_show_custom_cursor != true -%} + +{%- endif -%} + +{% render 'schema', + product: product +%} \ No newline at end of file diff --git a/snippets/product-page.liquid b/snippets/product-page.liquid new file mode 100644 index 0000000..2106332 --- /dev/null +++ b/snippets/product-page.liquid @@ -0,0 +1,1342 @@ +{%- liquid + assign gift_card_recipient_feature_active = false + if block.settings.show_gift_card_recipient and product.gift_card? + assign gift_card_recipient_feature_active = true + endif + assign container = section.settings.container + assign padding_full_width = section.settings.padding_full_width + assign show_sticky_info = section.settings.show_sticky_info + assign mg_top_desktop = section.settings.mg_top_desktop + assign mg_top_tablet = section.settings.mg_top_tablet + assign mg_top_mobile = section.settings.mg_top_mobile + assign mg_bottom_desktop = section.settings.mg_bottom_desktop + assign mg_bottom_tablet = section.settings.mg_bottom_tablet + assign mg_bottom_mobile = section.settings.mg_bottom_mobile + assign main_image_position = section.settings.main_image_position + assign main_image_show_custom_cursor = section.settings.main_image_show_custom_cursor + assign count_color = section.settings.count_color + assign icon_color = section.settings.icon_color + assign thumnail_layout = section.settings.thumnail_layout + assign main_image_arrows_desktop = section.settings.main_image_arrows_desktop + assign main_image_arrows_mobile = section.settings.main_image_arrows_mobile + assign main_image_counter_mobile = section.settings.main_image_counter_mobile + assign main_image_enable_parallax_mb = section.settings.main_image_enable_parallax_mb + assign main_image_show_zoom_icon_mb = section.settings.main_image_show_zoom_icon_mb + assign main_image_layout = section.settings.main_image_layout + assign show_thumbnail_mobile = section.settings.show_thumbnail_mobile + assign max_thumbnail_to_show = section.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 = section.settings.product_image_ratio + assign portrait_aspect_ratio = section.settings.portrait_aspect_ratio | append: '%' + assign zoomed_image = section.settings.zoomed_image + assign media_fit = section.settings.media_fit + assign product_image_popup = section.settings.product_image_popup + assign video_layout = section.settings.video_layout + assign show_badge = section.settings.show_badge + assign show_hot_stock = settings.show_hot_stock + if show_hot_stock + assign productMaxStock = settings.hot_stock_limit | plus: 0 + endif + assign show_qty = section.settings.show_qty + assign show_subtotal = section.settings.show_subtotal + assign subtotal_style = section.settings.subtotal_style + assign show_subtotal_text = false + assign subtotal = 0 + if show_subtotal + assign show_subtotal_text = 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_sticky_add_to_cart = section.settings.show_sticky_add_to_cart + assign sticky_atc_layout = section.settings.sticky_atc_layout + assign show_sticky_vendor = section.settings.show_sticky_vendor + assign show_tab = section.settings.show_tab + if show_tab + assign tab_layout = section.settings.tab_layout + assign tab_layout_mobile = section.settings.tab_layout_mobile + assign icon_style_layout = section.settings.icon_style_layout + assign title_font_size = section.settings.title_font_size + assign title_font_size_mb = section.settings.title_font_size_mb + assign font_weight_title = section.settings.font_weight_title + assign title_text_transform = section.settings.title_text_transform + assign title_padding_top_bottom = section.settings.title_padding_top_bottom + if section.blocks.size > 0 + assign show_tab = true + else + assign show_tab = false + endif + endif + assign first_3d_model = product.media | where: "media_type", "model" | first + assign has_product_combo = false + + assign has_sidebar = false + assign show_sidebar = section.settings.show_sidebar + assign sidebar_type = 'vertical' + assign sidebar_position = section.settings.sidebar_position + assign show_sidebar_collapse = section.settings.show_sidebar_collapse + assign sidebar_collapse_default = section.settings.sidebar_collapse_default + if show_sidebar + if sidebar_type == 'vertical' + if section.blocks.size > 0 + assign has_sidebar = true + endif + endif + endif + if has_sidebar + assign sidebar_heading_font = section.settings.sidebar_heading_font + assign sidebar_heading_font_size = section.settings.sidebar_heading_font_size + assign sidebar_heading_font_weight = section.settings.sidebar_heading_font_weight + assign sidebar_heading_text_transform = section.settings.sidebar_heading_text_transform + assign enable_sticky = section.settings.enable_sticky + assign sidebar_layout = section.settings.sidebar_layout + endif + assign has_breadcrumb = false + for block in section.blocks + case block.type + when 'breadcrumb' + assign breadcrumb_layout = block.settings.breadcrumb_layout + assign breadcrumb_alignment = block.settings.breadcrumb_alignment + assign breadcrumb_mg_top_desktop = block.settings.breadcrumb_mg_top_desktop + assign breadcrumb_mg_top_mobile = block.settings.breadcrumb_mg_top_mobile + assign breadcrumb_mg_bottom_desktop = block.settings.breadcrumb_mg_bottom_desktop + assign breadcrumb_mg_bottom_mobile = block.settings.breadcrumb_mg_bottom_mobile + assign breadcrumb_bg = block.settings.breadcrumb_bg + assign breadcrumb_gradient = block.settings.breadcrumb_gradient + assign breadcrumb_bg_mb = block.settings.breadcrumb_bg_mb + assign breadcrumb_gradient_mb = block.settings.breadcrumb_gradient_mb + + if breadcrumb_layout == 'full' + assign check_breadcrumb_full = true + else + assign check_breadcrumb_full = false + endif + assign has_breadcrumb = true + when 'title' + assign check_block_title = true + + when 'quantity_selector' + assign check_block_qty = true + assign qty_style = block.settings.qty_style + assign qty_layout = block.settings.qty_layout + + when 'perks' + assign has_perks = true + assign show_compare_color = block.settings.show_compare_color + if show_compare_color + assign show_compare_color_drop_drap = block.settings.show_compare_color_drop_drap + assign product_swatch_option = settings.swatch | downcase + assign compare_layout = block.settings.compare_layout + 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 + assign show_size_chart = block.settings.show_size_chart + if show_size_chart + assign has_size_chart = false + assign size_chart_type = block.settings.size_chart_type + if size_chart_type == 'product_type' or size_chart_type == 'product_vendor' + assign size_chart_image_type = block.settings.size_chart_image_type + elsif size_chart_type == 'custom_image' + assign size_chart_image = block.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 + when 'buy_buttons' + assign check_block_buttons = true + when 'share' + assign show_share = block.settings.show_share + assign share_layout = block.settings.share_layout + when 'variant_picker' + assign picker_type = block.settings.picker_type + assign show_variant_image_group = block.settings.show_variant_image_group + when 'grouped_product' + assign product_combo = product.metafields.c_f.product_combo + assign combo_discount_rate = product.metafields.c_f.combo_discount_rate | plus: 0 | divided_by: 100.00 + + if product_combo + assign has_product_combo = true + else + assign has_product_combo = false + endif + when 'complementary_products' + assign complementary_product_title = block.settings.complementary_product_title + assign complementary_product_arrows = block.settings.complementary_product_arrows + assign complementary_product_dots = block.settings.complementary_product_dots + assign complementary_product_layout = block.settings.complementary_product_layout + if complementary_product_layout == "1" + assign complementary_product_limit_1 = block.settings.complementary_product_limit_1 + endif + if complementary_product_layout == "2" + assign complementary_product_limit_2 = block.settings.complementary_product_limit_2 + assign complementary_product_object = block.settings.complementary_product_object + endif + endcase + endfor + + if show_qty + if check_block_qty + if check_block_buttons + if qty_layout == '1' + assign check_show_qty = 'show_qty_1' + elsif qty_layout == '2' + assign check_show_qty = 'show_qty_2' + endif + else + assign check_show_qty = 'show_qty_1' + endif + else + assign check_show_qty = 'show_qty_0' + endif + else + assign check_show_qty = 'show_qty_0' + endif + + if show_share + if check_block_title and check_block_buttons + assign check_show_share = share_layout + elsif check_block_title and check_block_buttons != true + if share_layout == '2' + assign check_show_share = '1' + else + assign check_show_share = share_layout + endif + elsif check_block_title != true and check_block_buttons + if share_layout == '3' + assign check_show_share = '1' + else + assign check_show_share = share_layout + endif + endif + 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 +-%} + +{%- if first_3d_model -%} + + + + +{%- endif -%} + + + +{%- if product_image_popup == 'fancybox' -%} + + +{%- endif -%} +
+ {% if has_breadcrumb %} + {%- liquid + if breadcrumb_gradient != 'rgba(0,0,0,0)' or breadcrumb_bg != 'rgba(0,0,0,0)' or breadcrumb_gradient_mb != 'rgba(0,0,0,0)' or breadcrumb_bg_mb != 'rgba(0,0,0,0)' + assign breadcrumb_has_bg = true + else + assign breadcrumb_has_bg = false + endif + -%} +
+ {% if breadcrumb_has_bg %} +
+ {% endif %} +
+ {% render 'breadcrumb', + alignment: breadcrumb_alignment + %} +
+ {% if breadcrumb_has_bg %} +
+ {% endif %} +
+ {% endif %} +
+
+ {%- if has_sidebar -%} + {{ 'component-main-sidebar.css' | asset_url | stylesheet_tag }} +
+
+ + {% render 'icon-sidebar' %} + +
+
+
+ + + {% render 'icon-close' %} + +
+ + {{ 'sections.sidebar.title' | t }} + +
+
+ {% render 'sidebar', + results: collection, + section: section, + sidebar_type: sidebar_type, + show_collapse: show_sidebar_collapse, + sidebar_collapse: sidebar_collapse_default + %} +
+
+ {%- endif -%} + {%- if has_sidebar -%} +
+ {%- endif -%} +
+
+ {%- if main_image_show_custom_cursor -%} +
+
+
+ +
+
+
+ {%- endif -%} +
+
+ {%- if show_badge -%} + {% render 'product-badge', + product: product, + class: 'productView-badge', + badge_detail: true, + serial: 1 + %} + {%- endif -%} +
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'image' -%} +
+
+
+ {{ media.preview_image.alt | escape }} + {%- if settings.enable_lazyload and forloop.first == false -%}{%- endif -%} +
+
+
+ {%- when 'external_video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ {%- if media.host == 'youtube' -%} +
+ {{ media.alt | escape }} +
+
+
+
+ {%- else -%} +
+ {{ media.alt | escape }} +
+
+ {{ media | external_video_tag }} +
+ {%- endif -%} +
+
+ {%- endif -%} + {%- when 'video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+
+ {{ media.alt | escape }} +
+
+ {{ media | video_tag: controls: true, image_size: 'master' }} +
+
+
+ {%- endif -%} + {%- when 'model' -%} +
+ + + + + +
+ {%- else -%} +
+
+ {{ media | media_tag }} +
+
+ {%- endcase -%} + {%- endfor -%} +
+ {%- if video_layout == 'popup' -%} +
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'external_video' -%} + {%- if media.host == 'youtube' -%} + + {% render 'icon-video' %} + + {%- else -%} + + {% render 'icon-video' %} + + {%- endif -%} + {%- when 'video' -%} + ' | first | strip_html | remove: '">'}}" data-width="1200" data-height="675"> + {% render 'icon-video' %} + + {%- endcase -%} + {%- endfor -%} +
+ {%- endif -%} + {%- if main_image_show_zoom_icon_mb -%} +
+ {% render 'icon-zoom-1' %} +
+ {%- endif -%} + {%- if show_compare_color and isColor and compare_layout == '2' -%} +
+ +
+ {%- endif -%} +
+ {%- if thumnail_layout != '4' -%} +
+
+ {%- for media in product.media -%} + {%- case media.media_type -%} + {%- when 'image' -%} +
+
+ 4 %}data-{% endif %}srcset="{%- if thumnail_layout == '3' -%}{{ media | img_url: 'medium' }}{% else %}{{ media | img_url: 'compact' }}{% endif %}" {% unless settings.enable_lazyload and forloop.index > 4 %}src="{%- if thumnail_layout == '3' -%}{{ media | img_url: 'medium' }}{% else %}{{ media | img_url: 'compact' }}{% endif %}"{% endunless %} alt="{{ media.alt | escape }}" {% if settings.enable_lazyload and forloop.index > 4 %}class="lazyload" loading="lazy"{% endif %} /> + {%- if settings.enable_lazyload and forloop.index > 4 -%}{%- endif -%} +
+
+ {%- when 'external_video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ {{ media.alt | escape }} +
+
+ {% render 'icon-video' %} +
+
+ {%- endif -%} + {%- when 'video' -%} + {%- if video_layout == 'thumbnail' -%} +
+
+ ' | first }}" alt="{{ media.alt | escape }}" loading="lazy" /> +
+
+ {% render 'icon-video' %} +
+
+ {%- endif -%} + {%- when 'model' -%} +
+
+ ' | first }}" alt="{{ media.alt | escape }}" loading="lazy" /> +
+
+ {% render 'icon-3d-model' %} +
+
+ {%- else -%} +
+
+ {{ media | media_tag }} +
+
+ {%- endcase -%} + {%- endfor -%} +
+
+ {%- endif -%} +
+
+
+
+ {%- for block in section.blocks -%} + {%- liquid + assign spacing_top = block.settings.spacing_top + assign spacing_bottom = block.settings.spacing_bottom + -%} + {%- case block.type -%} + {%- when 'breadcrumb' -%} + {%- if breadcrumb_layout == 'content' -%} +
+ {% render 'breadcrumb', + alignment: breadcrumb_alignment + %} +
+ {%- endif -%} + {%- when 'vendor' -%} +
+ {% render 'product-vendor', + block: block, + product: product, + fontsize_text: fontsize_text, + color_title: color_title, + text_transform: text_transform + %} +
+ {%- when 'title' -%} + + {%- when 'meta' -%} + {%- liquid + assign show_review = block.settings.show_review + assign show_sold_in = block.settings.show_sold_in + assign sold_in_number = block.settings.sold_in_number + assign sold_in_hours = block.settings.sold_in_hours + assign color_text_sold_in = block.settings.color_text_sold_in + -%} + {%- if show_review or show_sold_in -%} +
+
+ {%- if show_review -%} + {% render 'product-rating', + product: product + %} + {%- endif -%} + {%- if show_sold_in -%} + {% render 'product-sold-in-last', + sold_in_number: sold_in_number, + sold_in_hours: sold_in_hours + %} + {%- endif -%} +
+
+ {%- endif -%} + {%- when 'short_description' -%} +
+ {% render 'product-short-description', + block: block, + product: product, + fontsize_text: fontsize_text, + color_text: color_text + %} +
+ {%- when 'variant_description' -%} +
+ {% render 'product-variant-description', + block: block, + product: product, + current_variant: current_variant + %} +
+ {%- when 'info' -%} + {%- liquid + assign show_vendor = block.settings.show_vendor + assign show_availability = block.settings.show_availability + assign show_sku = block.settings.show_sku + assign show_product_type = block.settings.show_product_type + assign stock_level_display = block.settings.stock_level_display + assign enable_border_top = block.settings.enable_border_top + assign enable_border_bottom = block.settings.enable_border_bottom + assign color_border = block.settings.color_border + -%} + {%- if show_vendor or show_availability or show_sku or show_product_type -%} +
+ {% render 'product-info', + product: product, + show_vendor: show_vendor, + current_variant: current_variant, + show_availability: show_availability, + show_sku: show_sku, + show_product_type: show_product_type, + stock_level_display: stock_level_display, + enable_border_top: enable_border_top, + enable_border_bottom: enable_border_bottom, + color_border: color_border + %} +
+ {%- endif -%} + {%- when 'price' -%} + {% assign fontsize_text = block.settings.fontsize_text %} +
+ {% if has_product_combo %} +
+ {%- if combo_discount_rate > 0 -%} + + {{ cart.total_price | money }} + + + {%- assign compensation = 1 | minus: combo_discount_rate -%} + {{ cart.total_price | times: compensation | money }} + + {%- endif -%} + +
+ {% else %} +
+ {%- render 'price', + product: product, + use_variant: true, + price_class: 'price--medium' + -%} +
+ {% endif %} +
+ {%- when 'countdown' -%} + {%- liquid + 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 + -%} + {%- if show_countdown -%} +
+ {% render 'product-countdown', + product: product, + countdown_type: countdown_type, + countdown_style: countdown_style, + countdown_time: countdown_time, + countdown_collection: countdown_collection + %} +
+ {%- endif -%} + {%- when 'variant_picker' -%} + {% unless has_product_combo %} +
+ {% render 'product-variant', + block: block, + product: product, + variantCount: variantCount, + current_variant: current_variant, + picker_type: picker_type, + show_variant_image_group: show_variant_image_group + %} +
+ {% endunless %} + {%- when 'customization_property' -%} + {% if has_customization_option == true %} +
+ {% render 'product-customization', + block: block, + product: product, + customization_option_1: customization_option_1, + customization_option_2: customization_option_2, + customization_option_hidden: customization_option_hidden + %} +
+ {% endif %} + {%- when 'hot_stock' -%} + {% unless has_product_combo %} + {% render 'product-hot-stock', + block: block, + product: product, + variantCount: variantCount, + show_hot_stock: show_hot_stock, + productMaxStock: productMaxStock, + current_variant: current_variant + %} + {% endunless %} + {%- when 'perks' -%} + {% unless has_product_combo %} +
+ {% render 'product-perks', + product: product, + show_size_chart: show_size_chart, + has_size_chart: has_size_chart, + show_compare_color: show_compare_color, + isColor: isColor, + compare_layout: compare_layout + %} +
+ {% endunless %} + {%- when 'quantity_selector' -%} + {% unless has_product_combo %} + {%- if check_show_qty == 'show_qty_1' -%} +
+
+ {% render 'product-quantity', + current_variant: current_variant, + qty_style: qty_style, + check_hidden: false, + quantity_stt: 2 + %} +
+ {%- if show_subtotal and subtotal_style == '1' -%} +
+ {{ 'sections.cart.subtotal' | t | append: ': ' }} + {{ subtotal }} +
+ {%- endif -%} +
+ {%- endif -%} + {% endunless %} + {%- when 'buy_buttons' -%} + {% unless has_product_combo %} +
+ {% render 'product-button', + block: block, + product: product, + current_variant: current_variant, + check_show_share: check_show_share, + share_layout: check_show_share, + section: section, + check_show_qty: check_show_qty, + qty_style: qty_style, + show_subtotal_text: show_subtotal_text, + subtotal: subtotal, + subtotal_style: subtotal_style + %} +
+ {% endunless %} + {%- when 'customer_viewing' -%} +
+ {% render 'product-customer-viewing', + block: block + %} +
+ {%- when 'pickup_availability' -%} +
+ {%- liquid + assign show_pickup_availability = block.settings.show_pickup_availability + -%} + {%- if show_pickup_availability -%} + {% render 'product-pickup-availability', + product: product, + current_variant: current_variant + %} + {%- endif -%} +
+ {%- when 'share' -%} + {%- if check_show_share == '1' -%} +
+ {% render 'halo-share', + product: product, + share_layout: check_show_share + %} +
+ {%- endif -%} + {%- when 'trust_image' -%} + {%- liquid + assign show_trust_image = block.settings.show_trust_image + -%} + {%- if show_trust_image -%} +
+
+ {%- render 'halo-trust-image', + type: 'product' + -%} +
+
+ {%- endif -%} + {%- when 'product_text' -%} + {%- liquid + assign content_spacing = block.settings.content_spacing + assign custom_block_align = block.settings.custom_block_align + assign background_color_block = block.settings.background_color_block + assign background_gradient_color_block = block.settings.background_gradient_color_block + -%} +
+
+ {% render 'product-text', + block: block + %} +
+
+ {%- when 'custom_information' -%} +
+ {% render 'product-custom-information', + block: block + %} +
+ {%- when 'grouped_product' -%} + {%- if has_product_combo -%} +
+ {% render 'grouped-product', + block: block, + show_share: show_share + check_show_share: check_show_share, + share_layout: check_show_share, + picker_type: picker_type, + show_size_chart: show_size_chart, + has_size_chart: has_size_chart, + show_compare_color: show_compare_color, + isColor: isColor, + compare_layout: compare_layout, + has_perks: has_perks, + product_combo: product_combo + %} +
+ {%- endif -%} + {%- when 'custom_liquid' -%} + {{ block.settings.custom_liquid }} + {%- when 'complementary_products' -%} +
+ + {%- if recommendations.performed and recommendations.products_count > 0 -%} + {%- if complementary_product_title -%} +
+
+ + {{ complementary_product_title | escape }} + +
+
+ {%- endif -%} +
+
+ {%- if complementary_product_layout == "1" -%} + {%- for product in recommendations.products limit: limit -%} +
+ {% render 'product-grid-layout', + product_card_product: product, + media_size: image_ratio, + portrait_aspect_ratio: portrait_aspect_ratio, + serial: forloop.index, + sectionId: section.id, + show_list: true, + loading: true + %} +
+ {%- endfor -%} + {%- endif -%} + + {%- if complementary_product_layout == "2" -%} + {%- for product in recommendations.products limit: limit offset: continue -%} +
+ {% render 'product-card-custom', + product_card_product: product + %} +
+ {%- endfor -%} + {%- endif -%} +
+
+ {%- endif-%} + + +
+ {%- when '@app' -%} + {% render block %} + {%- endcase -%} + {%- endfor -%} + {%- if show_tab -%} + {%- if tab_layout == 'vertical' or tab_layout == 'vertical_sidebar' or tab_layout == 'popup' -%} + {% render 'halo-product-tab', + product: product, + section: section, + tab_layout: tab_layout, + tab_layout_mobile: tab_layout_mobile, + icon_style_layout: icon_style_layout + %} + {%- endif -%} + {%- endif -%} +
+
+
+ {%- if has_sidebar -%} +
+ {% endif %} + {%- unless has_product_combo -%} + {%- if show_sticky_add_to_cart -%} + {{ 'component-sticky-add-to-cart.css' | asset_url | stylesheet_tag }} + {% render 'halo-sticky-add-to-cart', + product: product, + current_variant: current_variant, + variantCount: variantCount, + show_vendor: show_sticky_vendor, + sticky_atc_layout: sticky_atc_layout, + container: container, + show_qty: show_qty, + qty_style: qty_style, + subtotal: subtotal + %} + {%- endif -%} + {%- endunless -%} +
+
+ {% unless has_product_combo %} + {% render 'product-bundle' %} + {% endunless %} +
+
+ {%- if show_tab and tab_layout == 'horizontal' -%} + {% render 'halo-product-tab', + product: product, + section: section, + tab_layout: tab_layout, + tab_layout_mobile: tab_layout_mobile, + icon_style_layout: icon_style_layout + %} + {%- endif -%} +
+
+
+ +{%- 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 -%} + + +{%- if show_sticky_add_to_cart -%} + +{%- endif -%} +{%- if first_3d_model -%} + + + +{%- endif -%} +{%- if main_image_show_custom_cursor -%} + +{%- endif -%} +{%- if product_image_popup == 'fancybox' -%} + +{%- endif -%} +{%- if zoomed_image and main_image_show_custom_cursor != true -%} + +{%- endif -%} + +{% render 'schema', + product: product +%} \ No newline at end of file