Initial commit
This commit is contained in:
Axel committed
commit
280c88a763
2 files changed
+519
No files matched your search
@@ -0,0 +1,287 @@
|
||||
{% comment %}
|
||||
It's best to load images as JPG instead of PNG for faster
|
||||
loading, so that is our default. If you upload
|
||||
PNG files and want to keep them that way, set the line
|
||||
below to false.
|
||||
{% endcomment %}
|
||||
{%- liquid
|
||||
|
||||
unless grid_item_width
|
||||
assign grid_item_width = 'medium-up--one-quarter small--one-half'
|
||||
endunless
|
||||
-%}
|
||||
|
||||
{% liquid
|
||||
# start Yagi app code
|
||||
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 = product.compare_at_price
|
||||
|
||||
if active_discount
|
||||
assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
|
||||
|
||||
if product.metafields.app--168074346497.discount_percentage.value > 0.01
|
||||
assign deducted_percentage = 1.0 | minus: product.metafields.app--168074346497.discount_percentage.value
|
||||
|
||||
assign product_price = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
||||
|
||||
assign product_compare_at_price = product.price
|
||||
|
||||
if product.compare_at_price > product_compare_at_price
|
||||
assign product_compare_at_price = product.compare_at_price
|
||||
endif
|
||||
endif
|
||||
|
||||
if product_price < product.price and product_compare_at_price == blank
|
||||
assign product_compare_at_price = product.price
|
||||
endif
|
||||
endif
|
||||
|
||||
# end Yagi app code
|
||||
%}
|
||||
|
||||
{% comment %}
|
||||
Do not output the quick shop modal if we're loading related products
|
||||
through another quick shop modal. Determined by checking the product.ajax template suffix.
|
||||
These are loaded for product.sections templates but quickly removed
|
||||
in JS before appending the related section.
|
||||
{% endcomment %}
|
||||
{%- liquid
|
||||
assign enable_quick_shop = settings.quick_shop_enable
|
||||
if no_modal
|
||||
assign enable_quick_shop = false
|
||||
endif
|
||||
if template == 'product.ajax'
|
||||
assign enable_quick_shop = false
|
||||
endif
|
||||
|
||||
assign on_sale = false
|
||||
if product_compare_at_price > product_price
|
||||
assign on_sale = true
|
||||
endif
|
||||
|
||||
assign sold_out = true
|
||||
if product.available
|
||||
assign sold_out = false
|
||||
endif
|
||||
|
||||
assign product_tags = product.tags | join: ','
|
||||
assign has_custom_label = false
|
||||
if product.metafields.theme.label and product.metafields.theme.label != blank
|
||||
assign has_custom_label = true
|
||||
assign custom_label = product.metafields.theme.label.value
|
||||
elsif product_tags contains '_label_'
|
||||
for tag in product.tags
|
||||
if tag contains '_label_'
|
||||
assign tag_starts_with = tag | slice: 0
|
||||
if tag_starts_with == '_'
|
||||
assign has_custom_label = true
|
||||
assign custom_label = tag | replace: '_label_', ''
|
||||
endif
|
||||
endif
|
||||
endfor
|
||||
endif
|
||||
-%}
|
||||
|
||||
<div
|
||||
class="grid__item grid-product {{ grid_item_width }}{% if settings.product_hover_details %} grid-product__hover-details{% endif %}"
|
||||
data-aos
|
||||
data-product-grid
|
||||
data-id="{{ product.id }}">
|
||||
<div class="grid-product__content">
|
||||
{%- if has_custom_label -%}
|
||||
<div class="grid-product__tag grid-product__tag--custom">
|
||||
{{ custom_label }}
|
||||
</div>
|
||||
{%- else -%}
|
||||
{%- if sold_out -%}
|
||||
<div class="grid-product__tag grid-product__tag--sold-out">
|
||||
{{ 'products.product.sold_out' | t }}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- if on_sale and sold_out == false -%}
|
||||
<div class="grid-product__tag grid-product__tag--sale">
|
||||
{%- if settings.product_save_amount -%}
|
||||
{%- if settings.product_save_type == 'dollar' -%}
|
||||
{%- capture saved_amount -%}{{ product_compare_at_price | minus: product_price | money }}{%- endcapture -%}
|
||||
{%- else -%}
|
||||
{%- capture saved_amount -%}{{ product_compare_at_price | minus: product_price | times: 100.0 | divided_by: product_compare_at_price | round }}%{%- endcapture -%}
|
||||
{%- endif -%}
|
||||
{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
|
||||
{%- else -%}
|
||||
{{ 'products.general.sale' | t }}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- liquid
|
||||
assign fixed_aspect_ratio = false
|
||||
unless settings.product_grid_image_size == 'natural'
|
||||
assign fixed_aspect_ratio = true
|
||||
endunless
|
||||
|
||||
assign preview_image = product.featured_media.preview_image
|
||||
|
||||
assign image_limit = 1
|
||||
assign image_count = 0
|
||||
if settings.product_hover_image
|
||||
assign image_limit = 10
|
||||
endif
|
||||
|
||||
assign slider_image_padding = '100%'
|
||||
|
||||
if image_style == 'circle'
|
||||
assign fixed_aspect_ratio = true
|
||||
assign imageRatio = 'square'
|
||||
endif
|
||||
-%}
|
||||
|
||||
<a
|
||||
href="{{ product.url | within: collection }}"
|
||||
class="grid-product__link{% if sold_out %} grid-product__link--disabled{% endif %}{% if enable_quick_shop %} quick-product__btn js-screen-open-product-{{ product.id }} js-no-transition{% endif %}"
|
||||
data-product-id="{{ product.id }}"
|
||||
data-url="{{ product.url | within: collection }}">
|
||||
<div id="ProductGridSlider-{{ product.id }}"
|
||||
class="slideshow-wrapper product-slider"
|
||||
data-image-count="{{ product.media.size }}"
|
||||
data-id="{{ product.id }}">
|
||||
{%- for media in product.media limit: image_limit -%}
|
||||
{%- assign image_count = image_count | plus: 1 -%}
|
||||
<div class="product-slide">
|
||||
<div class="image-wrap {% if image_style == 'circle' %}image-wrap--circular-image{% endif %}">
|
||||
{% capture img_class %}{%- if fixed_aspect_ratio -%}grid-product__image{% endif %} image-style--{{ image_style }}{% endcapture %}
|
||||
{%- if forloop.first -%}
|
||||
{%- if fixed_aspect_ratio -%}
|
||||
<div
|
||||
class="grid__image-ratio grid__image-ratio--{% if image_style == 'circle' %}square{% else %}{{ settings.product_grid_image_size }}{% endif %}"
|
||||
>
|
||||
{%- render 'image-element',
|
||||
img: preview_image,
|
||||
classes: img_class,
|
||||
sizes: sizes,
|
||||
sizeVariable: sizeVariable,
|
||||
fallback: fallback,
|
||||
-%}
|
||||
</div>
|
||||
{%- else -%}
|
||||
{%- assign slider_image_padding = 100 | divided_by: preview_image.aspect_ratio | append: '%' -%}
|
||||
<div class="image-wrap"
|
||||
style="height: 0; padding-bottom: {{ slider_image_padding }};"
|
||||
>
|
||||
{%- render 'image-element',
|
||||
img: preview_image,
|
||||
classes: img_class,
|
||||
sizes: sizes,
|
||||
sizeVariable: sizeVariable,
|
||||
fallback: fallback,
|
||||
widths: '750, 900, 1080',
|
||||
format: format,
|
||||
-%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- else -%}
|
||||
<div
|
||||
class="grid__image-ratio grid__image-ratio--{{ settings.product_grid_image_size }}"
|
||||
{% if settings.product_grid_image_size == 'natural' %}
|
||||
style="padding-bottom: {{ slider_image_padding }}"
|
||||
{% endif %}
|
||||
>
|
||||
{%- render 'image-element',
|
||||
img: media.preview_image,
|
||||
classes: img_class,
|
||||
sizes: sizes,
|
||||
sizeVariable: sizeVariable,
|
||||
fallback: fallback,
|
||||
-%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
{%- if product.media == blank -%}
|
||||
<div
|
||||
class="grid__image-ratio grid__image-ratio--{{ settings.product_grid_image_size }}"
|
||||
{% if settings.product_grid_image_size == 'natural' %}
|
||||
style="padding-bottom: {{ slider_image_padding }}"
|
||||
{% endif %}
|
||||
>
|
||||
{%- capture placeholder -%}product-{% cycle 1, 2, 3, 4, 5, 6 %}{%- endcapture -%}
|
||||
<div class="product-image--placeholder">{{ placeholder | placeholder_svg_tag: 'placeholder-svg' }}</div>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
{%- if image_count > 1 -%}
|
||||
{%- assign loader_duration = 1350 | times: image_count -%}
|
||||
<style>
|
||||
.product-slider.flickity-enabled[data-id="{{ product.id }}"]:after {
|
||||
animation-duration: {{ loader_duration }}ms;
|
||||
}
|
||||
</style>
|
||||
{%- endif -%}
|
||||
|
||||
<div class="grid-product__meta">
|
||||
<div class="grid-product__title">{{ product.title }}</div>
|
||||
{%- if settings.vendor_enable -%}
|
||||
<div class="grid-product__vendor">{{ product.vendor }}</div>
|
||||
{%- endif -%}
|
||||
<div class="grid-product__price">
|
||||
{%- if on_sale -%}
|
||||
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
|
||||
<del class="grid-product__price--original">{{ product_compare_at_price | money }}</del>
|
||||
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
|
||||
{%- endif -%}
|
||||
{%- if product.price_varies -%}
|
||||
{%- assign price = product_price | money -%}
|
||||
<span{% if on_sale %} class="sale-price"{% endif %}>
|
||||
{{ 'products.general.from_text_html' | t: price: price }}
|
||||
</span>
|
||||
{%- else -%}
|
||||
<span{% if on_sale %} class="sale-price"{% endif %}>
|
||||
{{ product_price | money }}
|
||||
</span>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
{%- assign product_variant = product.selected_or_first_available_variant -%}
|
||||
{%- if product_variant.unit_price_measurement -%}
|
||||
<div class="product__unit-price">
|
||||
{%- capture unit_price_base_unit -%}
|
||||
{%- if product_variant.unit_price_measurement -%}
|
||||
{%- if product_variant.unit_price_measurement.reference_value != 1 -%}
|
||||
{{ product_variant.unit_price_measurement.reference_value }}
|
||||
{%- endif -%}
|
||||
{{ product_variant.unit_price_measurement.reference_unit }}
|
||||
{%- endif -%}
|
||||
{%- endcapture -%}
|
||||
|
||||
{{ product_variant.unit_price | money }}/{{ unit_price_base_unit }}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if settings.enable_swatches and type == 'horizontal' -%}
|
||||
{%- render 'product-grid-item-swatches', product: product -%}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
{%- if settings.enable_swatches and type == blank -%}
|
||||
{%- render 'product-grid-item-swatches', product: product -%}
|
||||
{%- endif -%}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{%- if enable_quick_shop and type == blank -%}
|
||||
{%- render 'quick-shop-modal', product: product -%}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
Reference in new issue
Block a user