Skip to content

Instantly share code, notes, and snippets.

@freakdesign
Created January 3, 2016 03:32
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save freakdesign/4ee189affa8934b41d08 to your computer and use it in GitHub Desktop.
Modification of the default Timber product grid item snippet so that it can show variants. Relates to this blog post: http://freakdesign.com.au/blogs/news/87395207-show-variants-as-separate-products-on-collection-page
<!-- /snippets/product-grid-item.liquid :: mod by Jason at freakdesign.com.au -->
{% comment %}
<!--
This snippet is used to showcase each product during the loop,
'for product in collection.products' in collection.liquid.
If however the product has variants, we'll show the variants instead.
-->
{% endcomment %}
{% comment %}
Set the default grid_item_width if no variable is set
{% endcomment %}
{% unless grid_item_width %}
{% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endunless %}
{% assign on_sale = false %}
{% assign sold_out = true %}
{% comment %}
<!--
Check if the product has variants or not.
-->
{% endcomment %}
{% if product.variants.size > 1 %}
{% if variant.compare_at_price > variant.price %}
{% assign on_sale = true %}
{% endif %}
{% if variant.available %}
{% assign sold_out = false %}
{% endif %}
<div class="grid__item {{ grid_item_width }} grid__item__isvariant">
<a href="{{ variant.url | within: collection }}" class="grid__image">
<img src="{{ variant.image.src | img_url: 'large' }}" alt="{{ variant.image.alt | escape }}">
</a>
<p class="h6">
<a href="{{ variant.url | within: collection }}">{{ variant.title }}</a>
</p>
<p>
{% if on_sale %}
<strong>{{ 'products.variant.on_sale' | t }}</strong>
{{ variant.price | money }}
{% else %}
{{ variant.price | money }}
{% endif %}
{% if sold_out %}
<br><strong>{{ 'products.variant.sold_out' | t }}</strong>
{% endif %}
{% if on_sale %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<br><s>{{ variant.compare_at_price | money }}</s>
{% endif %}
</p>
</div>
{% else %}
{% comment %}
<!--
Check if the product is on sale and set a variable to be used below.
-->
{% endcomment %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}
{% comment %}
<!--
Check if the product is sold out and set a variable to be used below.
-->
{% endcomment %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}
<div class="grid__item {{ grid_item_width }}">
{% comment %}
<!--
Link to your product with the 'within: collection' filter for the link to be aware of the collection.
This allows you to create collection-based navigation on the product page.
Results of using 'within: collection':
- Instead of a URL with /products/product-handle
you would get /collections/collection-handle/products/product-handle
For more info on navigation within a collection
- http://docs.shopify.com/support/your-store/collections/how-to-navigate-within-a-collection
-->
{% endcomment %}
<a href="{{ product.url | within: collection }}" class="grid__image">
<img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
</a>
<p class="h6">
<a href="{{ product.url | within: collection }}">{{ product.title }}</a>
</p>
<p>
{% comment %}
<!--
You can show a leading 'from' or 'up to' by checking 'product.price_varies'
if your variants have different prices.
-->
{% endcomment %}
{% if on_sale %}
{% if product.price_varies %}
{% assign sale_price = product.price | money %}
{{ 'products.product.on_sale_from_html' | t: price: sale_price }}
{% else %}
<strong>{{ 'products.product.on_sale' | t }}</strong>
{{ product.price | money }}
{% endif %}
{% else %}
{% if product.price_varies %}
{% assign price = product.price | money %}
{{ 'products.general.from_text_html' | t: price: price }}
{% else %}
{{ product.price | money }}
{% endif %}
{% endif %}
{% if sold_out %}
<br><strong>{{ 'products.product.sold_out' | t }}</strong>
{% endif %}
{% if on_sale %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<br><s>{{ product.compare_at_price | money }}</s>
{% endif %}
</p>
</div>
{% endif %}
@alexmorris
Copy link

Hey Jason! this is exactly what i'm trying to achieve so thanks for the snippet! However i'm getting this error when I run it.

"Liquid error: bad argument (expected URI object or URI string)"

Simplified liquid example below... any thoughts/ideas?

`{% if product.variants.size > 1 %}

<div class="product-cell">

  <a href="{{ variant.url | within: collection }}"><img src="{{ variant.image.src | img_url: 'large' }}" alt="{{ variant.title }}"></a>

  <a href="{{ variant.url | within: collection }}"><h5>{{ variant.title }} horse</h5></a>

</div>

{% else %}

<div class="product-cell">

   <a href="{{ product.url | within: collection }}"><img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}"></a>

   <a href="{{ product.url | within: collection }}"><h5>{{ product.title }}</h5></a>

</div>

{% endif %}`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment