cart

cart

Ordnermein-design/templates/cart.html
Beispiel-URL
demoshop.versacommerce.de/cart
Positionen
Jede Position im Warenkorb ist als item in der Variable cart.items gespeichert. Ein Item „weiß“, welche Variante eines Produktes es ist. Außerdem werden mehrere Items erstellt, wenn verschiedene Varianten eines Produktes dem Warenkorb hinzugefügt werden.

Zur Kasse gehen
Das cart-Template enthält immer ein formular, dessen Ziel auf /cart zeigt und die Daten via POST verschickt. Ein Button zum „Zur Kasse gehen“ würde wie folgt aussehen:
<a href="/checkout">Diese Artikel bestellen >></a>

Produkte aus dem Warenkorb entfernen oder Menge ändern
Hierzu verwendet VersaCommerce Javascript. Die Menge der Position wird auf 0 gesetzt und das Formular abgeschickt. Dadurch wird der Warenkorb aktualisiert und alle Produkte, dessen Menge auch 0 steht, werden entfernt. Setzt man die Menge auf einen Wert > 0, wird dieser Wert angenommen und die Position aktualisiert.


Bestellnotiz anheften
Um eine Bestellnotiz bei der Bestellung mitzusenden, muss ein Input-Feld mit dem Namen “note” in dem Formular vorhanden sein. Sendet man das Formular ab, wird die Notiz gespeichert.


Beispiel
<textarea id="note" name="note" rows="4"></textarea>

Positionattribute (Properties)
Jede Position im Warenkorb kann eigene Attribute haben. So kann man beispielsweise die Farbei bei einem Produkt auswählen. Dazu muss bei dem Produkt ein entsprechendes Attribut erstellt worden sein.


HTML-Quellcode

{% comment %}


  Template: cart.html
  ===================

  Dieses Template für für die Darstellung von redaktionellen Seiten genutzt. (CMS)

  Dokumentation:
  http://developer.versacommerce.de/themes/variablen/template-spezifisch/cart/

{% endcomment %}

<!-- cart.html -->
<h1>Ihr Warenkorb</h1>
{% if cart.item_count == 0 %}
  <p><strong>Ihr Warenkorb ist leer.</strong> <a href="/">Zur Startseite...</a></p>
{% else %}
<form action="/cart" method="post" name="cartform" id="cartform">
  <table width="100%">
    <tr>
      <th>Anzahl</th>
      <th colspan="2">Produkt</th>
      <th class="align-right">Einzelpreis</th>
      <th class="align-right">Preis</th>
    </tr>
    {% for item in cart.items %}
    <tr>
      <td><input type="text" size="4" name="updates[]" id="updates_{{ item.variant.id }}" value="{{ item.quantity }}" onfocus="this.select();"/></td>
      <td><a href="{{ item.product.url }}"><img src="{{ item.product.featured_image | product_img_url | refit: '48x48' | escape }}" alt="{{ item.title | escape }}" /></a></td>
      <td>
        <a href="{{ item.product.url }}">{{ item.title }}</a><br/>
        # {{ item.product.code }}
        {% if item.options.some_option != blank %}<br/>Option: {{ item.options.some_option }}{% endif %}
      </td>
      <td class="align-right">{{ item.price | money }}{% if item.variant.compare_at_price > item.price %}<br /><del>{{ item.variant.compare_at_price | money }}</del>{% endif %}</td>
      <td class="align-right">{{ item.line_price | money }}</td>
      <td class="align-right"><a href="#" onclick="remove_item({{ item.variant.id }}); return false;">entfernen</a></td>
    </tr>
    {% endfor %}
    <tr>
      <th colspan="4" class="align-right">Zwischensumme:</th>
      <td class="align-right">{{ cart.subtotal_price | money }}</td>
    </tr>
    <tr>
      <th colspan="4" class="align-right">Versandkosten:</th>
      <td class="align-right">{{ cart.shipping_cost | money }}</td>
    </tr>
    {% if shop.price_includes_tax %}
      {% if cart.standard_tax_amount > 0 %}
      <tr>
        <th colspan="4" class="align-right">MwSt. ({{ cart.tax_rate }}%):</th>
        <td class="align-right">{{ cart.standard_tax_amount | money }}</td>
      </tr>
      {% endif %}
      {% if cart.reduced_tax_amount > 0 %}
      <tr>
        <th colspan="4" class="align-right">MwSt. ({{ cart.reduced_tax_rate }}%):</th>
        <td class="align-right">{{ cart.reduced_tax_amount | money }}</td>
      </tr>
      {% endif %}
    {% endif %}
    {% if cart.discount > 0 %}
    <tr>
      <th colspan="4" class="align-right">Abschlag (Coupon):</th>
      <td>- {{ cart.discount | money }}</td>
    </tr>
    {% endif %}
    <tr>
      <th colspan="4" class="align-right">Gesamtpreis:</th>
      <td class="align-right">{{ cart.total_price | money }}</td>
    </tr>
  </table>
  
  {% if shop.price_includes_tax %}
    <p>
      Der Gesamtpreis enthält <strong>{{ cart.standard_tax_amount | money  }}</strong> ({{ cart.tax_rate }}%)
      {% if cart.reduced_tax_amount > 0.00 %}
        und <strong>{{ cart.reduced_tax_amount | money  }}</strong> ({{ cart.reduced_tax_rate }}%)
      {% endif %}
      MwSt.
    </p>
  {% endif %}

  
  <label for="customer_note">Wollen Sie dieser Bestellung eine Nachricht beifügen?</label><br/>
  <textarea id="customer_note" name="customer[note]" cols="35" rows="3"></textarea>
  
  <p>
    <button onclick="document.getElementById('cartform').submit();">Warenkorb aktualisieren</button>
  </p>

  {% unless cart.coupon.valid? %}
    <p>
      <strong>Wir können diesen Coupon-Code leider nicht annehmen.</strong><br/>
      {% for error in cart.coupon.errors %}
        {% if error == "coupon does not exsist" %}
          Dieser Coupon ist uns unbekannt.<br/>
        {% else %}
         {{ error }}<br/>
        {% endif %}
      {% endfor %}
    </p>
  {% endunless %}
  <label for="coupon_code">Coupon-Code:</form>
  <input type="text" size="12" name="coupon_code" value="{{ cart.coupon.code }}" onfocus="this.select();"/>
  <button onclick="document.getElementById('cartform').submit();"><span>Coupon einlösen</span></button>
  <p>{{ cart.coupon.description }}</p>

  <a href="/checkout">Zur Kasse &gt;&gt;</a>
</form>
{% endif %}
<!-- /cart.html -->

    • Related Articles

    • Warenkorb

      Hinweise Beim Aufruf der URL /cart steht die Variable cart automatisch zur Verfügung. Alle Positionen des aktuellen Warenkorbes werden in einer Schleife abgearbeitet und somit für jede Position der entsprechende HTML-Code erstellt: {% for item in ...
    • confirm

      Ordner mein-design/checkout/confirm.html Beispiel-URL demoshop.versacommerce.de/checkout/confirm HTML-Quellcode {% if cart.payment.external? and order_processed %} <div class="row"> <div class="col-md-4 sidebar-left"></div> <div class="col-md-8 ...
    • theme

      Ordner mein-design/templates/cart.html Beispiel-URL demoshop.versacommerce.de/cart Diese beiden Liquid-Objekt müssen in der theme.html enthalten sein. Andernfalls wird das Theme nicht richtig funktionieren. {{ content_for_header }} and ...
    • Produkt

      <h1>{{ product.title }}</h1> Der Titel des Produktes wird innerhalb des h1 Tags eingesetzt → product.title. <img src="{{ product.images.first | product_img_url: 'medium' }}" /> Es wird für das Produkt ein Image-Tag mit der URL des favorisierten ...
    • product

      Ordner mein-design/templates/product.html Beispiel-URL demoshop.versacommerce.de/products/mein-produkt Variantenwechsel Die meisten VersaCommerce-Themes verwenden Javascript, um den Kunden bei Auswahl einer Variante auf die entsprechende Produktseite ...