Weitere Tips zur EInbindung des Standard-Templates

Script-Aufruf-Optionen

Standard-Aufruf (eingebetteter Shop)

Bsp:

<script src="https://oekobox-online.DOMAIN/v3/shop/SYSTEM/api/client1.js?config=MODE" ></script>

DOMAIN: eu oder de, ist von uns vorgegeben

SYSTEM: Der Systemname wird von uns vorgegeben

MODE: std (Standalone Aufruf) oder embedded (eingebettet in Webseiten)

Parameter:

config=std: lädt die Konfiguration für das Standard-Template

noinit=1: Verhindert die Initialisierung des Systems Wird ignoriert, sofern config=XXX angegeben ist.

nocatch=1: Ohne diese Angabe werden Scriptfehler (auch anderer Scripte) gefangen und an das interne Logging unserer Server weiter geleitet. Zur Fehlersuche bzw. -Kontrolle (in der Browserkonsole) sollte diese Option verwendet werden.

css=<wert>: css=0 unterdrückt das automatische injizieren der notwendigen CSS Datei als letztes CSS im Head der HTML Datei. In diesem Fall sollte
https://oekobox-online.DOMAIN/v3/shop/SYSTEM/##
manuell eingebunden werden. Dies hat Vorteile, da so das Laden eher beginnen kann. css=1 injiziert das CSS für das Standard-System (nur notwendig wenn config=std nicht angegeben ist)

css=<cssdateiname> bewirkt das Einfügen dieser CSS Anweisung unmittelbar vor der angegebenen Datei im head der HTML Datei.

locale=<loc> schaltet die Sprache fest auf eine der vom System unterstützten Sprachen. Diese muss dazu im Admin-Bereich ausgewählt oder zugeschaltet werden.

Eigene Konfigurationsoptionen

<script data-main=myconfig.js"
       src="https://oekobox-online.DOMAIN/v3/shop/SYSTEM/api/client1.js?noinit=1" ></script>

Im Script myconfig.js kann nun ein eigene Konfiguration erfolgen. Am Ende dieser Konfiguration sollte der Initialisierungs-Aufruf stehen.

Viele der Optionen sind in dieser Beispiel-Datei kommentiert.

Eigener Code nach Initialisierung

Soll eigener Code nach der Initialisierung des Systems ausgeführt werden, sollte der Aufruf so erfolgen

<script data-main=mycode.js"
       src="https://oekobox-online.DOMAIN/v3/shop/SYSTEM/api/client1.js?nocatch=1&config=std" ></script>

Durch nocatch=1 werden Fehlermeldungen aus mycode.js nicht abgefangen. Hier ein Beispiel

Eine weitere Möglichkeit ist das Reagieren auf die lade-Ereignisse, welche nach dem Laden des Systems ausgegeben werden. Siehe das  Beispiel.

Gestaltungs-Möglichkeiten / CSS

Neben den Variablen, welche auch im Stil-Editor verändert werden können beliebige weitere CSS Regeln im Admin-Bereich des Shops (Einstellungen->CSS->5.) hinterlegt werden. Das oben erwähnte all.css enhält diese Einstellungen an letzter Stelle.

Sofern CSS in eigenen Dateien verwendet wird,  muss auf die Reihenfolge der Aufrufe geachtet werden. Alle Stille sollen immer nur spezisfisch überschrieben, nie aber am Stück kopiert und verändert werden.

Responsive-ness

Der eingebettete Shop ist responsive und auf verschiedenen Fenstergrößen optimiert. Dies funktioniert am Besten, indem der Shop in der Breite nicht oder wenig beschränkt ist.

Auf die Funktion bei kleinen Bildschirmen muss der WebDesigner achten; oft sind die umgebenden HTML-Elemente anzupassen. Aiuch wenn kein sinnvoller oder einfacher Zugriff auf das CCS im CMS möglich ist, kann das überschreibende CSS im Admin-Bereich hinterlegt werden (es wird per Javascript eingebunden iund kann so auch Einstellungen des CMS überschreiben)

Eine pragmatische Alternative ist der Bau einer Webseite basierend auf diesem Beispiel.

fixed-Positioning

Das Design bietet die Möglichkeit feststehender Ränder oben und unten an, wo auch Funktionalität untergebracht ist. Je nach einbettender Webseite kann die fixed-Vorgabe oben oder/und unten auf sticky- oder absolute geändert werden.