first commit
This commit is contained in:
Axel Kee
@@ -0,0 +1,166 @@
|
||||
<!-- /snippets/product-grid-item.liquid -->
|
||||
{% comment %}
|
||||
|
||||
This snippet is used to showcase each product during the loop,
|
||||
'for product in collection.products' in collection.liquid.
|
||||
|
||||
A liquid variable (grid_item_width) is set just before the this
|
||||
snippet is included to change the size of the container.
|
||||
Once the variable is set on a page, all future instances of this
|
||||
snippet will use that width. Overwrite the variable to adjust this.
|
||||
|
||||
Example
|
||||
- assign grid_item_width = 'large--one-quarter medium--one-half'
|
||||
|
||||
{% endcomment %}
|
||||
{% unless product.tags contains "wk_auction" %}
|
||||
{% unless grid_item_width %}
|
||||
{% assign grid_item_width = 'large--one-third medium--one-half' %}
|
||||
{% endunless %}
|
||||
|
||||
{% unless width %}
|
||||
{%- assign width = 310 -%}
|
||||
{% endunless %}
|
||||
{% unless height %}
|
||||
{%- assign height = 415 -%}
|
||||
{% endunless %}
|
||||
|
||||
{% liquid
|
||||
assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
|
||||
assign product_compare_at_price = 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 = 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 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 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
|
||||
%}
|
||||
{% 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 variant = product.selected_or_first_available_variant -%}
|
||||
|
||||
{% capture img_id_class %}ProductImage-{{ product.featured_media.id }}{% endcapture %}
|
||||
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_media.id }}{% endcapture %}
|
||||
{%- assign featured_image = product.featured_media.preview_image %}
|
||||
{%- assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
|
||||
|
||||
<div class="grid__item grid-product {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}">
|
||||
<div class="grid-product__wrapper">
|
||||
<div class="grid-product__image-wrapper">
|
||||
<a class="grid-product__image-link{% unless featured_image.src == blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url | within: collection }}" data-image-link>
|
||||
{% if featured_image.src == blank %}
|
||||
<img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
|
||||
{% else %}
|
||||
{% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
|
||||
<div id="{{ img_wrapper_id }}" class="product--wrapper">
|
||||
<div style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100 }}%;">
|
||||
<img class="product--image lazyload {{ img_id_class }}"
|
||||
data-src="{{ img_url }}"
|
||||
data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
|
||||
data-aspectratio="{{ featured_image.aspect_ratio }}"
|
||||
data-sizes="auto"
|
||||
alt="{{ featured_image.alt | escape }}"
|
||||
data-image>
|
||||
</div>
|
||||
</div>
|
||||
<noscript>
|
||||
<img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
|
||||
</noscript>
|
||||
{% endif %}
|
||||
</a>
|
||||
{% if sold_out %}
|
||||
<div class="grid-product__sold-out">
|
||||
<p>{{ 'products.product.sold_out_html' | t }}</p>
|
||||
</div>
|
||||
{% elsif on_sale %}
|
||||
<div class="grid-product__on-sale">
|
||||
{% capture saved_amount %}{{ product_compare_at_price | minus: product_price | money_without_trailing_zeros }}{% endcapture %}
|
||||
<p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<a href="{{ product.url | within: collection }}" class="grid-product__meta">
|
||||
<span class="grid-product__title">{{ product.title }}</span>
|
||||
{% unless product.tags contains "on_auction" or product.tags contains "wk_end_auction" or product.tags contains "upcoming_auction" %}
|
||||
<span class="grid-product__price-wrap">
|
||||
<span class="long-dash">—</span>
|
||||
<span class="grid-product__price">
|
||||
{% if on_sale %}
|
||||
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
|
||||
{% else %}
|
||||
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
|
||||
{% endif %}
|
||||
{% if product_compare_at_price > product_price %}
|
||||
<s style="opacity: 0.75;">{{ product_compare_at_price | money_without_trailing_zeros }}</s>
|
||||
{% endif %}
|
||||
{% if product.price_varies %}
|
||||
{{ product_price | money_without_trailing_zeros }}
|
||||
<span class="icon-fallback-text">
|
||||
<span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
|
||||
<span class="fallback-text">+</span>
|
||||
</span>
|
||||
{% else %}
|
||||
{{ product_price | money_without_trailing_zeros }}
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
{%- if product.price_varies == false and variant.unit_price_measurement -%}
|
||||
{%- 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 -%}
|
||||
<span>
|
||||
{%- if variant.unit_price_measurement.reference_value != 1 -%}
|
||||
{{- variant.unit_price_measurement.reference_value -}}
|
||||
{%- endif -%}
|
||||
{{ variant.unit_price_measurement.reference_unit }}
|
||||
</span>
|
||||
{%- endcapture -%}
|
||||
<span class="product-unit-price">
|
||||
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
|
||||
<span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
|
||||
</span>
|
||||
{%- endif -%}
|
||||
</span>
|
||||
{% endunless %}
|
||||
<div class="wk-category-auction" data-prod="{{ product.id }}" cust-id="{{ customer.id }}"></div>
|
||||
{% if section.settings.product_vendor_enable %}
|
||||
<p class="grid-product__vendor">{{ product.vendor }}</p>
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
Reference in New Issue
Block a user