1. Schritt für Schritt durch die Template Grundinstallation

Resolution Template installieren in 4 einfachen Schritten.


 
Backup Ihres Systems

Bevor Sie mit der Installation des Templates beginnen sollten Sie eine Sicherung des gesamten Shop Systems und der Datenbank durchführen.

Vorbereitungen

Entpacken Sie das von uns gesendete ZIP-Archiv auf Ihrem Computer und laden mittels eines FTP-Programms die Datei shop-verzeichnis/plugin_manager.php in das Shop-Grundverzeichnis und den Ordner shop-verzeichnis/templates/resolution in das Template-Verzeichnis Ihres Shops.

Shop in den Wartungsmodus versetzen (optional)

Wechseln Sie mit Ihrem Browser in den Administrationsbereich des Shops und klicken dort in der horizontalen Navigation auf: Erweiterte Konfiguration > Shop online/offline.
Setzen Sie das Häkchen bei "Shop offline" und klicken Sie auf speichern.

Austausch der Header Datei

Wecheln Sie mit einem FTP Programm in Ihren Shop und ersetzen die Datei: includes/header.php mit der Datei shop-verzeichnis/includes/header.php aus unserem Template.

Template aktivieren, System-Plugins installieren

Wechseln Sie nun mit Ihrem Browser in den Admin Bereich des Shops und navigieren zu "Konfiguration > Mein Shop". Stellen Sie dort das gerade hochgeladene Template (resolution) unter "Templateset (Theme)" ein.
Speichern Sie und leeren den Shop & Template Cache unter: Erweiterte Konfiguration > Cache Optionen > Cache leeren & Templatecache leeren.

Wechseln Sie nun in das Frontend des Shops, und klicken in der oberen Navigationsleiste den Button "Plugin-Manager".
Dort sollten Sie 2 gelb hinterlegte Plugins in der Liste vorfinden welche Sie mit dem Button "installieren" aktivieren können.

Wenn Sie das neue Template im Shop-Frontend Fehlerfrei sehen können deaktivieren Sie nun den Wartungsmodus (falls Sie diesen Schritt gemacht haben) des Shops: Das neue Template ist nun auch für Ihre Kunden sichtbar und die template Installation ist abgeschlossen.

2. Optimale Grössen für Ihre Produktbilder festlegen

Um eine optimale Darstellung zu erreichen sollten die Bildeinstellungen des Shops angepasst werden


Um eine optimale Anzeige Ihrer Produktbilder im Template zu erhalten sollten Sie die maximlen Bildgrössen in den Shop-Einstellungen anpassen. Wechseln Sie dazu in der Shop-Administration zu Konfiguration > Bild Optionen und tragen dort folgende Werte in die entsprechenden Felder ein:

Bild-Einstellung einzutragender Wert
Breite der Artikel-Thumbnails: 253
Höhe der Artikel-Thumbnails 253
Breite der Artikel-Info Bilder: 555
Höhe der Artikel-Info Bilder: 555
Breite der Artikel-Popup Bilder:  1000
Höhe der Artikel-Popup Bilder: 1000

 

 
Bestehende Bilder neu berechnen!

Beachten Sie bitte, das falls Sie bereits Bilder in Ihrem Shop hinterlegt haben, eine erneute Berechnung der bestehenden Bilder vorgenommen werden muss. Wechseln Sie dazu in der Shop Administration zur Seite Module > Module und installieren das Modul Imageprocessing-New (-V2.01- Produktbilder).
Nach erfolgter Installation Starten Sie das Image-Processing und waren ab bis alle Bilder neu generiert wurden. Das kann, je nach Größe und Menge der Bilder, einige Minuten dauern. Leeren Sie nun den Browser-Cache um die “neuen” Bilder im Shop zu sehen.

 

3. Anpassung des Templates an Ihre Bedürfnisse

Eigenes Firmenlogo in das Template einfügen und Anpassungen der CSS-Dateien


Firmenlogo anpassen
 Stellen Sie vor dem Upload eines neuen Firmenlogos sicher das die Größe der Datei die Abmessungen “488px × 60px” nicht überschreitet. Ansonsten kann es zu unerwünschten Verzerrungen und Fehldarstellungen kommen!

Die Datei für das Firmenlogo befindet sich im Verzeichnis img/logo.png des Templates diese kann einfach mit Ihrem neuen Logo ersetzt werden.

Anpassung der Farben/Gestaltung per CSS

Um z.B. die Farben des Templates anzupassen ist es nötig die vorhandenen CSS-Dateien anzupassen, diese befinden sich in den folgenden Verzeichnissen:

Alle Pfade beziehen sich auf Ihr Template-Verzeichnis unter: templates/TEMPLATEVERZEICHNIS

Dateipfad Beschreibung
css/template/fw.custom.css Globale Elemente des Bootstrap Frameworks wie z.B. Buttons, Schriften etc.
css/template/template.css Template spezifisches CSS z.B. Produktlisten, Detail-Seite etc.
css/template/webfont.css Einbindung der externen Schriftarten (Google Fonts)
stylesheet.css Hier können eigene Styles hinzugefügt werden, diese Datei wird als letztes eingebunden und überschreibt ggf. alle anderen Stile

4. Die Plugin-Manager Verwaltungsoberfläche

Installations und Verwaltungsoberfläche für Template-Plugins


Der Plugin-Manager ist ein integraler Bestandteil unserer Templates. Er bietet Ihnen, wie bei anderen populären Shopsystemen, eine einfache Möglichkeit Plugins zu installieren, zu verwalten und zu konfigurieren ohne mit einer Zeile Code in Berührung zu kommen.

Der Kern des Plugin-Managers ist die Verwaltungsoberfläche welche Ihnen nach der Installation des Templates über den Button "Plugin-Manager" im Frontend Ihres Shops zur Verfügung steht.
Die Startseite des Plugin-Managers bildet eine Liste aller auf dem System befindlichen Plugins mit je einem Button zum installieren/deinstallieren und konfigurieren des Plugins. Um einzelne Einstellungen vorzunehmen klicken Sie einfach den Button "konfigurieren" um in die Einstellmaske des jeweiligen Plugins zu gelangen.

In der jeweiligen Maske zur Verwaltung Ihres Plugins finden Sie auch eine Möglichkeit das Plugin zu deaktivieren, so schalten Sie das Plugin ab ohne Ihre getätigten Einstellungen zu verlieren.

Die weiteren Einstellmöglichkeiten der Plugin Oberfläche können Sie der Dokumentation des jeweiligen Plugins entnehmen.

 
System-Plugins

System Plugins werden im Plugin-Manager gelb hinterlegt und sollten nicht während des Live Betriebes deinstalliert oder deaktiviert werden. Sie sind erforderlich für das korrekte funktionieren Ihres Templates!

5. Die System Plugins "Language-Snippets" und "Template-Settings"

Eigen Schprachvariablen erstellen und das Verhalten / Aussehen des Templates anpassen


System-Plugin: Template-Settings

Wie der Name bereits andeutet verwalten Sie mit diesem Plugin Ihrer Template-Installation.
Hier wollen wir auf die einzelnen Einstellmöglichkeiten einmal näher eingehen:

Template - Begrenzung des Seiten-Containers:
Falls gewählt wird ein weisser Hintergund unter den Inhaltsbereich gelegt um die Seite optisch zu begrenzen.

Template - Seiten-Hintergundfarbe:
Falls Sie die Begrenzung des Seitencontainers gewählt haben können Sie hier einen Farbcode für den Hintergund der Seite angeben.

Template - Kategorie-Menü:
Für die Darstellung des Kategoriemenüs stehen Ihnen verschiedene Modis zu Verfügung:

  • Mega Menü: Beim Mega Menü werden alle Kategorien (bis zur 3. Ebene) auf Einmal übersichtlich in einem Seitenbreiten Dropdown Menü angezeigt
  • Dropdown-Menü: Das Dopdown Menü stellt jeweils das nachste Level an Kategorien Untereinander dar, dies eignet sich besonders wenn Sie jeweils eine stark abweiche Anzahl an Unterkategorien haben
  • Normales Menü: Es wird kein Dropdown Menü angezeigt, ein Klick auf die Hauptkategorie öffnet die Seite und der Kunde navigiert mit einer seitlichen Navigation zur gewünschten Unterkategorie (diese Option ist die performanteste) 
  • Menü in der Seitenleiste: Es wird ein Vertikales Menü in einer Seitenleiste ausgegeben (diese Option sollte gewählt werden wenn Sie sehr viele Hauptkategorien haben die in die horizontale Navigation nicht hineinpassen)

Kategorieliste - Kategorien pro Reihe:
Diese Option stellt ein wieviele Unterkategorien sich im Category-Listing in einer Reihe befinden.

Kategorieliste - Kategorie-Bilder anzeigen:
Diese Option stellt ein ob die Kategoriebilder in der Kategorien-Liste angezeigt werden sollen oder nicht.

Produktliste - Anzahl der Produkte pro Reihe:
Diese Option stellt ein wieviele Produkte sich in der Produktliste auf einer Reihe befinden, das Design wird je nach Breite automatisch mit angepasst. Es ist somit also möglich eine Produktliste mit 1 Produkt pro Reihe mühelos einzustellen ohne das Design entsprechend anzupassen.

Produktliste - Kurzbeschreibung anzeigen:
Soll in der Produktliste die Kurzbeschreibung beim Produkt mit ausgegeben werden?

Produktliste - Produktbewertungen anzeigen:
Sollen die Sterne der Produktbewertungen jeweils beim Produkt mit ausgegeben werden?

Produktliste - Lieferzeit anzeigen:
Soll die aktuelle Lieferzeit des Produktes mit ausgegeben werden?

Produktliste - Angebots-Produkte markieren:
Sollen Angebote mit einem Sonderpreis farblich hervorgehoben werden?

Boxen an und abschalten:
Hier haben Sie die Möglichkeit Boxen jeweils an oder abzuschalten, z.B. entfernt das ausschalten der Newsletterbox den kompletten Include der Datei so das sich ein abschalten Performance technisch positiv auf Ihren Shop auswirken sollte.


System-Plugin: Language-Snippets

Mit dem Plugin haben Sie die Möglichkeit eigene Sprachvariablen anzulegen und vorhandene zu bearbeiten oder zu löschen, ganz einfach auf knopfdruck.

Dabei wird automatisch ein Smarty-Tag generiert welches Ihnen die Integration der Sprachvariable ins Template erleichtern soll. Die Sprachvariablen kann in jeder installierten Sprache hinterlegt werden.

 
Neu installierte Sprache im Shop

Falls Sie im laufe der Zeit weitere Sprachen im Shop installieren ist das kein Problem für das Plugin.

Sobald das System erkennt das eine neue Sprache Installiert ist die das Plugin noch nicht kennt, bietet es Ihnen an aus einer bereits vorhandenen Sprache die Werte in die Reichtige Datenbank-Tabelle zu importieren. So kann z.B. der Übersetzer die Variablen wesentlich leichter an die Zielsprache anpassen da er direkt von Deutschen Inhalten übersetzen kann, und das vollautomatisch!

6. Eigene CSS und Javascripts hinzufügen

Eigene CSS und Javascript Dateien können einfach mit dem Resource-Manager verwaltet werden


 
Resource-Manager

Ihre Resourcen sollten konsequent über die hier beschriebene Methode eingebunden werdern, das hat den Vorteil das eine Weiterverarbeitung z.B. das minifizieren der CSS / Javascript Dateien vollkommen automatisiert ermöglicht wird und Entwickler einen zentralen Anlaufpunkt haben um sich einen Überblick über die eingebundenen Dateien zu verschaffen!


Empfohlene Ordner für Ihre CSS und Javascript Dateien

  • CSS-Dateien: css/template
  • Javascript-Dateien: javascript/template

Um Ihre Dateien in das System zu implementieren öffnen Sie wie gewohnt die Datei css/general.css.php für CSS bzw. javascript/general.js.phpfür Javascript Dateien.

Fügen Sie nun Ihre Dateien mit einem folgendem Beispielaufruf hinzu:

$resources->add('pfad/zu/ihrer/css_datei.css', 100);

Die Zahl hinter dem Dateipad steht für die Sortierung der Datei, hier empfielt es sich in 10er Schritten vorzugehen um ggf. im nachhinein Dateien zwischeschieben zu können.

PHP-Dateien als CSS / Javascript einbinden

Manchmal ist es nötig PHP-Dateien einzubinden (z.B. um Systemeinstellungen im Javascript zu nutzen) und diese als Javascript Datei zu behandeln.
Hierzu wird der 3. Parameter des Aufrufes verwendet, hier ist es möglich den Dateitypen zu forcieren ('css' oder 'javascript'), der Aufruf sieht dann folgendermaßen aus:

$resources->add('pfad/zu/ihrer/php_datei.php', 100, 'js');
 
Initialisierung von eigenen Javascript Plugins

Die Initialisieung / Aufruf der Javascript Plugins sollten Sie in der Datei javascript/template/custom.js vornehmen.

login