Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!-- /snippets/card-rework.liquid -->
{% comment %}
This snippet is used to showcase each product during the loop,
'for product in collection.products' in collection.liquid.
{% endcomment %}
{% comment %}
Check if the product is on sale and set a variable to be used below.
{% endcomment %}
{% assign on_sale = false %}
{% if item.compare_at_price > item.price %}
{% assign on_sale = true %}
{% endif %}
{% comment %}
Check if the product is sold out and set a variable to be used below.
{% endcomment %}
{% assign sold_out = true %}
{% if item.available or item.object_type == 'article' or item.object_type == 'page'%}
{% assign sold_out = false %}
{% endif %}
{% 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 %}
<div id="searchelement" class="collection-product{% if sold_out %} collection-product-sold-out{% endif %}">
{% if sold_out %}
<div class="sold-out">
{% include 'tbm-icons', icon: 'soldout'%}
</div>
{% elsif on_sale %}
<div class="collection-product-soldout-badge">
{% include 'tbm-icons', icon: 'sale' %}
</div>
{% endif %}
<div class="{% cycle 'collection-box-1', 'collection-box-2' %} card-shadow">
<a href="{{ item.url }}" class="grid__image {%if sold_out%}collection-product-unavailable {%endif%}">
{% if item.object_type == "article"%}
{% if item.image.src %}
<img src="{{ item.image.src | img_url: 'large' }}">
{% else %}
{% if item.content contains "<img" %}
{% assign src = item.content | split: 'src="' %}
{% assign src = src[1] | split: '"' | first | replace: '//cdn', 'http://cdn' | replace: 'http:http://', 'http://' | remove: 'https:' %}
<img src="{{ src }}">
{% endif %}
{% endif %}
{%else%}
<img src="{{ item.featured_image.src | img_url: 'x1000' }}" alt="{{ item.featured_image.alt | escape }}">
{%endif%}
</a>
<div class="product-overlay">
<a href="{{ item.url }}" class="product-grid-card-wrapper"> </a>
<div class="product-grid-card-link">
<a href="{{ item.url }}">
<p class="h2 product-title">
{{ item.title | truncatewords:10 }}
</p>
{% if item.price_varies %}
{% assign price = item.price | money %}
<p class="h2 product-price">{{ 'products.general.from_text_html' | t: price: price }}</p>
{% else %}
<p class="h2 product-price">{{ item.price | money }}</p>
{% endif %}
</a>
{%if settings.enable_quick and item.object_type != "article" and item.object_type != 'page'%}
<div data-fancybox data-type="ajax" data-src="{{shop.url}}{{item.url}}" data-filter="#quick" href="javascript:;" class="quick-view">
{{'products.general.quick_view' | t }}
</div>
{%endif%}
</div>
</div>
</div>
<div class="large--hide medium-down--show card-shadow mobile-square-title {% cycle 'mobile-collection-margin-1', 'mobile-collection-margin-2' %}">{% include 'card-price-mobile' %}</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.