templates/category/_items.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

{% 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-4 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 %}