theme

theme

Ordnermein-design/templates/cart.html
Beispiel-URLdemoshop.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 {{ content_for_layout }}</em>

  1. Die  Variable muss innerhalb des head-Tags platziert werden. Hier werden die notwendigen VersaCommerce-Skripte eingebunden.
  2. Die  Variable muss innerhalb des body-Tags platziert werden. Es fügt dynamisch den Inhalt der angeforderten Seite ein. Beispielsweise die product.html, wenn ein Produkt aufgerufen wurde.

Es ist recht leicht, brauchbare CSS-Selektoren wie Klassen und IDs einzubauen, indem man in den body-Tag folgenden Liquid-Code einbaut: Das würde für die product.html beispielsweise folgenden Code erzeugen:
<body class="{{ template | replace: '.', ' ' | truncatewords: 1, '' }}">
…
</body>

Ausgabe:
<body class="product">
…
</body>


HTML-Quellcode

{% comment %}

	Layout: theme.html
	==================

	Das ist die Layout-Datei für die Shop-Seiten. Eine übergeordnete
	Template-Datei. Hier wird die grundlegende Struktur festgelegt.
	Alle anderen Templates werden in diese Seite eingebaut.

	Diese Datei MUSS folgenden Befehl enthalten:
	{{ content_for_layout }}

	An dieser Stelle wird der Inhalt der Templates eingeführt.

	Außerdem müssen ebenfalls {{ content_for_header }} im <head>-Bereich und
	{{ content_for_footer }} am Ende des <body>-Tags eingetragen werden.

	Unser Dokumentation für Entwickler finden Sie hier:
	http://developer.versacommerce.de/themes/einleitung/
	http://developer.versacommerce.de/themes/einleitung/aufbau/

	Weitere, ausführlichere Entwickler-Vorlagen bei Github:
	http://github.com/versacommerce

{% endcomment %}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css">
  <style type="text/css">
  	body { margin: 10px;}
  	header { border-bottom: 1px solid #F6F6F6; padding-bottom: 10px; }
  	footer { border-top: 1px solid #F6F6F6; padding-top: 10px; }
  	.align-right { text-align: right; }
  	.current { font-weight: bold;}
  </style>

  <title>{{ object.content_title_tag }} {{ shop.name }}</title>
  <link rel="canonical" href="{{ shop.url }}{{ object.url }}" />
  {% if object.content_meta_description != blank %}
  	<meta name="description" content="{{ object.content_meta_description }}" />
  {% endif %}
  {% if object.content_meta_keywords != blank %}
  	<meta name="keywords" content="{{ object.content_meta_keywords }}" />
  {% endif %}
  {{ content_for_header }}
</head>
<body>
	<header>
		<strong>{{ shop.name }}</strong>
		<nav>
		  {% for link in linklists.haupt-navigation.links %}
			  <a href="{{ link.url }}" title="{{ link.title_text }}" {% if link.highlights? %} class="current"{% endif %}>{{ link.title }}</a>
		  {% endfor %}
			<a href="/cart">Warenkorb ({{ cart.item_count }})</a>
		</nav>		
	</header>

	{{ content_for_layout }}

	<footer>
		<nav>
	  {% for link in linklists.fuss-navigation.links %}
		  <a href="{{ link.url }}" title="{{ link.title_text }}" {% if link.highlights? %} class="current"{% endif %}>{{ link.title }}</a>
	  {% endfor %}
		</nav>
	</footer>

{{ content_for_footer }}
</body>
    • Related Articles

    • Theme-Konfigurator

      Nötige Dateien Die Datei settings_schema.json kann genutzt werden, um die Konfigurationsmöglichkeiten des Konfigurators zu verändern. Im Theme Editor ist die Datei im Bereich config zu finden. mein-design/config/settings_data.json Beispiel einer ...
    • Layout

      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 ...
    • So funktioniert es

      Im Folgenden werden wir anhand von einfachen Beispielen alle notwendigen Dateien vorstellen. Sie werden sehen, dass Sie mit wenig Aufwand einen lauffähigen Online-Shop erstellen können. Es sind Ihnen keine Grenzen gesetzt, wenn Sie Ihr eigenes ...
    • 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 ...
    • blog

      Ordner mein-design/templates/blog.html Beispiel-URL demoshop.versacommerce.de/blogs/news HTML-Quellcode ​{% comment %} Template: blog.html =================== Dieses Template erstellt eine Übersicht über alle Blogartikel. Dokumentation: ...