383 lines
20 KiB
Plaintext
383 lines
20 KiB
Plaintext
{%- capture product_form_id -%}product-form-{{ section.id }}-{{ product.id }}{%- endcapture -%}
|
|
|
|
<div class="product__info">
|
|
<!-- PRODUCT META -->
|
|
<product-meta form-id="{{ product_form_id }}" price-class="price--large" class="product-meta">
|
|
{%- if section.settings.show_vendor -%}
|
|
<h2 class="product-meta__vendor heading heading--small">
|
|
{%- assign vendor_handle = product.vendor | handle -%}
|
|
{%- assign vendor_collection = collections[vendor_handle] -%}
|
|
|
|
{%- if vendor_collection != blank -%}
|
|
<a href="{{ vendor_collection.url }}">{{ product.vendor }}</a>
|
|
{%- else -%}
|
|
<a href="{{ product.vendor | url_for_vendor }}">{{ product.vendor }}</a>
|
|
{%- endif -%}
|
|
</h2>
|
|
{%- endif -%}
|
|
|
|
{% unless featured %}
|
|
<h1 class="product-meta__title heading h3">{{ product.title }}</h1>
|
|
{% else %}
|
|
<h2 class="product-meta__title heading h3">
|
|
<a href="{{ product.url }}">{{ product.title }}</a>
|
|
</h2>
|
|
{% endunless %}
|
|
|
|
{% liquid
|
|
# start Yagi app code
|
|
assign target = product.selected_or_first_available_variant
|
|
assign variant_price = product.selected_or_first_available_variant.price
|
|
assign variant_compare_at_price = product.selected_or_first_available_variant.compare_at_price
|
|
|
|
assign active_discount = true
|
|
|
|
assign empty_array = "" | split: ""
|
|
assign dormant_discounts = shop.metafields.app--168074346497.dormant_discounts.value | default: empty_array
|
|
assign target_discount_id = product.metafields.app--168074346497.applied_discount_id.value
|
|
for dormant_discount in dormant_discounts
|
|
if dormant_discount == target_discount_id
|
|
assign active_discount = false
|
|
endif
|
|
endfor
|
|
|
|
if active_discount and target.inventory_quantity > 0
|
|
assign variant_price = target.metafields.app--168074346497.auto_discounted_price.value | default: target.price
|
|
|
|
if target.metafields.app--168074346497.discount_type.value != nil and target.metafields.app--168074346497.discount_type.value != "fixed" and product.metafields.app--168074346497.discount_percentage.value > 0.01
|
|
assign deducted_percentage = 1.0 | minus: product.metafields.app--168074346497.discount_percentage.value
|
|
|
|
if target.metafields.app--168074346497.discount_percentage.value > 0.01
|
|
assign deducted_percentage = 1.0 | minus: target.metafields.app--168074346497.discount_percentage.value
|
|
endif
|
|
|
|
assign variant_price = target.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
|
|
|
assign variant_compare_at_price = target.price
|
|
|
|
if target.compare_at_price > variant_compare_at_price
|
|
assign variant_compare_at_price = target.compare_at_price
|
|
endif
|
|
endif
|
|
|
|
if variant_price < target.price and variant_compare_at_price == blank
|
|
assign variant_compare_at_price = target.price
|
|
endif
|
|
endif
|
|
# end Yagi app code
|
|
%}
|
|
<div class="product-meta__price-list-container" role="region" aria-live="polite">
|
|
<div class="price-list" data-product-price-list data-yagi-product-info="{{ product.selected_or_first_available_variant.metafields.app--168074346497.auto_discounted_price.value }}">
|
|
{%- if variant_compare_at_price > variant_price -%}
|
|
<span class="price price--highlight price--large yagi-large">
|
|
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
|
|
|
|
<span class="yagi-discounted-price" data-price-yagi>
|
|
{%- if settings.currency_code_enabled -%}
|
|
{{- variant_price | money_with_currency -}}
|
|
{%- else -%}
|
|
{{- variant_price | money -}}
|
|
{%- endif -%}
|
|
</span>
|
|
</span>
|
|
|
|
<span class="price price--compare">
|
|
<span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>
|
|
|
|
<span class="yagi-original-price" data-compare-at-price-yagi>
|
|
{%- if settings.currency_code_enabled -%}
|
|
{{- variant_compare_at_price | money_with_currency -}}
|
|
{%- else -%}
|
|
{{- variant_compare_at_price | money -}}
|
|
{%- endif -%}
|
|
</span>
|
|
</span>
|
|
{%- else -%}
|
|
<span class="price price--large">
|
|
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
|
|
<span class="yagi-discounted-price" data-price-yagi>
|
|
{%- if settings.currency_code_enabled -%}
|
|
{{- variant_price | money_with_currency -}}
|
|
{%- else -%}
|
|
{{- variant_price | money -}}
|
|
{%- endif -%}
|
|
</span>
|
|
</span>
|
|
|
|
<span class="price price--compare visually-hidden">
|
|
<span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>
|
|
|
|
<span class="yagi-original-price" data-compare-at-price-yagi>
|
|
{%- if settings.currency_code_enabled -%}
|
|
{{- variant_compare_at_price | money_with_currency -}}
|
|
{%- else -%}
|
|
{{- variant_compare_at_price | money -}}
|
|
{%- endif -%}
|
|
</span>
|
|
</span>
|
|
{%- endif -%}
|
|
|
|
{%- if product.selected_or_first_available_variant.unit_price_measurement -%}
|
|
<div class="price text--subdued">
|
|
<div class="unit-price-measurement">
|
|
<span class="unit-price-measurement__price">{{ product.selected_or_first_available_variant.unit_price | money }}</span>
|
|
<span class="unit-price-measurement__separator">/</span>
|
|
|
|
{%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
|
|
<span class="unit-price-measurement__reference-value">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_value }}</span>
|
|
{%- endif -%}
|
|
|
|
<span class="unit-price-measurement__reference-unit">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}</span>
|
|
</div>
|
|
</div>
|
|
{%- endif -%}
|
|
<!-- Start of Judge.me code -->
|
|
<div class='jdgm-widget jdgm-preview-badge' data-id='{{ product.id }}'>
|
|
{{ product.metafields.judgeme.badge }}
|
|
</div>
|
|
<!-- End of Judge.me code -->
|
|
</div>
|
|
|
|
<span class="pro_save">
|
|
<div class="product-meta__label-list label-list" data-product-label-list>
|
|
{%- unless product.selected_or_first_available_variant.available -%}
|
|
<span class="label label--subdued">{{ 'collection.product.sold_out' | t }}</span>
|
|
{%- elsif product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price -%}
|
|
{%- if settings.discount_mode == 'percentage' -%}
|
|
{%- assign savings = product.selected_or_first_available_variant.compare_at_price | minus: product.selected_or_first_available_variant.price | times: 100.0 | divided_by: product.selected_or_first_available_variant.compare_at_price | round | append: '%' -%}
|
|
{%- else -%}
|
|
{%- capture savings -%}{{ product.selected_or_first_available_variant.compare_at_price | minus: product.selected_or_first_available_variant.price | money }}{%- endcapture -%}
|
|
{%- endif -%}
|
|
|
|
<span class="label label--highlight yagi-saving">{{ 'collection.product.discount_html' | t: savings: savings }}</span>
|
|
{%- endunless -%}
|
|
</div>
|
|
</span>
|
|
</div>
|
|
|
|
{%- if section.settings.show_taxes_included -%}
|
|
{%- if cart.taxes_included or shop.shipping_policy.body != blank -%}
|
|
<p class="product-meta__taxes-included text--small">
|
|
{%- if cart.taxes_included -%}
|
|
{{ 'product.general.include_taxes' | t }}
|
|
{%- endif -%}
|
|
|
|
{%- if shop.shipping_policy.body != blank -%}
|
|
{{ 'product.general.shipping_policy_html' | t: link: shop.shipping_policy.url }}
|
|
{%- endif -%}
|
|
</p>
|
|
{%- endif -%}
|
|
{%- endif -%}
|
|
|
|
<product-payment-terms form-id="{{ product_form_id }}">
|
|
{%- assign product_installment_form_id = 'product-installment-form-' | append: section.id | append: '-' | append: product.id -%}
|
|
|
|
{%- form 'product', product, id: product_installment_form_id -%}
|
|
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
|
|
{{- form | payment_terms -}}
|
|
{%- endform -%}
|
|
</product-payment-terms>
|
|
|
|
{%- if section.settings.show_product_rating or section.settings.show_sku -%}
|
|
<div class="product-meta__reference">
|
|
{%- if section.settings.show_product_rating -%}
|
|
<a href="{% if featured %}{{ product.url }}{% endif %}#product-{{ product.id }}-reviews-pocket" is="review-link" data-smooth-scroll class="product-meta__reviews-badge hidden-lap-and-up">{%- render 'product-rating', product: product -%}</a>
|
|
<a href="{% if featured %}{{ product.url }}{% endif %}#product-{{ product.id }}-tabs" is="review-link" data-smooth-scroll class="product-meta__reviews-badge hidden-pocket">{%- render 'product-rating', product: product -%}</a>
|
|
{%- endif -%}
|
|
|
|
{%- if section.settings.show_sku -%}
|
|
<span class="product-meta__sku text--subdued text--xxsmall" {% if product.selected_or_first_available_variant.sku == blank %}style="display: none"{% endif %} data-product-sku-container>
|
|
{{- 'product.general.sku' | t }}
|
|
<span class="product-meta__sku-number" data-product-sku-number>{{ product.selected_or_first_available_variant.sku }}</span>
|
|
</span>
|
|
{%- endif -%}
|
|
</div>
|
|
{%- endif -%}
|
|
</product-meta>
|
|
|
|
{%- render 'product-form', product: product, update_url: update_url -%}
|
|
|
|
{%- assign help_page = section.settings.help_page -%}
|
|
|
|
{%- if section.settings.show_share_buttons or help_page != blank -%}
|
|
<div class="product-meta__aside">
|
|
{%- if section.settings.show_share_buttons -%}
|
|
<div class="product-meta__share text--subdued">
|
|
{%- assign share_url = shop.url | append: product.url -%}
|
|
{%- assign twitter_text = product.title | url_param_escape -%}
|
|
{%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
|
|
{%- assign pinterest_image = product.featured_image | image_url: width: 800 | prepend: 'https:' -%}
|
|
|
|
<button is="share-toggle-button" share-url="{{ share_url | escape }}" share-title="{{ product.title | escape }}" class="product-meta__share-label link hidden-tablet-and-up" aria-controls="mobile-share-buttons-{{ section.id }}" aria-expanded="false">{{ 'product.general.share' | t }}</button>
|
|
<div class="product-meta__share-label hidden-phone">{{ 'product.general.share' | t }}</div>
|
|
|
|
<popover-content id="mobile-share-buttons-{{ section.id }}" class="popover hidden-tablet-and-up">
|
|
<span class="popover__overlay"></span>
|
|
|
|
<header class="popover__header">
|
|
<span class="popover__title heading h6">{{- 'article.general.share' | t -}}</span>
|
|
|
|
<button type="button" class="popover__close-button tap-area tap-area--large" data-action="close" title="{{ 'general.accessibility.close' | t | escape }}">
|
|
{%- render 'icon' with 'close' -%}
|
|
</button>
|
|
</header>
|
|
|
|
<div class="mobile-share-buttons">
|
|
<a class="mobile-share-buttons__item mobile-share-buttons__item--facebook" href="https://www.facebook.com/sharer.php?u={{ share_url }}" target="_blank" rel="noopener" aria-label="{{ 'general.social.facebook_share' | t }}">
|
|
{%- render 'icon' with 'facebook-share-mobile' -%} Facebook
|
|
</a>
|
|
|
|
<a class="mobile-share-buttons__item mobile-share-buttons__item--pinterest" href="https://pinterest.com/pin/create/button/?url={{ share_url }}{% if pinterest_image != blank %}&media={{ pinterest_image }}{% endif %}&description={{ pinterest_description }}" target="_blank" rel="noopener" aria-label="{{ 'general.social.pinterest_pin' | t }}">
|
|
{%- render 'icon' with 'pinterest-share-mobile' -%} Pinterest
|
|
</a>
|
|
|
|
<a class="mobile-share-buttons__item mobile-share-buttons__item--twitter" href="https://twitter.com/intent/tweet?{% if twitter_text != blank %}text={{twitter_text}}&{% endif %}url={{ share_url }}" target="_blank" rel="noopener" aria-label="{{ 'general.social.twitter_tweet' | t }}">
|
|
{%- render 'icon' with 'twitter-share-mobile' -%} Twitter
|
|
</a>
|
|
|
|
<a class="mobile-share-buttons__item mobile-share-buttons__item--mail" href="mailto:?&subject={{ article.title | escape }}&body={{ share_url }}" aria-label="{{ 'general.social.email_share' | t }}">
|
|
{%- render 'icon' with 'email-share-mobile' -%} {{ 'general.social.email_label' | t }}
|
|
</a>
|
|
</div>
|
|
</popover-content>
|
|
|
|
<div class="product-meta__share-button-list hidden-phone">
|
|
<a class="product-meta__share-button-item product-meta__share-button-item--facebook link tap-area" href="https://www.facebook.com/sharer.php?u={{ share_url }}" target="_blank" rel="noopener" aria-label="{{ 'general.social.facebook_share' | t }}">
|
|
{%- render 'icon' with 'facebook', width: 8, height: 14 -%}
|
|
</a>
|
|
|
|
<a class="product-meta__share-button-item product-meta__share-button-item--pinterest link tap-area" href="https://pinterest.com/pin/create/button/?url={{ share_url }}{% if pinterest_image != blank %}&media={{ pinterest_image }}{% endif %}&description={{ pinterest_description }}" target="_blank" rel="noopener" aria-label="{{ 'general.social.pinterest_pin' | t }}">
|
|
{%- render 'icon' with 'pinterest', width: 10, height: 14 -%}
|
|
</a>
|
|
|
|
<a class="product-meta__share-button-item product-meta__share-button-item--twitter link tap-area" href="https://twitter.com/intent/tweet?{% if twitter_text != blank %}text={{ twitter_text }}&{% endif %}url={{ share_url }}" target="_blank" rel="noopener" aria-label="{{ 'general.social.twitter_tweet' | t }}">
|
|
{%- render 'icon' with 'twitter', width: 17, height: 14 -%}
|
|
</a>
|
|
|
|
<a class="product-meta__share-button-item product-meta__share-button-item--mail link tap-area" href="mailto:?&subject={{ product.title | escape }}&body={{ share_url }}" aria-label="{{ 'general.social.email_share' | t }}">
|
|
{%- render 'icon' with 'share', width: 13, height: 13 -%}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{%- endif -%}
|
|
|
|
{%- if help_page != blank -%}
|
|
<button is="toggle-button" class="product-meta__help link text--subdued hidden-tablet-and-up" aria-controls="product-{{ section.id }}-help-popover" aria-expanded="false">{{ 'product.general.need_help' | t }}</button>
|
|
<button is="toggle-button" class="product-meta__help link text--subdued hidden-phone" aria-controls="product-{{ section.id }}-help-drawer" aria-expanded="false">{{ 'product.general.need_help' | t }}</button>
|
|
{%- endif -%}
|
|
</div>
|
|
{%- endif -%}
|
|
|
|
{%- if help_page != blank -%}
|
|
{%- comment -%}Drawer for tablet and higher{%- endcomment -%}
|
|
<drawer-content id="product-{{ section.id }}-help-drawer" class="drawer drawer--large hidden-phone">
|
|
<span class="drawer__overlay"></span>
|
|
|
|
<header class="drawer__header">
|
|
<p class="drawer__title heading h6">{{ help_page.title }}</p>
|
|
|
|
<button type="button" class="drawer__close-button tap-area" data-action="close" title="{{ 'general.accessibility.close' | t | escape }}">
|
|
{%- render 'icon' with 'close' -%}
|
|
</button>
|
|
</header>
|
|
|
|
<div class="drawer__content drawer__content--padded-start">
|
|
<div class="rte">
|
|
{{- help_page.content -}}
|
|
</div>
|
|
</div>
|
|
</drawer-content>
|
|
|
|
{%- comment -%}Popover for mobile{%- endcomment -%}
|
|
<popover-content hidden id="product-{{ section.id }}-help-popover" class="popover hidden-lap-and-up">
|
|
<span class="popover__overlay"></span>
|
|
|
|
<header class="popover__header">
|
|
<p class="popover__title heading h6">{{ help_page.title }}</p>
|
|
|
|
<button type="button" class="popover__close-button tap-area tap-area--large" data-action="close" title="{{ 'general.accessibility.close' | t | escape }}">
|
|
{%- render 'icon' with 'close' -%}
|
|
</button>
|
|
</header>
|
|
|
|
<div class="popover__content">
|
|
<div class="rte">
|
|
{{- help_page.content -}}
|
|
</div>
|
|
</div>
|
|
</popover-content>
|
|
{%- endif -%}
|
|
</div>
|
|
|
|
|
|
<!-- Script to auto update variant price on variant change, on product page -->
|
|
<script>
|
|
function ALVariantChanged(changedId = "") {
|
|
console.log("AL Variant changed");
|
|
var autolabelVariants = [];
|
|
|
|
{% for variant in product.variants %}
|
|
{% assign raw_variant_price = variant.metafields.app--168074346497.auto_discounted_price.value | default: variant.price %}
|
|
|
|
{% if variant.metafields.app--168074346497.auto_discounted_price.value and variant.metafields.app--168074346497.discount_type.value != "fixed" and product.metafields.app--168074346497.discount_percentage.value > 0.005 %}
|
|
{% assign deducted_percentage = 1.0 | minus: product.metafields.app--168074346497.discount_percentage.value %}
|
|
|
|
{% if variant.metafields.app--168074346497.discount_percentage.value > 0.005 %}
|
|
{% assign deducted_percentage = 1.0 | minus: variant.metafields.app--168074346497.discount_percentage.value %}
|
|
{% endif %}
|
|
|
|
{% assign raw_variant_price = variant.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil %}
|
|
{% elsif shop.metafields.app--168074346497.discount_percentage.value > 0.005 %}
|
|
{% assign deducted_percentage = 1.0 | minus: shop.metafields.app--168074346497.discount_percentage.value %}
|
|
{% assign raw_variant_price = variant.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil %}
|
|
{% endif %}
|
|
|
|
{% assign raw_variant_compare_at_price = variant.price %}
|
|
|
|
{% if variant.compare_at_price and variant.compare_at_price > variant.price %}
|
|
{% assign raw_variant_compare_at_price = variant.compare_at_price %}
|
|
{% endif %}
|
|
|
|
{% assign raw_variant_price_money = raw_variant_price | money %}
|
|
{% assign raw_variant_compare_at_price_money = raw_variant_compare_at_price | money %}
|
|
|
|
autolabelVariants.push({id: "{{ variant.id }}", raw_price: "{{ raw_variant_price }}", price: `{{ raw_variant_price_money }}`, compare_at_price: `{{ raw_variant_compare_at_price_money }}`});
|
|
{% endfor %}
|
|
console.log("auto label variant");
|
|
console.debug(autolabelVariants);
|
|
|
|
var currentId = document.querySelector("form input[name='id']")?.value;
|
|
console.log("current Id is");
|
|
console.debug(currentId);
|
|
if(changedId){
|
|
currentId = String(changedId);
|
|
}
|
|
const searchedVariant = autolabelVariants.find((element) => currentId && element.id == currentId);
|
|
|
|
const alOriginalPrice = document.querySelector('[data-compare-at-price-yagi]');
|
|
const alDiscountedPrice = document.querySelector('[data-price-yagi]');
|
|
|
|
console.log("search variant is");
|
|
console.debug(searchedVariant);
|
|
|
|
console.log("original price is");
|
|
console.debug(alOriginalPrice);
|
|
|
|
console.log("discount price is");
|
|
console.debug(alDiscountedPrice);
|
|
|
|
if(searchedVariant && alOriginalPrice && alDiscountedPrice){
|
|
alOriginalPrice.textContent = searchedVariant.compare_at_price.replace(/<[^>]*>/g, '');
|
|
alOriginalPrice.parentElement.classList.remove("visually-hidden");
|
|
alDiscountedPrice.textContent = searchedVariant.price.replace(/<[^>]*>/g, '');
|
|
alDiscountedPrice.parentElement.classList.add("price--highlight");
|
|
}
|
|
}
|
|
|
|
document.addEventListener('yagi-variant-change', (e) => {
|
|
console.log('Received yagi:', e.detail);
|
|
// setTimeout(() => {
|
|
ALVariantChanged(e.detail?.variant?.id);
|
|
// }, 10);
|
|
});
|
|
</script> |