Produkt

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 Bildes → product.images.first in mittlerer Größe generiert.


Direkt darunter wird die Die Produkt-Beschreibung wird darunter eingesetzt:
{{ product.description }}
Danach werden die unterschiedlichen Varianten des Produktes dargestellt. (Bei VersaCommerce kann jedes Produkt beliebig viele Varianten haben. Zum Beispiel für unterschiedliche Größen oder Farben.)


<form action="/cart/add">
<ul>
{% for variant in product.variants %}

<li>

<input type="radio" name="id" value=""
id="radio_" {% if forloop.first %} checked="checked" {% endif %} />

<label for="radio_  >">
-
</label>

</li>

{% endfor %}
</ul>
<input type="submit" value="In den Warenkorb legen.">
</form>

Es wird für jede Variante ein Radio-Selektor bestehend aus dem Preis „variant.price” und dem Titel „variant.title”.

Die Formular-Action zeigt auf “/cart/add” – so wird ein Produkt in den Warenkorb gelegt.

Hinweis
Beim Aufruf der Seite /products/demo-product steht die Variable product automatisch zur Verfügung.

    • Related Articles

    • 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 ...
    • 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> ...
    • Layout-Theme

      In diesem Template wird neben den Layout meist folgendes definiert: Kopfbereich / Logo Navigationen Produkt-Suchfeld Fussbereich In dieser theme.html werden alle anderen Templates eingebunden. Die weiteren Templates werden abhänig von der URL im Shop ...
    • cart

      Ordner mein-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 ...
    • 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 ...