Menü

Erstellt: 30.10.2018Zuletzt geändert: 21.10.2019694x angesehen

Zeitsteuerung um Ihren Shop automatisch an Saisons und Events anzupassen

Admin Moduleinstellung CSS und JavaScript Ausgabe
Shopansicht Startseite rechter Mausklick Element Untersuchen
Admin und Codeansicht der Startseite um die Gliederung zu finden
Admin Moduleinstellung Zeiteinstellung
Admin Moduleinstellung JQuery Code um das Logo zu ersetzen
Shopansicht Header Logo mit Weihnachtslogo ersetzt
Admin 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 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 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: V2.0.0
Direkt zum Plugin in den Shopware Store


Konfiguration

Grundlegendes

Admin Einstellungen Grundeinstellungen Menü
Nach der Installation finden Sie im Administrationsbereich unter Einstellungen -> Grundeinstellungen -> Zeitsteuerung um Ihren Shop....(Pluginnamen) alle Elemente vom Plugin.

Überblick der Grundeinstellungen

Admin Grundeinstellungen Überblick
Das Plugin ist in drei Abschnitte unterteilt.

Admin Grundeinstellung Multishop-Fähigkeit
Im ersten Abschnitt können Sie einstellen, ob die Multishop-Fähigkeit aktiviert werden soll.

Admin Grundeinstellung Standard CSS und JavaScript Code
Im zweiten Abschnitt können Sie Daten hinterlegen, welche immer ausgeführt werden.

Admin Grundeinstellung zehn Zeitsteuerungen
Der dritte Abschnitt ist zehnmal vorhanden. Jede Zeitsteuerung wird unabhängig behandelt, wodurch es auch möglich ist zwei oder mehr Steuerungen Parallel laufen zu lassen.

Konfiguration der grundlegenden Plugin Einstellungen

Admin Grundeinstellung Multishop-Fähigkeit aktivieren
Mit dem Plugin Handling können Sie bestimmen, ob die Multishop-Fähigkeit aktiviert wird. Dies bezieht sich jedoch "lediglich" auf die Einstellungen, welche Sie in den Grundeinstellungen zum jeweiligen Shop durchführen, nicht jedoch auf Übersetzungen (Globus im Eingabefeld) in den Textbausteinen! Die Deaktivierung der Multishop-Fähigkeit kann von Vorteil sein, wenn Sie ohnehin nur eine Konfiguration wünschen, welche für alle Shops gleichermaßen gelten soll.

Admin Grundeinstellung Standard CSS und JS Code
In den beiden Eingabefeldern unter der Konfigurationsgruppe "Standard Änderungen", können Sie CSS und JS Code eintragen, welcher unabhängig von den Zeitsteuerungen immer ausgeführt wird. Bitte beachten Sie aber das größere Veränderungen direkt im Theme hinterlegt werden sollten, diese Eingabefelder sind lediglich für kleinere Temporäre Anpassungen gedacht.

Konfiguration der Zeitsteuerungen

Admin 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.

Admin 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.

Admin 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.

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

Admin Grundeinstellung Ausgabebeispiel vom CSS und JavaScript Code
CSS und JavaScript Code wird gemäß der aktiven Elemente durch dieses Plugin 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.

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

Admin 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:

Admin 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.

Admin 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.

Admin 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.

Admin 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