Startseite > Template- und Themeprogrammierung > Shop-Templates > cart.liquid

cart.liquid

Das Template <keyword>cart.liquid</keyword> rendert die Warenkorb-Seite des Shops.

Speicherort

Das Template muss unter <keyword>templates/cart.liquid</keyword> abgelegt werden.

Verfügbare Objekte

Innerhalb des <keyword>cart.liquid</keyword> Templates stehen folgende Objekte zur Verfügung:

Beispiel-Template

Das nachfolgend Beispiel zeigt die Ausgabe der Produkte, die im Warenkorb abgelegt wurden.

{% if cart.item_count > 0 %}
  {% for line_item in cart.line_items %}
    <ul class="cartTableRow">
      <li class="cartTableCell first">
        {% if line_item.featured_media.src %}
          <a href="{{ line_item.url }}">
            <img src="{{ line_item.featured_media.src | product_media_url:'small' }}" alt="{% if line_item.featured_media.alt %}{{ line_item.featured_media.alt | escape }}{% endif %}" />
          </a>
        {% endif %}
        <a href="{{ line_item.url }}">{{ line_item.name }}</a><br />
        {{ line_item.sku }}
        {% if line_item.delivery_time_enum %}{% label 'delivertime' %}: <span style="color:{{ line_item.delivery_time_enum._string1 }}">{{ line_item.delivery_time_enum.name }}</span>{% endif %} 
      </li>
 
      <li class="cartTableCell second">
        {% if line_item._string1 %}{{ line_item._string1 }}{% else %}-{% endif %}
      </li>
 
      <li class="cartTableCell third">
        {% if line_item._string2 %}{{ line_item._string2 }}{% else %}-{% endif %}
      </li>
 
      <li class="cartTableCell four">
        <form method="post" action="/cart/remove/" class="removeFromCartForm">
          <input type="hidden" name="line_item[position]" value="{{ line_item.position }}" />
          <a href="javascript:void();" class="delCartItem">Artikel löschen</a>
        </form>
      </li>
 
      <li class="cartTableCell five">
        <form action="/cart/update/" method="post" class="changeAmountForm">
          <input type="hidden" value="{{ line_item.position }}" name="line_item[position]">
          <input type="hidden" value="{{ line_item.item_quantity }}" name="line_item[item_quantity]" />
          <select class="forminput itemAmountSelect">
            {% for i in (1..10) %}
              <option value="{{ i }}" {% if forloop.index == line_item.item_quantity %}selected="selected"{% endif %}>{{ i }}</option>
            {% endfor %}
          </select>
        </form>
      </li>
 
      <li class="cartTableCell six">
        <b>{{ line_item.price | number:'currency' }} {{ shop.locale.currency_symbol }}</b>
        {% if line_item.coupon_code and line_item.discount_percent > 0 %}
          {{ line_item.discount_percent }}%
        {% endif %}
      </li>
 
      <li class="cartTableCell seven">
        {{ line_item.before_discount_total | number:'currency' }} {{ shop.locale.currency_symbol }}
        {% if line_item.discount_total and line_item.discount_total > 0 %}
          -{{ line_item.discount_total | number:'currency' }} {{ shop.locale.currency_symbol }}
          <div class="line_item_coupon_total">
            {{ line_item.total  | number:'currency' }} {{ shop.locale.currency_symbol }}
          </div>
        {% endif %}
      </li>  
    </ul>
  {% endfor %}
{% endif %}

Beispiel für zur Kasse Button

Das folgende Beispiel zeigt das Markup für ein "Zur Kasse" Button.

{% if cart.item_count > 0 %}
  <form method="get" action="/checkout/">
    <button class="button" type="submit">Zur Kasse</button>
  </form>  
{% endif %}

Beispiel für Gutscheincode-Eingabeformular

Das folgende Beispiel zeigt das Markup für ein Formular zur Gutscheincode-Erfassung.

<form method="POST" action="/cart/update/">
  <label>Gutschein</label>
    <input autocomplete="off" type="text" name="coupon_code" value="{% if cart.coupon_error %}{{ cart.coupon_code }}{% endif %}">
    <button class="submitForm button">Einlösen</button>
</form>