Created
March 15, 2016 15:11
-
-
Save levinmejia/e73b8355731027b4c157 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-card.liquid --> | |
{% comment %} | |
The product card snippet is passed a liquid object, used in this file | |
as "product". The object is either "product" or "item", the latter if | |
it is from search results. | |
{% endcomment %} | |
<a href="{{ product.url | within: collection }}" class="product-card"> | |
<div class="product-card__image-wrapper"> | |
<img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" class="product-card__image"> | |
</div> | |
<div class="product-card__info"> | |
{% if settings.product_vendor_enable %} | |
<div class="product-card__brand">{{ product.vendor }}</div> | |
{% endif %} | |
<div class="product-card__name">{{ product.title }}</div> | |
{% if product.available %} | |
<div class="product-card__price"> | |
{% if product.compare_at_price > product.price %} | |
{% comment %} | |
Product is on sale | |
{% endcomment %} | |
{% if product.price_varies %} | |
{% assign sale_price = product.price | money_without_trailing_zeros %} | |
{{ 'products.product.on_sale_from_html' | t: price: sale_price }} | |
{% else %} | |
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span> | |
<s class="product-card__regular-price">{{ product.compare_at_price | money_without_trailing_zeros }}</s> | |
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span> | |
{{ product.price | money_without_trailing_zeros }} | |
{% endif %} | |
{% else %} | |
{% comment %} | |
Not on sale, but could still have varying prices | |
{% endcomment %} | |
{% if product.price_varies %} | |
{% assign price = product.price | money_without_trailing_zeros %} | |
{{ 'products.product.from_text_html' | t: price: price }} | |
{% else %} | |
{{ product.price | money_without_trailing_zeros }} | |
{% endif %} | |
{% endif %} | |
</div> | |
{% else %} | |
<div class="product-card__availability"> | |
{{ 'products.product.sold_out' | t }} | |
</div> | |
{% endif %} | |
</div> | |
{% if product.compare_at_price > product.price %} | |
{% comment %} | |
A visually-hidden label before regular/sale prices clarifies | |
prices for screen readers, so hide the sale tag from them. | |
{% endcomment %} | |
<div class="product-tag product-tag--absolute" aria-hidden="true"> | |
{{ 'products.product.on_sale' | t }} | |
</div> | |
{% endif %} | |
<div class="product-card__overlay"> | |
{% assign view_string_length = 'products.product.view' | t | size %} | |
<span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span> | |
</div> | |
</a> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment