Templates

Das Template bestimmt den Grundaufbau des Designs des Frontends. Sie können ein bereits vorhandenes Template im Backend des Systems auswählen oder mit den entsprechenden Kenntnissen auch ein eigenes Template erstellen.

Ein Template ist im Prinzip ein Ordner mit Vorlagen für die einzelnen HTML-Seiten des Frontends.

Relevante Grundlagen zum Aufbau des Systems finden Sie auf der folgenden Seite

→ Hauptartikel: Grundlagen Einrichtung

Den Bestellprozess aus der Sicht des Kunden erläutern wir auf der folgenden Seite

→ Hauptartikel: Bestellprozess

Template auswählen

Das gewünschte Template können Sie im Backend des Systems auswählen:

Backend → Einstellungen → Template

Jedes Template liegt in einem eigenen Ordner auf dem Server. Der Ordnername ist gleichzeitig der Name des Templates.

Beispiel: FTP: /htdocs/data/template/basic/

Browserunterstützung der mitgelieferten Templates

Einer der wesentlichen Vorteile von xmstore ist es, dass Sie selbst (mit den entsprechenden technischen Kenntnissen) die Möglichkeit haben die Templates nach Ihren Vorstellungen anzupassen, zu bearbeiten oder auch ein ganz eigenes Template zu entwickeln. Bei xmstore werden 3 verschiedene Templates mit unterschiedlichen Design mitgeliefert.

Die von uns mitgelieferten Templates sind Beispiele für die Flexibilität und die zahlreichen Möglichkeiten. Wir übernehmen allerdings keine Gewährleistung, dass die mitgelieferten Templates unter allen Voraussetzungen (Betriebssystem, Browser) nutzbar sind.

Übersicht über die Browserunterstützung

Angegeben sind die minimal notwendigen Versionen des jeweiligen Browsers zur vollständigen korrekten Darstellung und Funktionalität des jeweiligen Templates. Für eine möglichst hohe Kompatibilität empfehlen wir die Verwendung des Templates "Basic".

Wird die angegebene Browserversion unterschritten, können die Einschränkungen von kleinen Darstellungsfehlern, über große Darstellungsfehler bis hin zu einem unmöglich abschließbaren Bestellablauf führen.

Optinale Templates von Dritten

AXstore

Dieses Template wurde von approbe speziell für xmstore entwickelt. Homepage, Kategorien, Artikel/Bildseiten wurden komplett überarbeitet und in ein modernes Design umgesetzt. Das Template hat ein minimalistisches Design. Das responsive Layout sorgt dafür, dass Ihre E-Commerce Seite auf verschiedenen Geräten wie Smartphones, Tablets oder Desktop-Monitoren gleichermaßen attraktiv erscheint.

Die Informationen & Konditionen finden Sie auf: https://approbe.de/axstore-template-xmstore/

Hinweis: Wir als Anbieter von xmstore übernehmen keine Gewährleistung oder Support zu diesem Template

Neues Template anlegen

1. Kopieren Sie den Ordner eines vorhandenen Templates (z. B. basic) in einen für Ihr Template neu angelegten Ordner (z. B. newtemplate) im Ordner Template.
2. Ändern Sie das Vorschaubild und Daten für dieses Template für die Angaben im Backend
   1. Vorschaubild (newtemplate/preview/preview.jpg)
   2. Infotext (newtemplate/prewiew/info.txt)
3. Stellen Sie sicher, dass der Ordner bin (Cache für die Templateengine) im neu angelegten Template die benötigten Schreibrechte erhält (0777). Dieses können z. B. über einen FTP-Programm vergeben werden (z. B. im Total Commander: Ordner auswählen, Datei-Attribute ändern, 777).

Jetzt sollte dieses Template im Backend des Systems unter dem Namen newtemplate auswählbar sein.

Template bearbeiten

Eine einzelne Template-Datei (tpl) ist im Prinzip nichts anderes als eine Webseite die mit HTML- und CSS-Elementen formatiert wird. Um die Dateien zu bearbeiten, sollten Sie über umfangreiches Know-how im Bereich HTML, CSS und Smarty verfügen oder einen Webdesigner mit dieser Arbeit beauftragen.

Zusammensetzung einer Template-Datei:

Detail-Seite

Der Grundaufbau der Seite muss nur einmalig bearbeitet werden (Header, Footer, Suche, Navigation, usw.).

FTP: /htdocs/data/template/basic/main.tpl

Weiterhin gibt es für die einzelnen Unterseite jeweils eine Seitenvorlage (z. B. Einzelansicht eines Mediums oder der Kundenbereich).

FTP: /htdocs/data/template/basic/detail.tpl

FTP: /htdocs/data/template/basic/customerarea.tpl

...

Vollständige Übersicht des Template-Verzeichnisses:

→ Artikel: Grundlagen Einrichtung#Verzeichnisstruktur des Systems

Formate (css) der Datei (Schriftarten, Schriftgrößen, Farben, usw.

FTP: /htdocs/data/template/basic/stylesheet.css

Änderung von Grafiken im Template:

Um Grafiken auszutauschen ist ein FTP-Zugang notwendig. Bei manchen Templates (z. B. Basic) ist der Austausch des Logos bereits über einem Upload im Backend möglich. Bei anderen Templates (z. B. Darkroom ) wird dazu ein FTP-Zugang benötigt.

FTP: /htdocs/data/template/basic/logo.png

Wenn das Logo zu groß sein sollten, muss das Template von einem Techniker mit Webdesign-Kenntnissen entsprechend angepasst werden. Gerne bieten wir Ihnen hier unseren Support an.

Software-Empfehlung für die Bearbeitung von Templates

→ Artikel: Grundlagen Einrichtung#Programme für die Einrichtung

Weitere Template-Optionen

Hier einige zusätzliche Möglichkeiten, welche von xmstore unterstützt werden.

Medientypen ausblenden

Zum ausblenden von Medientypen werden einfach die entsprechenden Stellen aus dem Template entfernt.
Die folgenden Stellen sollten beachtet werden:

• Typenumschalter (Tabs)
• Typenspezifische Suchfilter
• Eingebundene Widgets

Beim Template Basic, ist vorallem Zeile 144 der main.tpl für die angezeigten Medientypen verantwortlich.

{assign var=aMediaTypeId value=','|explode:'0,1,2,4,3'}

Hier kann einfach die Auflistung reduziert werden.
0 = Alle
1 = Bild
2 = Video
3 = Andere
4 = Audio

Welcher Medientyp vorausgewählt ist, lässt sich über die Konstante FRONTEND_DEFAULT_MEDIATYPE in der Konfigurationsdatei FTP: /htdocs/data/config.inc.php einstellen.
→ Konfigurationswert: Konfiguration#FRONTEND_DEFAULT_MEDIATYPE

Auswertungsmöglichkeiten von Zugriffen

xmstore unterstützt grundsätzlich verschiedene Möglichkeiten der detaillierten Auswertung von dritten Anbietern.

Die notwendigen Codes für Google Analytics oder Piwik können FTP: /htdocs/data/data/template/basic/main.tpl vor dem schließenden </body>-Tag eingefügt werden.

Social Media

Für die Share/Like-Funktion der folgenden Anbieter kann einfach der entsprechende Code generiert und an die gewünschte Stelle im Template (z.B. detail.tpl) eingefügt werden.

• Facebook - http://developers.facebook.com/docs/reference/plugins/like/ (XFBML vermeiden)
• Twitter - http://twitter.com/about/resources/buttons#tweet
• Google+ - http://developers.google.com/+/plugins/+1button/
• Reddit - http://de.reddit.com/buttons/
• LinkedIn - http://developer.linkedin.com/plugins/share-plugin-generator

Alternativ kann auch der Dienst von ShareThis oder AddThis genutzt werden, um alle gängigen Sozialplattformen einheitlich zu bedienen:

• ShareThis - http://sharethis.com/publishers/get-sharing-tools
• AddThis - https://www.addthis.com/get/sharing

Der Code der jeweiligen Anbieter muss eventuell in Smarty-literal-Tags eingeschlossen werden. z.B:

{literal}...button-code...{/literal}

Favicon

Ein Favicon ist ein kleines Icon, das neben der URL im Browser angezeigt werden kann. Bei Verwendung des Basic-Templates kann es einfach FTP: /htdocs/data/template/basic/img/favicon.ico ersetzt werden, ansonsten muss die folgende HTML-Zeile in den <head>-Bereich der Datei FTP: /htdocs/data/template/basic/main.tpl hinzugefügt werden:

<link rel="shortcut icon" href="{$URLROOT}/data/template/{$TEMPLATE}/img/favicon.ico" />

Suchmaschinen-Optimierung (SEO)

xmstore verwendet optimierte Webadressen, welche die relevanten Titelwörter beinhalten (z. B. http://domain.tld/image/Frankfurt-326.html). Weiterhin generiert xmstore periodisch eine sitemap.xml-Datei, welche von Suchmaschinen zum Auffinden von Inhalten verwendet wird.

Landingpage

xmstore bietet (ab Update 165) die Möglichkeit einer personalisierten Landingpage (für direkte Aufrufe der Systemdomain ohne Pfad, z.B. http://domain.tld/).
Um diese Funktion zu nutzen erstellen Sie einfach die Datei "landingpage.tpl" mit vollem HTML-Aufbau im Templateordner neben den anderen .tpl-Dateien. Innerhalb des Landingpage Templates stehen alle Smarty-Variablen der main.tpl zur Verfügung.

NOINDEX-Metatag

xmstore bietet über die Eingabe der Zeichenkette "%noindex" in Seiten- und Kategorietiteln, sowie dem MediaFilter "noindex" in Medien die Möglichkeit diese aus der Sitemap auszuschließen.
Mit folgenden Template-Anpassungen kann diese Funktionalität um entsprechende Meta-Tags in den jeweiligen Seiten ergänzt werden:

Ändern Sie in main.tpl die Zeile (im Head-Bereich)

<title>{if isset($title)}{$title}{/if} - {$oFrontend->aConfig.owner_company}</title>

zu (|replace:"%noindex":"" wird an die Ausgabe der $title-Variable angehängt)

<title>{if isset($title)}{$title|replace:"%noindex":""}{/if} - {$oFrontend->aConfig.owner_company}</title>

Fügen Sie folgenden Abschnitt innerhalb des Head-Bereiches hinzu:

{if (isset($title) && strpos($title, "%noindex") !== false) || (isset($oMedia) && strpos($oMedia->mediafilter, "noindex") !== false)}
    <meta name="robots" content="noindex" />
{/if}

Kunden-Registrierungsformular

Felder welche keine Pflichtfelder sind, können problemlos aus dem jeweiligen Template (FTP: /data/template/*/customer_widgets.tpl) entfernt werden.