first commit
This commit is contained in:
Axel committed
commit
12799f7356
6 files changed
+1048
No files matched your search
@@ -0,0 +1,271 @@
|
||||
{% if related_products == true %}
|
||||
{% assign hover_enabled = block.settings.show_related_products_title_on_hover %}
|
||||
{% else %}
|
||||
{% assign hover_enabled = settings.thumbnail_hover_enabled %}
|
||||
{% endif %}
|
||||
|
||||
{% if type == 'block' %}
|
||||
{% assign object = block %}
|
||||
{% else %}
|
||||
{% assign object = section %}
|
||||
{% endif %}
|
||||
|
||||
{% assign secondaryImage = product.media[1] %}
|
||||
|
||||
{% assign collection_handles = product.collections | map: 'handle' %}
|
||||
{% if product.featured_media.preview_image.alt contains 'youtube' or image.alt contains 'vimeo' %}
|
||||
{% assign alt_text = product.title %}
|
||||
{% else %}
|
||||
{% assign alt_text = product.featured_media.preview_image.alt %}
|
||||
{% endif %}
|
||||
|
||||
{% if type == 'block' %}
|
||||
{% assign image_crop = block.settings.image_crop %}
|
||||
{% else %}
|
||||
{% assign image_crop = section.settings.image_crop %}
|
||||
{% endif %}
|
||||
|
||||
{% if align_height == true %}
|
||||
{% style %}
|
||||
.product-{{ product.id }}.thumbnail .image__container img,
|
||||
.product-{{ product.id }}.thumbnail .product-thumbnail__video .plyr {
|
||||
max-width: 100%;
|
||||
width: {{ height }}px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.shopify-model-viewer-ui model-viewer {
|
||||
--progress-bar-height: 2px;
|
||||
--progress-bar-color: {{ settings.regular_color }};
|
||||
}
|
||||
{% endstyle %}
|
||||
{% endif %}
|
||||
|
||||
{% liquid
|
||||
|
||||
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
|
||||
|
||||
assign product_price = product.price
|
||||
assign product_compare_at_price_max = product.compare_at_price_max
|
||||
assign product_compare_at_price = product.compare_at_price
|
||||
|
||||
if active_discount
|
||||
assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
|
||||
|
||||
if product_price < product.price and product_compare_at_price == 0 or product_compare_at_price == blank
|
||||
assign product_compare_at_price = product.price
|
||||
endif
|
||||
|
||||
if product_price < product.price and product_compare_at_price_max == 0 or product_compare_at_price_max == blank
|
||||
assign product_compare_at_price_max = product.price_max
|
||||
endif
|
||||
endif
|
||||
%}
|
||||
|
||||
<div class="
|
||||
{%
|
||||
render 'column-width',
|
||||
value: products_per_row
|
||||
%}
|
||||
medium-down--one-half
|
||||
{% if mobile_products_per_row == '1' %}
|
||||
small-down--one-whole
|
||||
{% else %}
|
||||
small-down--one-half
|
||||
{% endif %}
|
||||
column
|
||||
{% if settings.enable_quickshop %}
|
||||
quick-shop--true
|
||||
quick-shop--closed
|
||||
product-{{ product.id }} js-product_section
|
||||
{% endif %}
|
||||
{% if settings.stickers_enabled %}
|
||||
has-thumbnail-sticker
|
||||
{% endif %}
|
||||
{% if product.media[1] != blank and settings.show_secondary_image == true %}
|
||||
has-secondary-image-swap
|
||||
{% endif %}
|
||||
thumbnail
|
||||
product__thumbnail
|
||||
product__grid-item
|
||||
thumbnail__hover-overlay--{{ hover_enabled }}
|
||||
has-padding-bottom"
|
||||
{% if section.settings.pagination_type != 'basic_pagination' %}
|
||||
data-load-more--grid-item
|
||||
{% endif %}>
|
||||
<div class="product-wrap">
|
||||
|
||||
<div class="product-image__wrapper">
|
||||
<div class="image__container product__imageContainer">
|
||||
<a href="{{ product.url }}">
|
||||
{% if settings.stickers_enabled %}
|
||||
{%
|
||||
render 'product-thumbnail__sticker',
|
||||
product: product,
|
||||
context: 'product',
|
||||
collection_handles: collection_handles
|
||||
%}
|
||||
{% endif %}
|
||||
|
||||
{% comment %} Primary image {% endcomment %}
|
||||
{%
|
||||
render 'image-element',
|
||||
image: product.featured_media.preview_image,
|
||||
alt: alt_text,
|
||||
object_fit: align_height,
|
||||
max_height: height
|
||||
%}
|
||||
|
||||
{% comment %} Secondary image {% endcomment %}
|
||||
{% if product.media[1] != blank and settings.show_secondary_image == true %}
|
||||
{% if product.media[1].media_type == 'external_video' %}
|
||||
<div class="product-thumbnail__video secondary swap--visible video-on-hover">
|
||||
<div data-youtube-video>
|
||||
{{ product.media[1] | external_video_tag }}
|
||||
</div>
|
||||
</div>
|
||||
{% elsif product.media[1].media_type == 'video' %}
|
||||
<div class="product-thumbnail__video secondary swap--visible video-on-hover" data-html5-video>
|
||||
{{ product.media[1] | video_tag: controls: false }}
|
||||
</div>
|
||||
{% else %}
|
||||
{%
|
||||
render 'image-element',
|
||||
image: product.media[1],
|
||||
alt: alt_text,
|
||||
object_fit: align_height,
|
||||
max_height: height,
|
||||
additional_classes: 'secondary swap--visible'
|
||||
%}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% if hover_enabled or settings.enable_quickshop %}
|
||||
<div class="thumbnail-overlay__container">
|
||||
<a class="hidden-product-link" href="{{ product.url }}">{{ product.title | escape }}</a>
|
||||
|
||||
{% if hover_enabled %}
|
||||
<div class="quick-shop__info animated fadeInDown">
|
||||
<div class="thumbnail-overlay">
|
||||
<div class="info text-align-center">
|
||||
{% if settings.display_vendor %}
|
||||
<span class="product-thumbnail__vendor">{{ product.vendor }}</span>
|
||||
{% endif %}
|
||||
|
||||
<p class="product-thumbnail__title">{{ product.title | escape }}</p>
|
||||
|
||||
{% if collection_handles contains 'coming-soon' %}
|
||||
<span>{{ 'collections.general.coming_soon' | t }}</span>
|
||||
{% else %}
|
||||
<span class="product-thumbnail__price price {% if product_compare_at_price_max > product_price %}sale{% endif %}">
|
||||
{% if product.price_varies %}
|
||||
<small><em>{{ 'products.general.from' | t }}</em></small>
|
||||
{% endif %}
|
||||
{% if product_price > 0 %}
|
||||
<span class="money">
|
||||
{%
|
||||
render 'price-element',
|
||||
price: product_price
|
||||
%}
|
||||
</span>
|
||||
{% else %}
|
||||
{{ settings.free_price_text }}
|
||||
{% endif %}
|
||||
{%- assign variant = product.selected_or_first_available_variant -%}
|
||||
|
||||
{% if product_compare_at_price_max > product_price %}
|
||||
<span class="product-thumbnail__was-price compare-at-price">
|
||||
<span class="money">
|
||||
{%
|
||||
render 'price-element',
|
||||
price: product_compare_at_price_max
|
||||
%}
|
||||
</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% if settings.select_first_available_variant %}
|
||||
{%- assign variant_for_unit_price = product.variants | sort: 'price' | first -%}
|
||||
{%
|
||||
render 'unit-price',
|
||||
item: variant_for_unit_price,
|
||||
class: 'product-thumbnail__unit-price'
|
||||
%}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if settings.enable_quickshop %}
|
||||
{%
|
||||
render 'product-thumbnail__quick-shop-button',
|
||||
product: product
|
||||
%}
|
||||
{% endif %}
|
||||
|
||||
{% if hover_enabled %}
|
||||
{% if settings.enable_shopify_collection_badges %}
|
||||
|
||||
{% comment %}<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>{% endcomment %}
|
||||
|
||||
{% comment %}Judge.Me preview stars{% endcomment %}
|
||||
{% unless product.metafields.judgeme.badge contains "data-number-of-reviews='0'" %}
|
||||
<div style='{{ jm_style }}' class='jdgm-widget jdgm-preview-badge text-align-{{ settings.thumbnail_text_alignment }}' data-id='{{ product.id }}'
|
||||
data-template='{% if concierge_install == true or concierge_install == nil %}{{ template }}{% else %}manual-installation{% endif %}'
|
||||
data-auto-install='{% if auto_install != nil %}{{ auto_install }}{% else %}false{% endif %}'>
|
||||
{{ product.metafields.judgeme.badge }}
|
||||
</div>
|
||||
{% endunless %}
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="thumbnail__caption text-align-{{ settings.thumbnail_text_alignment }}">
|
||||
{%
|
||||
render 'product-thumbnail__product-info',
|
||||
product: product,
|
||||
collection_handles: collection_handles
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{%
|
||||
render 'product-thumbnail__swatch',
|
||||
product: product
|
||||
%}
|
||||
|
||||
{% if hover_enabled == false %}
|
||||
{% if settings.enable_shopify_collection_badges %}
|
||||
|
||||
{% comment %}<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>{% endcomment %}
|
||||
|
||||
{% comment %}Judge.Me preview stars{% endcomment %}
|
||||
{% unless product.metafields.judgeme.badge contains "data-number-of-reviews='0'" %}
|
||||
<div style='{{ jm_style }}' class='jdgm-widget jdgm-preview-badge text-align-{{ settings.thumbnail_text_alignment }}' data-id='{{ product.id }}'
|
||||
data-template='{% if concierge_install == true or concierge_install == nil %}{{ template }}{% else %}manual-installation{% endif %}'
|
||||
data-auto-install='{% if auto_install != nil %}{{ auto_install }}{% else %}false{% endif %}'>
|
||||
{{ product.metafields.judgeme.badge }}
|
||||
</div>
|
||||
{% endunless %}
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -0,0 +1,100 @@
|
||||
{% liquid
|
||||
|
||||
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
|
||||
|
||||
assign product_price = product.price
|
||||
assign product_compare_at_price_max = product.compare_at_price_max
|
||||
assign product_compare_at_price = product.compare_at_price
|
||||
|
||||
if active_discount
|
||||
assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
|
||||
|
||||
if product_price < product.price and product_compare_at_price == 0 or product_compare_at_price == blank
|
||||
assign product_compare_at_price = product.price
|
||||
endif
|
||||
|
||||
if product_price < product.price and product_compare_at_price_max == 0 or product_compare_at_price_max == blank
|
||||
assign product_compare_at_price_max = product.price_max
|
||||
endif
|
||||
endif
|
||||
%}
|
||||
<div class="product-thumbnail">
|
||||
{% if settings.display_vendor %}
|
||||
<span class="product-thumbnail__vendor">{{ product.vendor }}</span>
|
||||
{% endif %}
|
||||
|
||||
{% if hover_enabled %}
|
||||
<span class="product-thumbnail__title">{{ product.title }}</span>
|
||||
{% else %}
|
||||
<a href="{{ product.url | within: collection }}" class="product-thumbnail__title">{{ product.title }}</a>
|
||||
{% endif %}
|
||||
|
||||
{% if collection_handles contains 'coming-soon' %}
|
||||
{% if settings.stickers_enabled == false %}
|
||||
{{ 'collections.general.coming_soon' | t }}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<span class="product-thumbnail__price price {% if product_compare_at_price_max > product_price %}sale{% endif %}">
|
||||
{% if product.price_varies and product_price > 0 %}
|
||||
<small><em>{{ 'products.general.from' | t }}</em></small>
|
||||
{% endif %}
|
||||
{% if product_price > 0 %}
|
||||
<span class="money">
|
||||
{%
|
||||
render 'price-element',
|
||||
price: product_price
|
||||
%}
|
||||
</span>
|
||||
{% else %}
|
||||
{{ settings.free_price_text }}
|
||||
{% endif %}
|
||||
{%- assign variant = product.selected_or_first_available_variant -%}
|
||||
{% liquid
|
||||
assign variant_price = variant.price
|
||||
assign variant_compare_at_price = variant.compare_at_price
|
||||
|
||||
if active_discount
|
||||
assign variant_price = variant.metafields.app--168074346497.auto_discounted_price.value | default: variant.price
|
||||
assign variant_compare_at_price = variant.compare_at_price
|
||||
|
||||
if shop.metafields.app--168074346497.discount_percentage.value > 0.005
|
||||
assign discount_percentage = shop.metafields.app--168074346497.discount_percentage.value | times: 1.0
|
||||
assign deducted_percentage = 1.0 | minus: discount_percentage
|
||||
assign variant_price = variant.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
||||
endif
|
||||
|
||||
if variant_price < variant.price and variant_compare_at_price == 0 or variant_compare_at_price == blank
|
||||
assign variant_compare_at_price = variant.price
|
||||
endif
|
||||
endif
|
||||
%}
|
||||
{% if variant_price < variant_compare_at_price %}
|
||||
<span class="product-thumbnail__was-price compare-at-price">
|
||||
<span class="money">
|
||||
{%
|
||||
render 'price-element',
|
||||
price: variant_compare_at_price
|
||||
%}
|
||||
</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% if settings.select_first_available_variant %}
|
||||
{%- assign variant_for_unit_price = product.variants | sort: 'price' | first -%}
|
||||
{%
|
||||
render 'unit-price',
|
||||
item: variant_for_unit_price,
|
||||
class: 'product-thumbnail__unit-price'
|
||||
%}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -0,0 +1,483 @@
|
||||
{% comment %}
|
||||
Product snippet
|
||||
|
||||
@param product
|
||||
@param selected_variant
|
||||
@param width
|
||||
@param css_class
|
||||
@param display_social_buttons
|
||||
@param display_thumbnails
|
||||
@param enable_product_lightbox
|
||||
@param enable_shopify_review_comments
|
||||
@param enable_thumbnail_slider
|
||||
@param enable_zoom
|
||||
@param gallery_arrows
|
||||
@param product_description_position
|
||||
@param product_height
|
||||
@param set_product_height
|
||||
@param slideshow_transition
|
||||
@param stickers_enabled
|
||||
@param tag_style
|
||||
@param thumbnail_position
|
||||
@param video_looping
|
||||
@param section_onboarding
|
||||
{% endcomment %}
|
||||
|
||||
{% comment %} HTML markup {% endcomment %}
|
||||
|
||||
<div class="product_section
|
||||
js-product_section
|
||||
container
|
||||
is-justify-space-between
|
||||
has-padding-bottom
|
||||
{% if product_images_position == 'right' %}
|
||||
is-flex-row-reverse
|
||||
{% endif %}">
|
||||
|
||||
<div class="product__images
|
||||
one-half
|
||||
column
|
||||
medium-down--one-whole">
|
||||
{% if section_onboarding %}
|
||||
<div class="featured-product__images">
|
||||
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
|
||||
</div>
|
||||
{% else %}
|
||||
{%
|
||||
render 'product__images',
|
||||
product: product,
|
||||
display_thumbnails: display_thumbnails,
|
||||
thumbnail_position: thumbnail_position,
|
||||
enable_thumbnail_slider: enable_thumbnail_slider,
|
||||
product_height: product_height,
|
||||
set_product_height: set_product_height,
|
||||
video_looping: video_looping
|
||||
gallery_arrows: gallery_arrows,
|
||||
slideshow_transition: slideshow_transition,
|
||||
enable_product_lightbox: enable_product_lightbox,
|
||||
enable_zoom: enable_zoom
|
||||
%}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="product__information
|
||||
has-product-sticker
|
||||
one-half
|
||||
column
|
||||
medium-down--one-whole">
|
||||
|
||||
{% comment %} Sale sticker {% endcomment %}
|
||||
{% if stickers_enabled %}
|
||||
{% assign collection_handles = product.collections | map: 'handle' %}
|
||||
{%
|
||||
render 'product-thumbnail__sticker',
|
||||
context: 'product',
|
||||
collection_handles: collection_handles,
|
||||
%}
|
||||
{% endif %}
|
||||
|
||||
{%- for block in section.blocks -%}
|
||||
<div class="product-block
|
||||
product-block--{{ block.type | downcase | replace: '_', '-' }}
|
||||
{% if forloop.first == true %}
|
||||
product-block--first
|
||||
{% endif %}"
|
||||
{{ block.shopify_attributes }}>
|
||||
|
||||
{%- if block.type == 'vendor' -%}
|
||||
{% comment %} Vendor {% endcomment %}
|
||||
<p class="vendor">
|
||||
<span class="vendor">
|
||||
{% if section_onboarding %}
|
||||
Vendor name
|
||||
{% else %}
|
||||
{{ product.vendor | link_to_vendor }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
{%- elsif block.type == 'sku' -%}
|
||||
{% comment %} Sku {% endcomment %}
|
||||
<p class="sku">
|
||||
{% if section_onboarding %}
|
||||
1234567890
|
||||
{% else %}
|
||||
{{ selected_variant.sku }}
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
{%- elsif block.type == 'title' -%}
|
||||
{% comment %} Name {% endcomment %}
|
||||
<h1 class="product_name title">
|
||||
{% if section_id == 'quickshop' %}
|
||||
<a href="{{ product.url }}">{{ product.title }}</a>
|
||||
{% elsif section_onboarding %}
|
||||
{{ 'homepage.onboarding.product_title' | t }}
|
||||
{% else %}
|
||||
{{ product.title }}
|
||||
{% endif %}
|
||||
</h1>
|
||||
|
||||
{%- elsif block.type == 'size-chart' -%}
|
||||
{% comment %} Size chart {% endcomment %}
|
||||
{% for tag in product.tags %}
|
||||
{% if tag contains 'meta-size-chart-' %}
|
||||
{% assign meta-size-chart = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% comment %} Size chart Mobile {% endcomment %}
|
||||
{% if block.settings.size_chart != blank or meta-size-chart %}
|
||||
<a href="javascript:;" class="product__size-chart size-chart--medium-down" data-fancybox data-src="#size-chart{{ product.id }}" data-type="inline">{{ 'products.product.size_chart' | t }} {% render 'icon', name: 'right-caret' %}</a>
|
||||
{% render 'popup-size-chart', product_id: product.id %}
|
||||
{% endif %}
|
||||
{% comment %} Size chart {% endcomment %}
|
||||
{% if block.settings.size_chart != blank or meta-size-chart %}
|
||||
<a href="javascript:;" class="product__size-chart medium-down--hidden" data-fancybox data-src="#size-chart{{ product.id }}" data-type="inline">{{ 'products.product.size_chart' | t }} {% render 'icon', name: 'right-caret' %}</a>
|
||||
{% render 'popup-size-chart', product_id: product.id %}
|
||||
{% endif %}
|
||||
|
||||
{%- elsif block.type == 'price' -%}
|
||||
{% comment %} Price {% endcomment %}
|
||||
<div class="modal_price subtitle" data-display-savings="{{ block.settings.display_savings }}">
|
||||
{% if section_onboarding %}
|
||||
<span class="money">$49.00</span>
|
||||
{% else %}
|
||||
{% comment %}Inject @pixelunion/shopify-price-ui/price-ui begin{% endcomment %}
|
||||
<div class="price-ui price-ui--loading" data-price-ui>
|
||||
<noscript>
|
||||
<style>
|
||||
.price-ui--loading {
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
</style>
|
||||
</noscript>
|
||||
{% assign compare_at_price = false %}
|
||||
|
||||
{% if product.compare_at_price and product.compare_at_price != product.price %}
|
||||
{% if product.compare_at_price_varies %}
|
||||
{%- capture price_min -%}
|
||||
{%-
|
||||
render 'price-ui-templates',
|
||||
template: 'price-min',
|
||||
value: product.compare_at_price_min,
|
||||
-%}
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- capture price_max -%}
|
||||
{%-
|
||||
render 'price-ui-templates',
|
||||
template: 'price-max',
|
||||
value: product.compare_at_price_max,
|
||||
-%}
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- assign compare_at_price = 'product.price.range_html' | t: price_min: price_min, price_max: price_max -%}
|
||||
{% else %}
|
||||
{%- capture compare_at_price -%}
|
||||
{%-
|
||||
render 'price-ui-templates',
|
||||
template: 'price',
|
||||
value: product.compare_at_price,
|
||||
-%}
|
||||
{%- endcapture -%}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if product.price_varies %}
|
||||
{%- capture price_min -%}
|
||||
{%-
|
||||
render 'price-ui-templates',
|
||||
template: 'price-min',
|
||||
value: product.price_min,
|
||||
-%}
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- capture price_max -%}
|
||||
{%-
|
||||
render 'price-ui-templates',
|
||||
template: 'price-max',
|
||||
value: product.price_max,
|
||||
-%}
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- assign price = 'product.price.range_html' | t: price_min: price_min, price_max: price_max -%}
|
||||
{% else %}
|
||||
{%- capture price -%}
|
||||
{%-
|
||||
render 'price-ui-templates',
|
||||
template: 'price',
|
||||
value: product.price,
|
||||
-%}
|
||||
{%- endcapture -%}
|
||||
{% endif %}
|
||||
|
||||
{%-
|
||||
render 'price-ui-templates',
|
||||
template: 'price-ui',
|
||||
compare_at_price: compare_at_price,
|
||||
price: price,
|
||||
unit_pricing: false,
|
||||
-%}
|
||||
</div>
|
||||
{% comment %}Inject @pixelunion/shopify-price-ui/price-ui end{% endcomment %}
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{%- elsif block.type == 'description' -%}
|
||||
{% comment %} Description {% endcomment %}
|
||||
{% if block.settings.custom_description != blank %}
|
||||
<div class="description content has-padding-top">
|
||||
{{ block.settings.custom_description }}
|
||||
</div>
|
||||
{% elsif section_onboarding %}
|
||||
<div class="description content has-padding-top">
|
||||
<p>
|
||||
{{ 'homepage.onboarding.product_description' | t }}
|
||||
</p>
|
||||
</div>
|
||||
{% else %}
|
||||
{% if product.description != blank %}
|
||||
<div class="description content has-padding-top">
|
||||
{{ product.description | split: '<!-- split -->' | first }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{%- elsif block.type == 'form' -%}
|
||||
{% comment %} Purchase form {% endcomment %}
|
||||
{% if section_onboarding %}
|
||||
<div class="product-form-container has-padding-top">
|
||||
<div class="purchase-details">
|
||||
<div class="purchase-details__buttons purchase-details__spb--false">
|
||||
<button name="add" class="action_button button button--add-to-cart add_to_cart" data-label={{ add_to_cart_label | json }}><span class="text">{{ 'products.product.add_to_cart' | t }}</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="product-form-container has-padding-top">
|
||||
|
||||
{% comment %} Notify form {% endcomment %}
|
||||
{% render 'product__notify-me-form', product: product %}
|
||||
|
||||
{% comment %} Product form {% endcomment %}
|
||||
{% unless collection_handles contains 'coming-soon' %}
|
||||
{%
|
||||
render 'product__form',
|
||||
context: 'product',
|
||||
product: product,
|
||||
sold_out_options: sold_out_options,
|
||||
selected_variant: selected_variant,
|
||||
show_payment_button: block.settings.show_payment_button,
|
||||
collection_handles: collection_handles
|
||||
%}
|
||||
{% endunless %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{%- elsif block.type == 'product-links' -%}
|
||||
{% comment %} Collections, type, tags {% endcomment %}
|
||||
{% if block.settings.show_collections or block.settings.show_tags or block.settings.show_type %}
|
||||
<div class="product__classification-links has-padding-top">
|
||||
{% if block.settings.show_collections %}
|
||||
<p class="product__collections-list tags">
|
||||
<span class="product__classification-title">{{ 'products.product.collections' | t }}:</span>
|
||||
{% for col in product.collections %}
|
||||
<span class="tag tag--{{ tag_style }}">
|
||||
<a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>
|
||||
</span>
|
||||
{% endfor %}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% if block.settings.show_type %}
|
||||
<p class="product__type-list tags">
|
||||
<span class="product__classification-title">{{ 'products.product.product_types' | t }}:</span>
|
||||
<span class="tag tag--{{ tag_style }}">{{ product.type | link_to_type }}</span>
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% if block.settings.show_tags and product.tags.size > 0 %}
|
||||
<p class="product__tags-list tags">
|
||||
<span class="product__classification-title">{{ 'products.product.tags' | t }}:</span>
|
||||
{% for tag in product.tags %}
|
||||
{% unless tag contains 'meta-' %}
|
||||
<span class="tag tag--{{ tag_style }}">
|
||||
<a href="{{ routes.collections_url }}/{% if collection %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}" title="{{ 'products.product.products_tagged' | t: tag: tag }}">{{ tag }}</a>
|
||||
</span>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{%- elsif block.type == 'collapsible-tab' -%}
|
||||
{% if block.settings.content != blank or block.settings.page.content != blank%}
|
||||
<div class="product__accordion accordion" {{ block.shopify_attributes }}>
|
||||
<details id="Details-{{ block.id }}-{{ section.id }}">
|
||||
<summary>
|
||||
<div class="summary__title">
|
||||
{% render 'icon-accordion', icon: block.settings.icon %}
|
||||
<h2 class="h4 accordion__title">
|
||||
{{ block.settings.heading | default: block.settings.page.title }}
|
||||
</h2>
|
||||
</div>
|
||||
{% render 'icon-caret' %}
|
||||
</summary>
|
||||
<div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
|
||||
{{ block.settings.content }}
|
||||
{{ block.settings.page.content }}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{%- elsif block.type == 'share' -%}
|
||||
{% comment %} Social share icons {% endcomment %}
|
||||
<div class="product__social-share has-padding-top">
|
||||
{% render 'social-share-buttons' %}
|
||||
</div>
|
||||
|
||||
{%- elsif block.type == 'text' -%}
|
||||
{% comment %} Text {% endcomment %}
|
||||
<div class="product-text">
|
||||
{{ block.settings.text }}
|
||||
</div>
|
||||
{% elsif block.type == '@app' %}
|
||||
<div class="product-app">
|
||||
{% render block %}
|
||||
</div>
|
||||
|
||||
{% elsif block.type == 'related_products' %}
|
||||
{% if block.settings.product_list != blank %}
|
||||
{% render 'product__related-products',
|
||||
block_id: block.id,
|
||||
title: block.settings.title,
|
||||
product_list: block.settings.product_list
|
||||
%}
|
||||
{% endif %}
|
||||
|
||||
{% elsif block.type == 'related_items' %}
|
||||
{% assign grid_items = '' %}
|
||||
|
||||
{% if product.metafields.product_ref.product_link != blank %}
|
||||
{% capture grid_item %}
|
||||
{% render 'related-items__product-grid-item', product: product.metafields.product_ref.product_link.value %}
|
||||
{% endcapture %}
|
||||
|
||||
{% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
|
||||
{% endif %}
|
||||
|
||||
{% if product.metafields.my_fields.product_link_2 != blank %}
|
||||
{% capture grid_item %}
|
||||
{% render 'related-items__product-grid-item', product: product.metafields.my_fields.product_link_2.value %}
|
||||
{% endcapture %}
|
||||
{% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
|
||||
{% endif %}
|
||||
|
||||
{% if product.metafields.my_fields.product_variant_link_1 != blank %}
|
||||
{% capture grid_item %}
|
||||
{% render 'related-items__variant-grid-item', variant: product.metafields.my_fields.product_variant_link_1.value %}
|
||||
{% endcapture %}
|
||||
|
||||
{% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
|
||||
{% endif %}
|
||||
|
||||
{% if product.metafields.my_fields.product_variant_link_2 != blank %}
|
||||
{% capture grid_item %}
|
||||
{% render 'related-items__variant-grid-item', variant: product.metafields.my_fields.product_variant_link_2.value %}
|
||||
{% endcapture%}
|
||||
{% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
|
||||
{% endif %}
|
||||
|
||||
{% if product.metafields.my_fields.product_link_3 != blank %}
|
||||
{% capture grid_item %}
|
||||
{% render 'related-items__product-grid-item', product: product.metafields.my_fields.product_link_3.value %}
|
||||
{% endcapture%}
|
||||
{% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
|
||||
{% endif %}
|
||||
{% if product.metafields.my_fields.product_link_4 != blank %}
|
||||
{% capture grid_item %}
|
||||
{% render 'related-items__product-grid-item', product: product.metafields.my_fields.product_link_4.value %}
|
||||
{% endcapture%}
|
||||
{% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
|
||||
{% endif %}
|
||||
|
||||
{% if product.metafields.my_fields.product_variant_link_3 != blank %}
|
||||
{% capture grid_item %}
|
||||
{% render 'related-items__variant-grid-item', variant: product.metafields.my_fields.product_variant_link_3.value %}
|
||||
{% endcapture%}
|
||||
{% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
|
||||
{% endif %}
|
||||
|
||||
{% assign grid_item_array = grid_items | split: "#*#" %}
|
||||
|
||||
{% render 'product__related-items',
|
||||
block_id: block.id,
|
||||
title: block.settings.title,
|
||||
product_list: grid_item_array,
|
||||
limit: grid_item_array.size,
|
||||
per_slide: 3,
|
||||
align_height: false,
|
||||
height: 150,
|
||||
show_gutter: true
|
||||
%}
|
||||
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
{%- endfor -%}
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ATTENTION HERE -->
|
||||
<script type="text/javascript">
|
||||
function waitForElm(selector) {
|
||||
return new Promise(resolve => {
|
||||
if (document.querySelector(selector)) {
|
||||
return resolve(document.querySelector(selector));
|
||||
}
|
||||
const observer = new MutationObserver(mutations => {
|
||||
if (document.querySelector(selector)) {
|
||||
observer.disconnect();
|
||||
resolve(document.querySelector(selector));
|
||||
}
|
||||
});
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
waitForElm('square-placement').then((elm) => {
|
||||
console.log("afterpay placement appeared");
|
||||
setTimeout(() => {
|
||||
const afterpayPrice = document.querySelector('square-placement')?.shadowRoot?.querySelector('.afterpay-main-text strong');
|
||||
const yagiPrice = document.querySelector(".yagi-discounted-price")?.textContent;
|
||||
if(afterpayPrice && yagiPrice){
|
||||
var installmentPrice = parseCurrencyFloat(yagiPrice) / 4.0;
|
||||
afterpayPrice.textContent = `$${installmentPrice.toFixed(2)}`;
|
||||
}
|
||||
}, 400);
|
||||
});
|
||||
document.addEventListener("yagi:updatedSelectedPrice", (event) => {
|
||||
const price = event.detail?.price;
|
||||
if(price){
|
||||
var installmentPrice = parseCurrencyFloat(price) / 4.0;
|
||||
const afterpayPrice = document.querySelector('square-placement')?.shadowRoot?.querySelector('.afterpay-main-text strong');
|
||||
if(afterpayPrice){
|
||||
setTimeout(() => {
|
||||
afterpayPrice.textContent = `$${installmentPrice.toFixed(2)}`;
|
||||
}, 10);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
console.log("Selected price:", price);
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
@@ -0,0 +1,192 @@
|
||||
{% comment %}
|
||||
----------------
|
||||
Optional values
|
||||
product_recommendations: <boolean>
|
||||
{% endcomment %}
|
||||
|
||||
{% comment %}Check for related products and increase limit by one (to offset the currently selected product that is removed from the product loop){% endcomment %}
|
||||
|
||||
{%- assign limit = limit | plus: 0 -%}
|
||||
{%- assign loop_limit = limit | plus: 1 -%}
|
||||
{%- assign hover_enabled = block.settings.show_related_products_title_on_hover -%}
|
||||
|
||||
{%- assign visible_products = products_per | plus: 0 -%}
|
||||
|
||||
{%- assign hover_enabled = settings.thumbnail_hover_enabled -%}
|
||||
|
||||
{% liquid
|
||||
|
||||
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
|
||||
|
||||
assign product_price = product.price
|
||||
assign product_compare_at_price_max = product.compare_at_price_max
|
||||
assign product_compare_at_price = product.compare_at_price
|
||||
|
||||
if active_discount
|
||||
assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
|
||||
|
||||
if product_price < product.price and product_compare_at_price == 0 or product_compare_at_price == blank
|
||||
assign product_compare_at_price = product.price
|
||||
endif
|
||||
|
||||
if product_price < product.price and product_compare_at_price_max == 0 or product_compare_at_price_max == blank
|
||||
assign product_compare_at_price_max = product.price_max
|
||||
endif
|
||||
endif
|
||||
|
||||
assign variant_price = variant.price
|
||||
assign variant_compare_at_price = variant.compare_at_price
|
||||
|
||||
if active_discount
|
||||
assign variant_price = variant.metafields.app--168074346497.auto_discounted_price.value | default: variant.price
|
||||
assign variant_compare_at_price = variant.compare_at_price
|
||||
|
||||
if shop.metafields.app--168074346497.discount_percentage.value > 0.005
|
||||
assign discount_percentage = shop.metafields.app--168074346497.discount_percentage.value | times: 1.0
|
||||
assign deducted_percentage = 1.0 | minus: discount_percentage
|
||||
assign variant_price = variant.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
||||
endif
|
||||
|
||||
if variant_price < variant.price and variant_compare_at_price == 0 or variant_compare_at_price == blank
|
||||
assign variant_compare_at_price = variant.price
|
||||
endif
|
||||
endif
|
||||
%}
|
||||
|
||||
|
||||
{%- if variant.product.metafields.inventory.ShappifyHidden == 'true' -%}{%- continue -%}{%- endif -%}
|
||||
{%- assign collection_handles = variant.product.collections | map: 'handle' -%}
|
||||
|
||||
{% if variant.product.id != skip_product.id %}
|
||||
|
||||
<div class="product-wrap">
|
||||
<div class="product-image__wrapper">
|
||||
<div class="image__container product__imageContainer">
|
||||
<a href="{{ variant.url | within: collection }}">
|
||||
|
||||
{% comment %} {% if settings.stickers_enabled == true %}
|
||||
{%
|
||||
render 'product-thumbnail__sticker',
|
||||
product: product,
|
||||
context: 'product',
|
||||
collection_handles: collection_handles
|
||||
%}
|
||||
{% endif %}{% endcomment %}
|
||||
|
||||
{% comment %} Primary image {% endcomment %}
|
||||
{%
|
||||
render 'image-element',
|
||||
image: variant.featured_image,
|
||||
alt: alt_text,
|
||||
object_fit: align_height,
|
||||
max_height: height
|
||||
%}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% if hover_enabled or settings.enable_quickshop %}
|
||||
<a href="{{ variant.url | within: collection }}">
|
||||
<div class="thumbnail-overlay__container">
|
||||
{% if hover_enabled %}
|
||||
<div class="quick-shop__info animated fadeInDown">
|
||||
<div class="thumbnail-overlay">
|
||||
<div class="info text-align-{{ settings.thumbnail_text_alignment }}">
|
||||
|
||||
<div class="product-thumbnail">
|
||||
{% if settings.display_vendor %}
|
||||
<span class="product-thumbnail__vendor">{{ variant.product.vendor }}</span>
|
||||
{% endif %}
|
||||
|
||||
{% if hover_enabled %}
|
||||
<span class="product-thumbnail__title">{{ variant.product.title }} - {{ variant.title }}</span>
|
||||
{% else %}
|
||||
<a href="{{ variant.url | within: collection }}" class="product-thumbnail__title">{{ variant.product.title }} - {{ variant.title }}</a>
|
||||
{% endif %}
|
||||
|
||||
{% if collection_handles contains 'coming-soon' %}
|
||||
{% if settings.stickers_enabled == false %}
|
||||
{{ 'collections.general.coming_soon' | t }}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<span class="product-thumbnail__price price {% if product_compare_at_price_max > product_price %}sale{% endif %}">
|
||||
{% if variant_price > 0 %}
|
||||
<span class="money">
|
||||
{%
|
||||
render 'price-element',
|
||||
price: variant_price
|
||||
%}
|
||||
</span>
|
||||
{% else %}
|
||||
{{ settings.free_price_text }}
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if settings.enable_quickshop %}
|
||||
{%
|
||||
render 'product-thumbnail__quick-shop-button',
|
||||
product: variant.product
|
||||
%}
|
||||
{% endif %}
|
||||
|
||||
{% if hover_enabled %}
|
||||
{% if settings.enable_shopify_collection_badges %}
|
||||
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if hover_enabled == false %}
|
||||
<div class="thumbnail__caption text-align-{{ settings.thumbnail_text_alignment }}">
|
||||
<div class="product-thumbnail">
|
||||
{% if settings.display_vendor %}
|
||||
<span class="product-thumbnail__vendor">{{ variant.product.vendor }}</span>
|
||||
{% endif %}
|
||||
|
||||
{% if hover_enabled %}
|
||||
<span class="product-thumbnail__title">{{ variant.product.title }} - {{ variant.title }}</span>
|
||||
{% else %}
|
||||
<a href="{{ variant.url | within: collection }}" class="product-thumbnail__title">{{ variant.product.title }} - {{ variant.title }}</a>
|
||||
{% endif %}
|
||||
|
||||
{% if collection_handles contains 'coming-soon' %}
|
||||
{% if settings.stickers_enabled == false %}
|
||||
{{ 'collections.general.coming_soon' | t }}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<span class="product-thumbnail__price price {% if product.compare_at_price_max > product.price %}sale{% endif %}">
|
||||
{% if variant.price > 0 %}
|
||||
<span class="money">
|
||||
{%
|
||||
render 'price-element',
|
||||
price: variant.price
|
||||
%}
|
||||
</span>
|
||||
{% else %}
|
||||
{{ settings.free_price_text }}
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
Reference in new issue
Block a user