Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save dylanjhunt/0a292c697a4b5270fe3fc40ab79bbc1c to your computer and use it in GitHub Desktop.
Save dylanjhunt/0a292c697a4b5270fe3fc40ab79bbc1c to your computer and use it in GitHub Desktop.
{% comment %}
Renders a product card using "List" style
Accepts:
- product: {Object} Product Liquid object (required)
- show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)
Usage:
{% include 'product-card-list', product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}
<div class="product-card product-card--list">
<a class="full-width-link" href="{{ variant.url | within: collection }}">
<span class="visually-hidden">{{ product.title }} - {{ variant.option1 }}</span>
</a>
<div class="list-view-item__link">
<div class="list-view-item__image-column">
<div class="list-view-item__image-wrapper product-card__image-wrapper">
{% unless product.featured_media == null %}
<img class="list-view-item__image" src="{{ variant.media | img_url: '95x95', scale: 2 }}" alt="{{ product.featured_media.alt }}">
{% endunless %}
</div>
</div>
<div class="list-view-item__title-column">
<div class="list-view-item__title" aria-hidden="true">
<span class="product-card__title">{{ product.title }} - {{ variant.option1 }}</span>
</div>
{% if show_vendor %}
<div class="list-view-item__vendor">{{ product.vendor }}</div>
{% endif %}
</div>
<div class="list-view-item__price-column">
{%- liquid
if product.title
assign compare_at_price = variant.compare_at_price
assign price = variant.price
assign available = variant.available
assign variant = variant
else
assign compare_at_price = 1999
assign price = 1999
assign available = true
endif
assign money_price = price | money
-%}
<dl class="price price--listing
{%- if available == false %} price--sold-out {% endif -%}
{%- if compare_at_price > price %} price--on-sale {% endif -%}
{%- if product.price_varies == false and product.compare_at_price_varies %} price--compare-price-hidden {% endif -%}
{%- if variant.unit_price_measurement %} price--unit-available {% endif -%}"
>
{% if show_vendor and product %}
<div class="price__vendor price__vendor--listing">
<dt>
<span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
</dt>
<dd>
{{ product.vendor }}
</dd>
</div>
{% endif %}
{%- comment -%}
Explanation of description list:
- div.price__regular: Displayed when there are no variants on sale
- div.price__sale: Displayed when a variant is a sale
- div.price__unit: Displayed when the first variant has a unit price
- div.price__availability: Displayed when the product is sold out
{%- endcomment -%}
<div class="price__regular">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--regular">
{%- if product.price_varies -%}
{{ 'products.product.from_lowest_price_html' | t: lowest_price: money_price }}
{%- else -%}
{{ money_price }}
{%- endif -%}
</span>
</dd>
</div>
<div class="price__sale">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--sale">
{%- if product.price_varies -%}
{{ 'products.product.from_lowest_price_html' | t: lowest_price: money_price }}
{%- else -%}
{{ money_price }}
{%- endif -%}
</span>
</dd>
<div class="price__compare">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s class="price-item price-item--regular">
{{ compare_at_price | money }}
</s>
</dd>
</div>
</div>
<div class="price__unit">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
</dt>
<dd class="price-unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span>
{%- if variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</dd>
</div>
<div class="price__badges price__badges--listing">
<span class="price__badge price__badge--sale" aria-hidden="true">
<span>{{ 'products.product.on_sale' | t }}</span>
</span>
<span class="price__badge price__badge--sold-out">
<span>{{ 'products.product.sold_out' | t }}</span>
</span>
</div>
</dl>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment