Created
June 13, 2017 03:11
-
-
Save anonymous/56a9ccd64f0dc5e48b73146a3f01b3c6 to your computer and use it in GitHub Desktop.
Supply theme shopify product-grid-item.liquid
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
{% unless grid_item_width %} | |
{% assign grid_item_width = 'large--one-quarter medium-down--one-half' %} | |
{% endunless %} | |
{% unless image_size %} | |
{%- assign image_size = '600x600' -%} | |
{% endunless %} | |
{% unless current_collection %} | |
{% assign current_collection = collection %} | |
{% endunless %} | |
{% 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 product_varies = false%} | |
{% if product.price_max > product.price %} | |
{% assign product_varies = true%} | |
{% endif %} | |
<div class="grid-item {{ grid_item_width }}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}"> | |
<a href="{{ product.url | within: current_collection }}" class="product-grid-item"> | |
<div class="product-grid-image"> | |
<div class="product-grid-image--centered"> | |
{% if sold_out %} | |
<div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div> | |
{% endif %} | |
<img src="{{ product.featured_image.src | img_url: image_size }}" | |
srcset="{{ product.featured_image.src | img_url: image_size }} 1x, {{ product.featured_image.src | img_url: image_size, scale: 2 }} 2x" | |
alt="{{ product.featured_image.alt | escape }}"> | |
</div> | |
</div> | |
<p>{{ product.title }}</p> | |
<div class="product-item--price"> | |
<span class="h1 medium--left"> | |
{% if product_varies %} | |
{% include 'price' with product.price_min %} - {% include 'price' with product.price_max %} | |
{% endif %} | |
{% 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 %} | |
{% include 'price' with product.price %} | |
{% if on_sale and section.settings.product_show_compare_at_price %} | |
<small> | |
<s> | |
<span class="visually-hidden">{{ "products.general.regular_price" | t }}</span> | |
{% include 'price' with product.compare_at_price %} </s> | |
</small> | |
{% endif %} | |
</span> | |
{% if on_sale and section.settings.product_show_saved_amount %} | |
<span class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}"> | |
{% assign compare_price = product.compare_at_price %} | |
{% assign product_price = product.price %} | |
{% include 'price-sale' %} | |
</span> | |
{% endif %} | |
</div> | |
{% if section.settings.product_reviews_enable %} | |
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span> | |
{% endif %} | |
</a> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment