Add product-grid-item.liquid for older Broadcast theme
For older broadcast theme
This commit is contained in:
331
snippets/product-grid-item.liquid
Normal file
331
snippets/product-grid-item.liquid
Normal file
@@ -0,0 +1,331 @@
|
|||||||
|
{% comment %}
|
||||||
|
Renders list of products in grid layout
|
||||||
|
|
||||||
|
Accepts:
|
||||||
|
- product: {Object} product (required)
|
||||||
|
- grid_strings: {String} contains a string of grid classes
|
||||||
|
- animation_delay: {Int} animation timing for load
|
||||||
|
- last_element: {Boolean} True when custom image is taking up the first slot for the collection
|
||||||
|
and the loop is on the last element for the page.
|
||||||
|
- index: element index in the loop
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
{% render 'product-grid-item', product: product, grid_strings: grid_strings, index: index %}
|
||||||
|
{% endcomment %}
|
||||||
|
|
||||||
|
{%- liquid
|
||||||
|
assign additional_attributes = additional_attributes | default: ''
|
||||||
|
assign aos_image_delay_default = animation_delay | times: 150
|
||||||
|
assign aos_image_duration_default = animation_delay | times: 100 | plus: 800
|
||||||
|
assign aos_text_duration_default = animation_delay | times: 50 | plus: 800
|
||||||
|
assign aos_image_delay = aos_image_delay | default: aos_image_delay_default
|
||||||
|
assign aos_image_duration = aos_image_duration | default: aos_image_duration_default
|
||||||
|
assign aos_text_duration = aos_text_duration | default: aos_text_duration_default
|
||||||
|
|
||||||
|
assign product_price_raw = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
|
||||||
|
assign product_price_min_raw = product.price_min
|
||||||
|
assign product_compare_at_price_raw = product.compare_at_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_raw = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
||||||
|
assign product_price_min_raw = product_price_raw
|
||||||
|
|
||||||
|
assign product_compare_at_price_raw = product.price
|
||||||
|
|
||||||
|
if product.compare_at_price > product_compare_at_price_raw
|
||||||
|
assign product_compare_at_price_raw = product.compare_at_price
|
||||||
|
endif
|
||||||
|
elsif product_price_raw < product.price
|
||||||
|
assign product_price_min_raw = product_price_raw
|
||||||
|
assign product_compare_at_price_raw = product.price
|
||||||
|
|
||||||
|
if product.compare_at_price > product_compare_at_price_raw
|
||||||
|
assign product_compare_at_price_raw = product.compare_at_price
|
||||||
|
endif
|
||||||
|
endif
|
||||||
|
|
||||||
|
if settings.currency_code_enable
|
||||||
|
assign product_price_min = product_price_min_raw | money_with_currency
|
||||||
|
assign product_compare_at_price = product_compare_at_price_raw | money_with_currency
|
||||||
|
assign product_unit_price = product.unit_price | money_with_currency
|
||||||
|
else
|
||||||
|
assign product_price_min = product_price_min_raw | money
|
||||||
|
assign product_compare_at_price = product_compare_at_price_raw | money
|
||||||
|
assign product_unit_price = product.unit_price | money
|
||||||
|
endif
|
||||||
|
|
||||||
|
unless grid_strings
|
||||||
|
assign grid_strings = "one-whole"
|
||||||
|
endunless
|
||||||
|
|
||||||
|
assign border_class = ''
|
||||||
|
if settings.product_grid_outline == false
|
||||||
|
assign border_class = 'product-item--borderless'
|
||||||
|
endif
|
||||||
|
|
||||||
|
assign alignment_class = ''
|
||||||
|
if settings.product_grid_center == true
|
||||||
|
assign alignment_class = 'product-item--centered'
|
||||||
|
endif
|
||||||
|
-%}
|
||||||
|
|
||||||
|
{%- if settings.quickview_enable == false and settings.color_swatches -%}
|
||||||
|
{%- assign has_colors = false -%}
|
||||||
|
|
||||||
|
{%- capture swatches -%}
|
||||||
|
{%- capture swatch_translation -%}{{ 'general.swatches.color' | t }}{%- endcapture -%}
|
||||||
|
|
||||||
|
{%- assign swatch_labels = swatch_translation | append: ',' | split: ',' -%}
|
||||||
|
{%- for label in swatch_labels -%}
|
||||||
|
{%- assign sanitized_label = label | lstrip | rstrip -%}
|
||||||
|
{%- if product.options_by_name[sanitized_label].values.size > 0 -%}
|
||||||
|
{%- assign has_colors = true -%}
|
||||||
|
|
||||||
|
<form class="radio__fieldset radio__fieldset--swatches radio__fieldset--small" data-grid-swatch-form>
|
||||||
|
<div class="selector-wrapper__scrollbar" data-scrollbar data-grid-swatches data-swatch-handle="{{ product.handle }}" data-swatch-label="{{ label }}"></div>
|
||||||
|
|
||||||
|
<button type="button" class="radio__fieldset__arrow radio__fieldset__arrow--prev is-hidden" data-scrollbar-arrow-prev>
|
||||||
|
<span class="visually-hidden">{{ 'products.general.see_all' | t }}</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button type="button" class="radio__fieldset__arrow radio__fieldset__arrow--next is-hidden" data-scrollbar-arrow-next>
|
||||||
|
<span class="visually-hidden">{{ 'products.general.see_all' | t }}</span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{%- break -%}
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endfor -%}
|
||||||
|
{%- endcapture -%}
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
{%- assign double_img = false -%}
|
||||||
|
{%- if product.media[1].preview_image and settings.image_hover_enable -%}
|
||||||
|
{%- assign double_img = true -%}
|
||||||
|
{%- endif -%}
|
||||||
|
{%- assign current_variant = product.first_available_variant -%}
|
||||||
|
|
||||||
|
{%- assign product_url = product.url | within: collection -%}
|
||||||
|
|
||||||
|
{%- capture item_unique -%}product-item--{{ section.id }}-{{ index }}{%- endcapture -%}
|
||||||
|
{%- assign animation_anchor_default = item_unique | prepend: '.' -%}
|
||||||
|
{%- assign animation_anchor = animation_anchor | default: animation_anchor_default -%}
|
||||||
|
|
||||||
|
<div class="product-item {{ grid_strings }} {{ border_class }} {{ alignment_class }} {{ item_unique }}" data-product-grid-item {{ additional_attributes }}>
|
||||||
|
{%- capture over_image_content -%}
|
||||||
|
{%- assign product_tags = product.tags | join: ',' | append: ',' -%}
|
||||||
|
{%- assign preorder = false -%}
|
||||||
|
{%- assign is_preorder_meta = false -%}
|
||||||
|
{%- assign on_sale = false -%}
|
||||||
|
{%- assign sold_out = false -%}
|
||||||
|
{%- assign badge = '' -%}
|
||||||
|
|
||||||
|
{%- if product.metafields.theme.badge != blank and product.metafields.theme.badge.type == 'single_line_text_field' -%}
|
||||||
|
{%- assign badge = product.metafields.theme.badge.value -%}
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
{%- if badge == '' and product_tags contains '_badge_' -%}
|
||||||
|
{%- assign badge = product_tags | split: '_badge_' -%}
|
||||||
|
{%- assign badge = badge[1] | split: ',' | first | replace: '_', ' ' -%}
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
{%- if product.metafields.theme.preorder.type == 'boolean' and product.metafields.theme.preorder.value == true -%}
|
||||||
|
{%- assign is_preorder_meta = true -%}
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
{%- if product_tags contains '_preorder' or is_preorder_meta -%}
|
||||||
|
{%- assign preorder = true -%}
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
{%- if product_compare_at_price_raw > product_price_raw and settings.sale_tags_enable -%}
|
||||||
|
{%- assign on_sale = true -%}
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
{%- unless product.available -%}
|
||||||
|
{%- assign sold_out = true -%}
|
||||||
|
{%- endunless -%}
|
||||||
|
|
||||||
|
{%- if badge != '' -%}
|
||||||
|
<span class="badge-box">{{ badge }}</span>
|
||||||
|
{%- elsif preorder and sold_out == false -%}
|
||||||
|
<span class="preorder-box">{{ 'products.product.pre_order' | t }}</span>
|
||||||
|
{%- elsif on_sale and sold_out == false -%}
|
||||||
|
<span class="sale-box">{{ 'products.product.on_sale' | t }}</span>
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
{%- if settings.quickview_enable and current_variant -%}
|
||||||
|
<button type="button" class="quick-add-button" tabindex="-1" data-button-quick-add-mobile{% if product.has_only_default_variant %} data-quick-add-button{% endif %}>
|
||||||
|
<span class="visually-hidden">{{ 'products.general.quick_view' | t }}</span>
|
||||||
|
|
||||||
|
<svg height="18" width="18" class="svg-loader">
|
||||||
|
<circle r="7" cx="9" cy="9" />
|
||||||
|
<circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="slideup" data-quick-add-holder>
|
||||||
|
<button type="button" class="caps is-disable" data-focus-element data-quick-add-label="{{ product.handle }}" data-collection-handle="{{ collection.handle | default: 'primary' }}" {% if product.has_only_default_variant %} data-quick-add-button{% endif %} tabindex="0">
|
||||||
|
<span>
|
||||||
|
<small>{{ 'products.general.quick_view' | t }}</small>
|
||||||
|
|
||||||
|
<small>{{ 'products.product.pre_order' | t }}</small>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span>{{ 'products.general.quick_view_added' | t }}</span>
|
||||||
|
|
||||||
|
<svg height="18" width="18" class="svg-loader">
|
||||||
|
<circle r="7" cx="9" cy="9" />
|
||||||
|
<circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<span class="caps__error" data-message-error> </span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div data-quick-add-form-holder> </div>
|
||||||
|
</div>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endcapture -%}
|
||||||
|
|
||||||
|
<div class="product-item__image{% if double_img %} double__image{% endif %}" data-product-image>
|
||||||
|
<a class="product-link" href="{{ product_url }}" aria-label="{{ product.title | strip_html | escape }}" data-grid-link>
|
||||||
|
{% if product.media.size > 0 %}
|
||||||
|
<div class="product-item__bg lazyload"
|
||||||
|
data-grid-slide
|
||||||
|
data-aos="img-in"
|
||||||
|
data-aos-delay="{{ aos_image_delay }}"
|
||||||
|
data-aos-duration="{{ aos_image_duration }}"
|
||||||
|
data-aos-anchor="{{ animation_anchor }}"
|
||||||
|
data-aos-easing="ease-out-quart"
|
||||||
|
data-bgset="{% render 'bgset', image: product.featured_media.preview_image %}">
|
||||||
|
{% if settings.color_swatches and current_variant %}
|
||||||
|
{%- assign image_inner_empty = true -%}
|
||||||
|
{%- for variant in product.variants -%}
|
||||||
|
{%- if variant.featured_image != blank -%}
|
||||||
|
{%- assign image_inner_empty = false -%}
|
||||||
|
{%- assign variant_title = variant.title | replace: '"', "'" -%}
|
||||||
|
<div class="product-item__bg__inner lazyload" data-bgset="{% render 'bgset', image: variant.featured_image %}" data-variant-title="{{ variant_title }}" style="display: none;"> </div>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endfor -%}
|
||||||
|
{%- if image_inner_empty -%}
|
||||||
|
|
||||||
|
{%- endif -%}
|
||||||
|
{% else %}
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% if double_img %}
|
||||||
|
<div class="product-item__bg__under lazyload" data-bgset="{% render 'bgset', image: product.media[1].preview_image %}"> </div>
|
||||||
|
{% endif %}
|
||||||
|
{% else %}
|
||||||
|
{%- comment -%} Show "No image" if product has no media {%- endcomment -%}
|
||||||
|
{%- assign image_url_pattern = product.featured_image | img_url: '540x' | replace: '_540x.', '_{width}x.' -%}
|
||||||
|
{%- assign image_widths = "[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" -%}
|
||||||
|
|
||||||
|
<div class="product-item__bg product-item__bg--empty"
|
||||||
|
data-grid-slide
|
||||||
|
data-aos="img-in"
|
||||||
|
data-aos-delay="{{ aos_image_delay }}"
|
||||||
|
data-aos-duration="{{ aos_image_duration }}"
|
||||||
|
data-aos-anchor="{{ animation_anchor }}"
|
||||||
|
data-aos-easing="ease-out-quart">
|
||||||
|
<img
|
||||||
|
class="lazyload"
|
||||||
|
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
|
||||||
|
data-src="{{ image_url_pattern }}"
|
||||||
|
data-widths= "{{ image_widths }}"
|
||||||
|
data-aspectratio="1"
|
||||||
|
data-sizes="auto"
|
||||||
|
width="540"
|
||||||
|
height="540"
|
||||||
|
alt="{{ product.title | strip_html | escape }}">
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{{ over_image_content }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<noscript>
|
||||||
|
<a class="product-link" href="{{ product_url }}" aria-label="{{ product.title | strip_html | escape }}" data-grid-link>
|
||||||
|
<div class="product-item__image no-js-image" style="background-image:url('{{ product.featured_media.preview_image | img_url: '540x' }}'); background-size: contain; background-position: center center; background-repeat: no-repeat;"></div>
|
||||||
|
</a>
|
||||||
|
</noscript>
|
||||||
|
|
||||||
|
<div class="product-information"
|
||||||
|
data-aos="fade"
|
||||||
|
data-aos-delay="{{ aos_image_delay }}"
|
||||||
|
data-aos-duration="{{ aos_text_duration }}"
|
||||||
|
data-aos-anchor="{{ animation_anchor }}"
|
||||||
|
data-product-information>
|
||||||
|
<a class="product-link" href="{{ product_url }}" aria-label="{{ product.title | strip_html | escape }}" data-grid-link>
|
||||||
|
{%- if settings.product_grid_show_rating and product.metafields.reviews.rating.value != blank -%}
|
||||||
|
<div class="product__grid__stars">
|
||||||
|
{% render 'product-rating', product: product %}
|
||||||
|
</div>
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
<p class="product__grid__title">
|
||||||
|
{{ product.title | strip_html | escape }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{%- if product.metafields.theme.cutline != blank and product.metafields.theme.cutline.type == 'single_line_text_field' -%}
|
||||||
|
<p class="product__grid__cutline">{{ product.metafields.theme.cutline.value }}</p>
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
<span class="price{% if product_compare_at_price_raw > product_price_raw %} sale{% endif %}">
|
||||||
|
{% if product.available %}
|
||||||
|
<span class="new-price">
|
||||||
|
{% if product.price_varies %}
|
||||||
|
<small>{{ 'products.general.from' | t }}</small>
|
||||||
|
{% endif %}
|
||||||
|
{%- if product.price == 0 and product.price_varies == false -%}
|
||||||
|
{{ 'general.money.free' | t }}
|
||||||
|
{%- else -%}
|
||||||
|
{{ product_price_min }}
|
||||||
|
{%- endif -%}
|
||||||
|
</span>
|
||||||
|
{% if product_compare_at_price_raw > product_price_raw %}
|
||||||
|
<span class="old-price">{{ product_compare_at_price }}</span>
|
||||||
|
{% endif %}
|
||||||
|
{% else %}
|
||||||
|
<span class="sold-out">{{ 'products.product.sold_out' | t }}</span>
|
||||||
|
{% endif %}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- Stamped - Begin badge -->
|
||||||
|
<span class="stamped-product-reviews-badge stamped-main-badge" data-id="{{ product.id }}" data-product-title="{{ product.title | escape }}" data-product-type="{{ product.type }}" style="display: block;">{{ product.metafields.stamped.badge }}</span>
|
||||||
|
<!-- Stamped - End badge -->
|
||||||
|
|
||||||
|
{% if current_variant.unit_price %}
|
||||||
|
{% capture unit_price_separator %}
|
||||||
|
<span aria-hidden="true">/</span>
|
||||||
|
<span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
|
||||||
|
{% endcapture %}
|
||||||
|
{% capture unit_price_base_unit %}
|
||||||
|
{% if current_variant.unit_price_measurement.reference_value != 1 %}
|
||||||
|
{{ current_variant.unit_price_measurement.reference_value }}
|
||||||
|
{% endif %}
|
||||||
|
{{ current_variant.unit_price_measurement.reference_unit }}
|
||||||
|
{% endcapture %}
|
||||||
|
<br>
|
||||||
|
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
|
||||||
|
<span class="unit small">{{ product_unit_price }}{{ unit_price_separator }}{{ unit_price_base_unit }}</span>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if settings.quickview_enable == false and settings.color_swatches %}
|
||||||
|
{% if has_colors %}
|
||||||
|
<span class="grid__product-swatches-count" data-swatch-count> </span>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{{ swatches }}
|
||||||
|
{% endif %}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user