Layout und Templateanpassung

Mit der Gesamtübersicht des Shopaufbaus kann der Designer Änderungen am Layout vornehmen und erkennen welches Grundgerüst dem Design vorgegeben ist. Nicht HTML versierte können mit Hilfe des Designmanagers und der dort zur Verfügung stehenden Farbpalette im Menüpunkt "Farben und Fonts" das Design bearbeiten.

Die Gestaltung der Shopoberfläche wird in 3 Bereichen vorgenommen


Shopsetup -> Designmanager
Shopsetup -> E-Mail/Layout/Logo
Shopsetup -> Templateengine

Downloads:



Die, in der Designvolage im Header verlinkten Templates können für die Ausgabe im Servicmenü deaktiviert werden. Das restliche Servicemenü wird mit der Variablen %%servicemenue%% platziert(mehr dazu weiter unten). Das Kundenkontomenü, das nach erfogreichem Login angezeigt wird, wird mit der Variablen %%loggedinmenue%% platziert.
Die in Fireworks erstellt Grafik wird über den Exportassistenten als HTML gespeichert. Aus der HTML Datei wird der Bereich zwischen öffnendem und schließendem Body Tag kopiert und in der Templatengine der Shopverwalung in das gewünschte Template kopiert. Die Grafiken sollten separat über ftp in ein Verzeichnis auf den Webspace geladen werden.

Wichtig: Es ist auf eine absolute Verlinkung zu achten. Durch die Suchmaschinenoptimierung entstehen künstliche Verzeichnisse, die die Grafikadressierung durcheinander werfen kann.

Also immer absolut verlinken z.B. /dpshopgrafiken/meinbild.jpg.

Im Designmanager "Systemgrafiken" werden alle vom System verwendeten Grafiken verwaltet. Formularbuttons und Hintergrundgrafiken können ein oder ausgeschaltet werden. Es können eigene Grafiken zur Nutzung in freien Templates auf den Webspace geladen werden. Der nutzbare img Tag zur Einbindung der Grafik in ein HTML Dokument oder Template wird ebenfalls erzeugt.

Im Designmanager "professional Mode" kann die Stylesheetvorlage des Shop bearbeitet werden. Beim speichern der Vorlage wird automatisch die Datei style.css im Grafikverzeichnis neu geschrieben. Farbwerte können über Variable (Platzhalter) in eigene Klassen übernommen werden. Ein %%Platzhalter%% wird unter Farben und Fonts mit einem Wert belegt. Dieser Wert kann durch Verwendung von %%PLatzhalter%% beliebig oft in der Stylesheetvorlage angegeben werden. So bleibt die systemweite Farbgebung erhalten und der Farbwähler kann als zentrale Farbpalette genutzt werden.

Im Designmanager "Vorlagenverwaltung" können komplette Styles als Theme abgespeichert oder z.B. zur Entscheidungsfindung mit einem Klick in den Shop eingespielt werden.

Im Auswahlfeld "Shopsetup -> Konfiguration -> E-Mail/Layout/Logo" werden Layoutmaße, HTML Ausrichtungen, und die Anordnungsreihenfolge der Elemente für die Shopnavigation eingestellt. Einzelne Elemente (z.B Warenkorbvorschau) können auch komplett abgeschaltet werden. Das Logo wird auf allen Shopseiten angezeigt.
Der Logotext wird auf allen Seiten, die keine Artikeldaten enthalten angezeigt.
Werden Seiten mit Artikeldaten aufgerufen wird der alternative Logotext angezeigt.

Bei geplanter Nutzung von SSL über einen Proxy ist darauf zu achten von Beginn an alle Grafiken über die SSL Proxyadresse einzubinden. Wegen unterschiedlichen Verlinkungsmethoden kann das System nur bedingt Grafiken richtig anzeigen, wenn kein echtes SSL Zertifikat zur Verfügung steht.

SSL Proxy = https://sslsites/shopdomain.de
echtes SSL = https://shopdomain.de

NEU:
Die Shopnavigation kann rechts oder links platziert werden.
Das Servicemenü kann abgeschaltet werden.
Im Logotext, dem alternativen Logotext und im Template für die Zusatznavigation kann die Variable %%servicemenue%% genutzt werden. Ausgegeben wird an dieser Stelle das Servicemenü mit untereinander angeordneten Links.
Neue Einträge in der Templateenigne für das Produktgruppenmeü und die Warenkorbvorschau

Im Shopsetup->Templateengine sind vor allem Header und Footer wichtig. Hier kann auch auf die Artikeldarstellung bzw Artikeldetaildarstellung und ein Template für das Servicemenü zugegriffen werden.

Mit diesen Informationen und HTML Kenntnissen können die Templates mit jedem beliebigen Texteditor bearbeitet werden.



Angaben zu möglichen Variablen sind immer unter der Eingabemaske des jeweiligen Template zu finden. Im HTML Editor steht hinter dem Symbol mit dem kleinen Storch ein Linkgenerator zur Verfügung.

 

 

  
 
Inhaltsverzeichnis