cart_dropdown.html

{% load i18n %}
{% load get_thumbnail from product_images %}
{% load placeholder %}
{% load price from taxed_prices %}
{% load staticfiles %}

<div class="container">
  {% if quantity > 0 %}
    <div id="cart-dropdown-list" class="cart-dropdown__list{% if lines|length <= 2 %} overflow{% endif %}">
    {% for line in lines %}
      <div class="row item">
        <div class="col-md-10">
          <a class="link--clean" href="{{ line.variant_url }}">
            <img class="cart-dropdown__image lazyload lazypreload"
                 data-src="{% get_thumbnail line.image size=60 %}"
                 data-srcset="{% get_thumbnail line.image size=60 %} 1x, {% get_thumbnail line.image size=120 %} 2x"
                 alt=""
                 src="{% placeholder size=120 %}">
            <h3>
              {{ line.product.translated }}
              <span>x{{ line.quantity }}</span>
              <p>{{ line.variant.translated }}</p>
            </h3>
          </a>
        </div>
        <div class="col-md-2">
          <div class="float-right">
            <h3>
              {% price line.line_total %}
            </h3>
          </div>
        </div>
      </div>
    {% endfor %}
    </div>
    <div class="row cart-dropdown__total" data-quantity="{{ quantity }}">
      <div class="col-md-8">
        <h3>
          {% trans "Subtotal" context "Order subtotal" %}<br>
          <span>{% trans "Shipment and taxes calculated at checkout" context "Cart dropdown text" %}</span>
        </h3>
      </div>
      <div class="col-md-4">
        <h3 class="float-md-right price {% if lines|length <= 2 %}single{% endif %}" data-quantity="{{ quantity }}">
          <p>
            {% price total %}
          </p>
        </h3>
      </div>
    </div>
    <div class="row cart-dropdown__actions">
      <div class="col-md-1"></div>
      <div class="col-md-5">
        <a href="{% url "cart:index" %}" class="btn secondary narrow float-md-right">{% trans "Go to cart" context "Cart dropdown secondary action" %}</a>
      </div>
      <div class="col-md-5">
        <a href="{% url "checkout:login" %}" class="btn primary narrow float-md-right">{% trans "Checkout" context "Cart dropdown primary action" %}</a>
      </div>
    </div>
  {% else %}
    <div class="text-md-center cart-dropdown__empty">
      <h3>{% trans "There are no products in your shopping cart." context "Empty cart message" %}</h3>
      <img data-src="{% static 'images/empty-cart-bg.png' %}"
           data-srcset="{% static 'images/empty-cart-bg.png' %} 1x, {% static 'images/empty-cart-bg2x.png' %} 2x"
           src="{% placeholder size=255 %}"
           class="lazyload lazypreload">
      <a href="{% url 'home' %}" class="btn primary">{% trans "Check out our sales" context "Empty cart link" %}</a>
    </div>
  {% endif %}
</div>