PepperShop Flexbox Modul · Um das Flexbox Modul installlieren zu können, ist ein PepperShop Professional oder Enterprise der Version 6.0 erforderlich. 6.2 Dateien kopieren und hochladen

PepperShop Flexbox ModulAnleitung

Datum7. Juli 2017

Version1.2

Inhaltsverzeichnis1. Einleitung...........................................................................................................................................................32. Kurzübersicht....................................................................................................................................................33. Flexboxen erstellen...........................................................................................................................................4

3.1 Die Listenansicht........................................................................................................................................43.2 Flexbox hinzufügen....................................................................................................................................43.3 Abstände anpassen....................................................................................................................................5

3.3.1 Abstand aussen..................................................................................................................................53.3.2 Abstand innen....................................................................................................................................5

3.4 Veröffentlichen...........................................................................................................................................54. Gestaltung einer Flexbox..................................................................................................................................6

4.1 Der Editor....................................................................................................................................................64.1.1 Die Werkzeugleiste............................................................................................................................64.1.2 Verschiedene Bildschirmgrössen.....................................................................................................64.1.3 Die Statusleiste..................................................................................................................................7

4.2 Der Gestaltungsbereich.............................................................................................................................74.3 Inhaltstypen...............................................................................................................................................7

5. Anzeigeorte bestimmen...................................................................................................................................86. Installation.......................................................................................................................................................10

6.1 Systemanforderungen.............................................................................................................................106.2 Dateien kopieren und hochladen...........................................................................................................106.3 Aktivierung...............................................................................................................................................10

PepperShop wird von Glarotech entwickelt und vertrieben.Seit 1998 ist das innovative Unternehmen im Internet tätigund auf E-Commerce spezialisiert. Sie als Kunde profitierenvom direkten Draht zu den Herstellern der Produkte.

Glarotech GmbHToggenburgerstrasse 156CH-9500 Wil

[email protected]. +41 (0)71 923 08 58www.glarotech.ch

1. EinleitungMit Flexbox fesseln Sie Ihre Online-Shopper schon ab dem ersten Klick. Erstellen Sie per Drag’n’Drop im Handumdrehen attraktive, emotionsgeladene «Eye-Catcher» für Ihre Shop-Besucher. Von eingebetteten Videos und Bildern im Shop über Texte und Farben bis hin zu ganzen Artikeln – Ihren Ideen sind keine Grenzen gesetzt.

2. KurzübersichtIn folgender Darstellung werden einige grundsätzliche Funktionen des Flexbox-Systems gezeigt:

Abbildung 1: Übersicht einer einzelnen Flexbox

Seite 3/10 www.peppershop.com

Ein einzelner Inhalt

Videos

Hintergrundfarben

Flexible Grössen

Frei formatierbarer Text

3. Flexboxen erstellenBitte definieren Sie Schriftarten und deren Grösse für den Shop im Layout-Management bevor Sie mit den Boxenerstellung beginnen.

3.1 Die ListenansichtEine Übersicht aller Flexbox finden Sie indem Sie im Hauptmenü auf „Eigene Inhalte“ und dann „Flexboxen bearbeiten“ gehen. Dort finden Sie eine Liste mit allen Flexboxen, die Sie erstellt haben.

Für bereits erstellte Flexboxen stehen folgende Fuktionen zur Verfügung:

Stift Gestaltungsmaske wird geöffnet

Zahnrad Einstellungen der Flexbox

Dokumente Flexbox duplizieren

Auge Sichtbarkeitssteuerung

Abfalleimer Flexbox löschen

Falls die Mehrsprachigkeit im Shop aktiviert ist, wird die Spalte 'Lokalisieren' angezeigt. Mit Klick auf die gewünschte Flagge, wird eine separate Flexbox erstellt (siehe Beispiel Versandoptionen). Damit können Sie die Texte für die jeweiligen Sprachen erfassen. Falls Sie beispielsweise nur ein Bild haben, ist dies nicht nötig und die Box wird für alle Sprachen verwendet.

3.2 Flexbox hinzufügenEine neue Flexbox erstellen Sie, indem Sie „Flexbox hinzufügen“ klicken und einen Namen vergeben. Alle weiteren Felder sind vorerst optional.


Abbildung 3: Neue Flexbox erstellen

Abbildung 2: Funktionsleiste

3.3 Abstände anpassen

In den Einstellungen der Flexbox finden Sie den Reiter „Abstände“. Hier können Sie pro Flexbox die Abstände nach Ihren Vorstellungen anpassen. Haben Sie mehrere Flexboxen auf einer Seite, so greifen diese Einstellungen trotzdem nur bei der Flexbox, bei der Sie die Abstände angepasst haben.

3.3.1 Abstand aussen

Mit „Abstand aussen“ passen Sie die Abstände zwischen den einzelnen Inhaltselemente an. Sollen z.B. die einzelnen Texte nicht so dicht aneinander stehen oder die Bilder mehr Platz einnehmen, müssen Sie hier die Werte anpassen. Wenn die Seitenabstände grösser als Null Pixel sein sollen, achten Sie für ein optimales Ergebnis bitte darauf, dass Sie folgende Grundsätze einhalten:

• Oben/Unten: Abstände in Pixel (fügen Sie px hinter dem Wert an)

• Links/Rechts im Verhältnis zur Box: Abstände zwingend in Prozent (fügen Sie % hinter dem Wert an)

Tipp: Jede Flexbox hat bis zu 12 Spalten. Bei sehr grossen Abständen wird jede einzelne Spalte entsprechend kleiner. Man sollte nicht zu hohe Abstände verwenden, da man sonst nicht mehr alle 12 Spalten brauchen kann.

3.3.2 Abstand innen

Mit „Abstand innen“ passen sie die Innenabstände der Inhaltelemente an, also z.B. den Abstand zwischen Aussenkante des Hintergrundbildes und Aussenkante des eingefügten Textes.

3.4 VeröffentlichenHier wird die Flexbox veröffentlicht, also für den Kunden sichtbar. Voraussetzung ist, dass sie irgendwo verknüpft wurde. Zusätzlich kann beispielsweise bei zeitlich begrenzten Aktionen eine Aktivierungsdauer bestimmt werden. Es ist möglich, mehrere Flexboxen auf einer Seite darzustellen. Mit der Position entscheiden Sie, welche Flexbox zuoberst (Position 1) und welche danach folgen.


Abbildung 4: Abstände

4. Gestaltung einer Flexbox

4.1 Der EditorFür die Gestaltung bietet das Modul einen integrierten Editor, der aus folgenden Komponenten besteht:

4.1.1 Die Werkzeugleiste

Abbildung 5: Übersicht der Werkzeugleiste

Mithilfe von der Werkzeugleiste hat man Zugriff auf folgende Funktionen:

• Zugriff auf die Einstellungen der Flexbox• Inhalte (4.3) hinzufügen• Aktivieren der Vorschau• Ungespeicherte Änderungen speichern• Anzeige der Statusleiste (4.1.3) mit Veröffentlichungsfunktion• Wechsel der aktiven Bildschirmgrösse

4.1.2 Verschiedene Bildschirmgrössen

Mit den drei Ansichten können Sie unterschiedliche Anordnungen pro Bildschirmgrösse definieren. In der mobilen Ansicht sind die Boxen standardmässig immer in der ganzen Breite dargestellt. Bei folgenden Auflösungen wechseln die Ansichten:

• Mobile: 0 – 767px

• Tablet: 768 – 991px

• Desktop: 992 - 1199px(Neuere iPads verfügen über ein Auflösung von mehr als 992px, weshalb die Desktop-Darstellung gewählt wird.)

• Desktop gross: ab 1200px


Abbildung 7: Flexbox-Editor: Desktop-DarstellungAbbildung 6: Flexbox-Editor: Mobile-Darstellung

4.1.3 Die Statusleiste

Abbildung 8: Anzeige des Speicher- und Veröffentlichungsstatus

Rechts oben werden diverse nützliche Hinweise angezeigt:

Speicherstatus Zeigt an, ob es ungespeicherte Änderungen gibt oder ob alles gespeichert ist.

Veröffentlichung Zeigt den Status an und verändert ihn. Bei der Veröffentlichung werden die ungespeicherten Änderungen vorherig automatisch abgespeichert und folgende Änderungen automatisch veröffentlicht.! Wenn die Flexbox veröffentlicht ist, wird die Schrift grün angezeigt, andernfalls grau.

4.2 Der GestaltungsbereichWie in den Abbildungen 6 und 7 ersichtlich, steht ein Gestaltungsbereich zur Verfügung, welcher mit mehreren Boxen verschiedener Inhaltstypen flexibel angeordnet werden können. Zum Verschieben einer Boxen halten Sie die Taste gedrückt und platzieren Sie die Box am gewünschten Ort. Die restlichen Elemente ordnen sich automatisch um die Box herum an. Um die Grösse zu verändern, halten Sie die Taste über einem der Symbole in den unteren Ecken gedrückt und ziehen die Box in die gewünschte Form. Weiter können Sie jede einzelne Box bearbeiten, ausblenden und löschen.

In der Vorschau oben rechts wechseln Sie zur Ansicht, wie es kundenseitig schlussendlich aussehen wird.

4.3 InhaltstypenMit dem Button 'Inhalt hinzufügen' erstellen Sie eine neue Box und stehen zuerst vor der Auswahl, welcher Inhaltstyp es ein soll. Folgende stehen zur Auswahl:

Text Dieser Inhaltstyp ermöglicht es Ihnen, mit dem herkömmlichen Text-Editor zu arbeiten. Sie können Text einfügen und nach Ihrem Wünschen formatieren. Erstellen Sie eine Tabelle oder laden Sie ein Video oder mehrere Bilder hoch.

Bild Damit können Sie Bilder grossflächig als Hintergrundbild benutzen

Video Damit können Sie via HTML-Code externe Videos (z.B. Youtube, Vimeo etc.) einbinden.

Galerie Damit können Sie Ihre eigenen Bildergalerien in Ihre Flexbox einsetzen. Wobei nur das erste Bild beim Aufrufen der Seite dargestellt wird. Die restlichen werden bei Klick auf den Inhalt dargestellt. Mit der Beschreibung die Galerie noch ergänzt werden.

Accordion Mehrere ein- und ausklappbare Textfelder.

Artikel Hiermit verknüpfen Sie einen im Webshop angelegten Artikel.• Artikel: Geben Sie direkt die Artikel-Nr ein oder suchen über 'Artikel auswählen'.• Elemente: Setzen Sie dort ein Häkchen, was als Zusatzinformation erscheinen sollen.

HTML Damit können Sie reinen HTML-Code einfügen. HTML-Kenntnisse sind von Vorteil.


Abbildung 9: Inhaltselement in einer Flexbox

Titel

Jeder Box können Sie einen Titel geben, welcher auch im Gestaltungsbereich sichtbar ist. Ob der Titel im Webshop angezeigt werden soll, wird mittels 'Titel einblenden' gesteuert. Ebenso kann die Farbe nach Wunsch angepasst werden. Wenn Sie den Titel nicht einblenden möchten, dann dient dieser zur Hilfe und Orientierung.

Farben

Wählen Sie die Farben im Quadrat aus oder geben Sie RGB oder Hex-Werte direkt ins Feld ein. Angezeigt werden automatisch immer die RGB-Werte mit einem Zusatzwert für die Transparenz, welche Sie ebenfalls mit dem Regler ganz rechts steuern können.

Tab 'Erweitert'

Ebenfalls bei jeder Box stehen erweiterte Einstellungen zur Verfügung:

• Link: Verlinken Sie die Box mit einer internen oder externen Seite, einem Artikel oder einer Kategorie.

• Hintergrundfarbe

• Hintergrundbild

• CSS-Klassen: Hier werden vordefinierte CSS-Klassen verwendet (CSS-Kenntnisse notwendig).

5. Anzeigeorte bestimmenEs gibt verschiedene Orte an denen Flexboxen angezeigt werden können. Die einzelne Flexbox ist dabei nicht an einen Ort gebunden, sondern kann an mehreren Orten gleichzeitig genutzt und angezeigt werden. Mögliche Anzeigeorte sind Kategorien, Inhaltsseiten und eigene Flexbox-Seiten, die Startseite oder der Footer.

Überall, wo eine Flexbox angezeigt werden kann, ist die folgende Verknüpfungsbox sichtbar.


Abbildung 10: Die Verknüpfungsbox

Auswahl

In der Mitte haben Sie die Auswahlbox mit allen vorhandenen Flexboxen. Über das Feld „Suchen...“ können Sie die Liste einschränken, um bei einer grossen Anzahl Flexboxen besser Ihren passenden Inhalt zu finden. Wichtig ist noch, dass hier nur Flexboxen angezeigt werden, die nicht übersetzt sind. D.h. Sie verknüpfen immer die Flexbox in der Hauptsprache. Wechselt der Besucher im Shop auf eine andere Sprache, wird automatisch die passende Flexbox dieser Sprache angezeigt.

Zugeordnet

In der rechten Spalte der Verbindungsbox sehen Sie die Inhalte, die Sie bereits verknüpft haben. Damit deutlich sichtbar ist, ob die Inhalte auch für Besucher sichtbar sind, wechselt das sonst grüne Auge-Icon auf rot, wenn z.B. „Veröffentlicht“ ausgeschaltet ist oder „Aktiv von“ bzw. „Aktiv bis“ den Anzeigezeitpunkt eingeschränkt haben und dadurch die Inhalte ausgeschaltet sind.

Neue Flexbox

Unterhalb der vorhandenen Flexboxen haben Sie noch den Button „Neue Flexbox“. Wenn Sie diesen Button klicken, gelangen Sie direkt in den Flexbox-Editor und ihre neu erstellte Flexbox wird automatisch der zuvor bearbeiteten Kategorie oder Inhaltsseite zugewiesen.

Achten Sie bitte darauf, dass Sie mögliche Anpassungen in der Kategorie oder der Inhaltsseite speichern, bevor Sie diesen Button klicken.


6. Installation

6.1 SystemanforderungenUm das Flexbox Modul installlieren zu können, ist ein PepperShop Professional oder Enterprise der Version 6.0 erforderlich.

6.2 Dateien kopieren und hochladenDas Flexbox Modul besteht aus mehreren Dateien und Verzeichnissen, die man in den installierten PepperShop kopieren muss. Dazu entpackt man zuerst das mitgelieferte ZIP-Archiv. Es sind folgende Dateien enthalten, hier mit den Zielverzeichnissen dargestellt:{shopdir}/shop/Admin/assets/flexbox |Verzeichnis{shopdir}/shop/Admin/classes/flexbox |Verzeichnis{shopdir}/shop/Admin/html_templates/flexbox |Verzeichnis{shopdir}/shop/Admin/flexbox_editor.php |Datei{shopdir}/shop/assets/flexbox |Verzeichnis{shopdir}/shop/classes/flexbox |Verzeichnis{shopdir}/shop/language/html_templates/flexbox_inhalte.tpl.html |Datei{shopdir}/shop/language/html_templates/flexbox.tpl.html |Datei{shopdir}/shop/resources/flexbox |Verzeichnis

Die Dateien lassen sich einfach via FTP oder SCP zum Webserver hochladen. Der Platzhalter {shopdir} steht dabei für das Shopverzeichnis auf dem Webserver, wo unter anderem die Datei index.php zusammen mit README.txt zu finden ist.

6.3 AktivierungDieses Modul ist sofort aktiviert, sobald der Schritt 6.2 Dateien kopieren und hochladen abgeschlossen ist.


Documents

PepperShop Flexbox Modul · Um das Flexbox Modul installlieren zu können, ist ein PepperShop Professional oder Enterprise der Version 6.0 erforderlich. 6.2 Dateien kopieren und hochladen