card-rework.liquid

<!-- /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>