Created
August 19, 2020 13:16
-
-
Save dylanjhunt/563051b08f8bd933200f14f2b945fdb6 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- /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 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 %} | |
{% assign on_sale = false %} | |
{% if variant.compare_at_price > variant.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 = variant.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 %}{{ variant.compare_at_price | minus: variant.price | money_without_trailing_zeros }}{% endcapture %} | |
<p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p> | |
</div> | |
{% endif %} | |
</div> | |
<a href="{{ variant.url | within: collection }}" class="grid-product__meta"> | |
<span class="grid-product__title">{{ product.title }} - {{ variant.option1 }}</span> | |
<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.price_varies %} | |
{{ product.price_min | 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> | |
{% if section.settings.product_vendor_enable %} | |
<p class="grid-product__vendor">{{ product.vendor }}</p> | |
{% endif %} | |
</a> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment