Startseite

Startseite






Hinweise
In diesem Beispiel zeigen wir eine Startseite mit folgenden Inhalten:
  1. Eine redaktionellen Text aus dem CMS - „Willkommen…“
  2. Eine Liste von Produkten - „Aktuelle Angebote“


Redaktioneller Text aus dem CMS
<h1>{{ pages.startseite.title }}</h1>
Hier wird aus dem eingebauten CMS der Titel des des Dokumentes „Startseite“ als Seitentitle „h1“ gesetzt. Direkt darunter stellen wir den Inhalt des Dokumentes „Startseite“ dar.



Liste von Produkten
Für dieses Beispiel nehmen wir an, daß wir im Produktkatalog eine Produktgruppe mit dem Namen „Angebote-Startseite“ eingerichtet haben.
{% for product in collections.angebote-startseite.products %}
Hier starten wir eine „For-Schleife“. Diese läuft alle Produkte in der Produktgruppe „Angebote-Startseite“ ab.


collections.angebote-startseite.products
steht für: PRODUKTGRUPPE.NAME_SLUG_DERPRODUKTGRUPPE.PRODUKTE_DIESER_PRODUKTGRUPPE


Dies ist eine typische Notation für Objekte und Tochter-Objekte. Diese Art von Notation zieht sich durch VersaCommerce durch uns ist schnell eingängig.
<div class="produkt_box">
<img src="{{ product.images.first | product_img_url: 'small' }}" />
<a href="{{ product.url }}">{{ product.title }}</a>
</div>


Jetzt erzeigen wir innerhalb der “For-Schleife” den HTML-Code für jedes einzelne Produkt:
{{ product.images.first | product_img_url: 'small' }}
Hier wird das erste Bild des Produktes aufgerufen und mit dem URL-Filter “product_img_url” eine URL des Produktbildes erzeugt. Die Angabe ‘small’ bestimmt die gewünschte Größe des Bildes. Neben vordefinierten Größen können Sie jede erdenkliche Größe eines Bildes abrufen.


<a href="{{ product.url }}">{{ product.title }}</a>
Die Variable “product.url” steht für die URL der Produkt-Detaildarstellung. Zusammen mit “product.title”, dem Titel des Produktes wird ein Link auf die Produktdetail-Seite erzeugt


{% endfor %}
„end-for” schliesst die „For-Schleife“.


Wir haben also mit wenigen Zeilen Skript-Sprache eine redaktionellen Inhalt aus dem CMS und Produkte einer Produktgruppe auf der Startseite dargestellt.

    • Related Articles

    • 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

      Auflisten der Produkte {% for product in collection.products %} Wie schon in unserem Beispiel der Startseite werden hier alle Produkte in einer “For-Schleife” abgearbeitet. Hinweise Beim Aufrufe einer Produktgruppe muss der Name der Produktgruppe ...
    • 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 ...
    • 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 ...