_items.html

{% load i18n %}
{% load staticfiles %}
{% load price_range from price_ranges %}
{% load product_first_image from product_images %}
{% load product_availability_schema from jsonld %}
{% load get_thumbnail from product_images %}

{% for product, availability in products %}
<div class="col-6 col-lg-3 product-list">
  <script type="application/ld+json">
    {% autoescape off %}{% product_availability_schema product %}{% endautoescape %}
  </script>
  <a href="{{ product.get_absolute_url }}" class="link--clean">
    <div class="text-center">
      <div>
        <img class="img-responsive"
             src="{% product_first_image product method="crop" size="255x255" %}"
             srcset="{% product_first_image product method="crop" size="255x255" %} 1x, {% product_first_image product method="crop" size="510x510" %} 2x"
             alt="">
        <span class="product-list-item-name" title="{{ product }}">{{ product }}</span>
      </div>

      <div class="panel-footer">
        {% if availability.available %}
          {% price_range availability.price_range %}
            {% if availability.discount %}
            {% if availability.price_range_undiscounted.min_price != availability.price_range.min_price %}
              <div class="product-list__sale">
                <svg data-src="{% static "images/sale_bg.svg" %}" />
                <span class="product-list__sale__text">
                  {% comment %}Translators: Layout may break if character length is different than four.{% endcomment %}
                  {% trans "Sale" context "Sale (discount) label for item in product list" %}
                </span>
              </div>
            {% endif %}
          {% endif %}
        {% else %}
          &nbsp;
        {% endif %}
      </div>
    </div>
  </a>
</div>
{% endfor %}