product

product

Ordnermein-design/templates/product.html
Beispiel-URLdemoshop.versacommerce.de/products/mein-produkt

Variantenwechsel

Die meisten VersaCommerce-Themes verwenden Javascript, um den Kunden bei Auswahl einer Variante auf die entsprechende Produktseite der Variante weiterzuleiten. Dort kann dann weitere Information zur Variante angezeigt werden, wie etwa Lagerbestand, Beschreibung, etc.


Verfügbarkeit von Varianten

Es kann vorkommen, dass eine Variante nicht mehr vorrätig ist. In diesem Fall sollte ein entsprechender Link deaktiviert sein, oder in irgendeiner Form einen entsprechenden Hinweis enthalten.


Zusätzliche Optionen für den Kunden
  1. Empfehlungen: Zeigt passende Produkte zu dem derzeit ausgewählten an
  1. Mengenauswahl: Ermöglicht das hinzufügen von einem Produkt mit einer bestimmten Stückzahl
  1. Optionen zu dem Produkt: Ermöglich es dem Kunden weitere Informationen zu dem Produkt hinzuzufügen, bevor er es dem Warenkorb hinzufügt. Das ist beispielsweise bei T-Shirts sinnvoll, die beschriftet werden sollen.


HTML-Quellcode

{% comment %}

  Template: product.html
  ======================

  Dieses Template für für die Darstellung von Produktdetails genutzt.

  Dokumentation:
  http://developer.versacommerce.de/themes/variablen/template-spezifisch/product/
  http://developer.versacommerce.de/themes/filter/image/
  
{% endcomment %}

<!-- product.html -->
{% for image in product.images %}
  {% if forloop.first %}
    <!-- FIRST IMAGE  -->
    <img src="{{ image | product_img_url | refit: '240x240' }}" />
  {% else %}
    <!-- ADDITIONAL IMAGES  -->
    <img src="{{ image | product_img_url | refit: '120x120' }}" />
  {% endif %}
{% endfor %}

<h1>{{ product.title }}</h1>
{% unless product.subtitle == blank %}
  <h2>{{ product.subtitle }}</h2>
{% endunless %}

{{ product.description }}

<p>
  Preis: {{ product.price | money }}
  {% if product.compare_at_price > product.price %}
    <del>{{ product.compare_at_price | money }}</del>
  {% endif %}
</p>

<!-- ADD TO CART -->
<form action="/cart/add/" method="post">
  {% if product.available %}
    <input type="hidden" name="id" value="{{ product.id }}" />
    Anzahl: <input type="text" size="4" name="quantity" value="1"/>
    <input type="submit" value="Zum Warenkorb hinzufügen..." />
  {% else %}
    <em>Ausverkauft!</em>
  {% endif %}
</form>

{% if product.variants_count > 0 %}
  <h3>Produktvarianten</h3>
  {% for variant in product.variants %}
    <p>
      <img src="{{ variant.featured_image | product_img_url | refit: '48x48' }}" align="left" />
      <a href="{{variant.url}}">{{ variant.title }} {{ variant.subtitle }}</a><br/>
      {{ variant.price | money }}
    </p>
  {% endfor %}
{% endif %}
<!-- /product.html -->

    • Related Articles

    • product_json.liquid

      Quellcode Status: 200 OK { "product": { "id": {{ product.id | json }}, "timestamp": {{ product.timestamp | json }}, "handle": {{ product.handle | json }}, "title": {{ product.title | json }}, "subtitle": {{ product.subtitle | json }}, "category": ...
    • index

      Ordner mein-design/templates/index.html Beispiel-URL demoshop.versacommerce.de/ HTML-Quellcode {% comment %} Template: index.html ==================== Dieses Template für für die Darstellung der Startseite genutzt. Auf der Startseite wird häufig auf ...
    • collection

      Ordner mein-design/templates/collection.html Beispiel-URL demoshop.versacommerce.de/collections/meine-gruppe HTML-Quellcode ​{% comment %} Template: collection.html ========================= Dieses Template für für die Darstellung von Produktgruppen ...
    • Startseite

      Hinweise In diesem Beispiel zeigen wir eine Startseite mit folgenden Inhalten: Eine redaktionellen Text aus dem CMS - „Willkommen…“ Eine Liste von Produkten - „Aktuelle Angebote“ Redaktioneller Text aus dem CMS <h1>{{ pages.startseite.title }}</h1> ...
    • 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 ...