Menü

Erstellt: 30.10.2018Zuletzt geändert: 05.11.2018316x angesehen

Zeitsteuerung um Ihren Shop automatisch an Saisons und Events anzupassen

Administration Moduleinstellung CSS und JavaScript Ausgabe
Shopansicht Startseite rechter Mausklick Element Untersuchen
Administration und Codeansicht der Startseite um die Gliederung zu finden
Administration Moduleinstellung Zeiteinstellung
Administration Moduleinstellung JQuery Code um das Logo zu ersetzen
Shopansicht Header Logo mit Weihnachtslogo ersetzt
Administration Moduleinstellung mit JQuery Code für Schneefall auf der Seite
Shopansicht Startseite mit Schneefall

Produktbeschreibung

Den eigenen Shop besser an Events und Saisons wie z.B. Valentinstag, Weihnachten, Halloween, Herbstzeit oder Silvester anzupassen, war bislang etwas schwierig. Zumal man ständig daran denken musste, Elemente wie Logo oder den Hintergrund vom Header / Footer Manuell zu ändern. Mit dieser Erweiterung ändert sich das jetzt! Erstellen Sie zehn verschiedene Erweiterungen, welche einzeln per Datum und Uhrzeit steuerbar sind. Da die Erweiterungen den CSS und JavaScript Code ergänzen, haben Sie alle Freiheiten um jedes Detail an Ihrem Shop beliebig zu ändern. Legen Sie z.B. ein neues Logo von Ihrem Shop für Weihnachten, Silvester etc. an, mit dem CSS Part einer Erweiterung können Sie Ihr vorhandenes Logo überschreiben. Oder möchten Sie das es zu Weihnachten auf Ihrem Shop schneit? Kein Problem, legen Sie eine Erweiterung fest, welche pünktlich zu Weihnachten einen JavaScript Code aktiviert und für den Schneefall sorgt. Wir haben dieses Modul so offen wie nur möglich gestaltet, um Ihnen alle Freiheiten zu geben, Ihren Shop für Ihre Kunden zu allen Events und Saisons anzupassen. Lassen Sie Ihrer Fantasie freien lauf und zeigen Sie Ihren Kunden, dass Sie bei Events und Saisons engagiert sind!

Verfügbar im Store von Shopware

Aktuelle Version: V1.10
Direkt zum Modul in dem Shopware Store

Konfiguration

Administration Einstellungen Grundeinstellungen Menü
Im Administrationsbereich unter Einstellungen -> Grundeinstellungen -> Zeitsteuerung um Ihren Shop....(Modulnamen) können Sie alle Elemente und Bereiche vom Modul konfigurieren.

Administration Grundeinstellung Standard CSS und JavaScript Code
Das Modul besteht aus einem Standard-Bereich, welcher immer ausgeführt wird ganz gleich, welcher Zeitgesteuerte Bereich gerade aktiv ist.

Administration Grundeinstellung erste Zeitsteuerung
Sie können insgesamt zehn Zeitgesteuerte Bereiche definieren. Jeder Bereich wird unabhängig behandelt, wodurch es auch möglich ist zwei oder mehr Bereiche Parallel laufen zu lassen.

Administration Grundeinstellung Label Eingabefeld
Das Eingabefeld "Label" ermöglicht Ihnen einen internen Namen zu vergeben, damit die Zeitsteuerung besser identifiziert werden kann. Dieses Eingabefeld besitzt keine technische Funktion.

Administration Grundeinstellung erste Zeitsteuerung CSS und JavaScript Code
In den beiden Eingabefelder CSS und JavaScript können Sie Code eintragen, welcher gemäß Zeitsteuerung ausgegeben wird. Da der Code dynamisch ausgegeben wird, ist ein Leeren vom Cache oder das Kompilieren vom Theme nicht nötig.

Administration Grundeinstellung erste Zeitsteuerung Zeit-Eingabe von bis
Mit den Eingabefelder "Aktiviert ab" und "Aktiviert bis" können Sie einstellen, ob und bis wann die CSS und/oder JavaScript Codes der jeweiligen Zeitsteuerung, in Ihrem Shop aktiviert sind. Sofern Sie keine Uhrzeit angeben, wird 0H verwendet! Um die betreffende Zeitsteuerung zu aktivieren, müssen beide Datumsbereiche eingetragen werden.

Administration Grundeinstellung Reihung der Code Ausgaben
Bitte beachten Sie, dass die Ausgabe vom CSS und Javascript Code jeweils der Reihenfolge der Zeitsteuerungen entspricht.

Administration Grundeinstellung Ausgabebeispiel vom CSS und JavaScript Code
CSS und JavaScript Code wird gemäß der aktiven Elemente durch dieses Modul gesammelt und als ein Block in der Code Ausgabe bereitgestellt. Eine Eingabe bei z.B. dem CSS Part <style>....</style> ist daher nicht notwendig!

Anwendungsbeispiel CSS:

Shopansicht Startseite rechts Maustaste Element Untersuchen
Je nachdem welches Theme Sie verwenden, kann der Code stark abweichen, auch sollte berücksichtigt werden, dass eventuell die responsiv Elemente andere sind. Über Ihren Browser können Sie mittels rechter Maustaste "Element Untersuchen" ganz einfach herausfinden, welche Gliederung das Element hat, welches Sie ändern möchten.

Administration Grundeinstellung CSS Beispiel Header Hintergrundfarbe
Sie können z.B. die Hintergrundfarbe des Headers verändern.

Administration Grundeinstellung CSS Code aus dem HTML Code ableiten
Wenn wir mal bei dem Beispiel vom Shop Header bleiben, dann können wir leicht die Gliederung erkennen. Der CSS Code lautet also:

Beachten Sie bitte die CSS Regeln der Vererbung. Je genauer und tiefer Sie eine Gliederung angeben, desto eher können Sie diese überschreiben (stark abhängig von bereits gesetzten CSS Regeln)!

Allgemeines Anwendungsbeispiel zu JavaScript:

Administration Grundeinstellung JavaScript Code zum laden von JQuery Code
Sie können in den Eingabefeldern "JavaScript", JavaScript Code verwenden. Sofern Sie jedoch JQuery Code verwenden möchten, benötigen Sie eine Funktion, welche überprüft ob der JQuery Grundcode bereits geladen und bereit ist. Dies können wir mit einer kleinen Abfrage bewerkstelligen, welche wie folgt aussieht:
In dem Sie das " alert('Mein JQuery Code...'); " mit Ihrem eigenen Code ersetzen, können Sie beliebige JQuery Funktionen ausführen.

Schneeflockenbeispiel mit JQuery:

Shopansicht Startseite mit Schneefall als Beispiel
Damit Sie es Beispielsweise in Ihrem Shop schneien lassen können. Bedienen wir uns einem kleinen JQuery "Plugin":
http://workshop.rs/2012/01/jquery-snow-falling-plugin/
Dies ist eine kleine JQuery Funktion, welche Ressourcen schonend arbeitet. Die Funktion kann aber auch mit einem Umbau andere Symbole über Ihren Shop rieseln lassen.

Administration Grundeinstellung JQuery Beispielcode für den Schneefall
Der Code ist so schlank, dass er keine separate externe Datei zum Einbinden benötigt. Im komprimierten Zustand macht der gesamte Code gerade mal ein paar Zeilen aus:

Logo mit JQuery ändern:

Shopansicht Header Logo mit HTML Ausgabe vor der Änderung
Sie können mit folgendem JQuery Code recht leicht auf das Shoplogo zugreifen und es ändern, ohne Anpassungen am Theme machen zu müssen.

Administration Grundeinstellung JQuery Beispiel zum Ändern vom Logo
Beachten Sie jedoch das mehrere Grafiken in unterschiedlichen Formaten nötig sind, um alle responsiv Ansichten sauber darzustellen.

Shopansicht Startseite Header Logo nach der Änderung
So sieht dann das Ergebnis nach der Änderung aus.

Administration Medienverwaltung Medienmanager Datei hochladen
Jede Grafik, welche Sie verwenden möchten, sollten Sie nur über die Medienverwaltung im Administrationsbereich hochladen und einpflegen. Die Medienverwaltung finden Sie unter "Inhalte" -> "Medienverwaltung", hier können Sie einen beliebigen Ordner auswählen um Ihre Grafik hochzuladen. Mit klick auf "Link zum Medium", öffnet sich ein neues Fenster zur Grafik, hieraus können Sie den genauen Pfad zur Grafik in Ihrem Shop entnehmen.

Wir wünschen viel Spaß beim individualisieren Ihres Shops!

Tags

ShopwareErweiterungZeitsteuerungCSSJavaScriptSaison Anpassungenzeitliche Anpassung
instagram