Gambio GX3 - Body Class oder ID hinzufügen?

Gambio GX3 - Body Class oder ID hinzufügen

Oftmals ist es nötig, den Body-Tag oder DIVs mit einer Klasse oder ID zu versehen, damit man per CSS darauf zugreifen kann. Mögliche Szenarien dafür:

  • Jede Shopkategorie soll unterschiedliche Hintergrundfarben oder Grafiken/Fotos erhalten.
  • Je nach Shopkategorie sollen Boxen, Banner, Informationen angezeigt werden oder nicht.
  • Um Landingpages zu gestalten.
  • Spezifische Kundeninformationen sollen angezeigt werden oder nicht.

Das ist im Gambio GX3 Template relativ einfach umzusetzen. Ich nutze hier jQuery. Es ist updatesicher und kann sogar zwischen Kategorien und Unterkategorien unterschieden.

Ablauf:

  1. Neue Datei "Ihre-datei.js" erstellen und das jQuery reinkopieren, ggfls. anpassen.
  2. Danach Datei in /templates/Honeygrid/usermod/javascript/Global/ uploaden.
  3. WICHTIG: Danach Caches leeren.
  4. Testen mittels Element-untersuchen (Bei Safari) oder Element-Informationen (Chrome, FF), ob die neue Klasse, ID erscheint. Nach möglichen Änderungen immer wieder die Caches leeren.

jQuery/JavaScript

$(function() {
// Der Pfad der Kategorien wird aufgeteilt (gesplittet),
// damit eine Abfrage erzeugt werden kann.
// In meinem Bespiel: marken(1)/dr-spiller-online-kaufen(2)/

    var pathname_first = window.location.pathname.split("/")[2];
    var pathname_second = window.location.pathname.split("/")[1];

// Ich füge hier die Klasse dem Container #outer-wrapper zu. 
// Kann aber auf jeden beliebigen Container und Body hinzugefügt werden.

    if(pathname_first) {
    $('#outer-wrapper').attr('class', pathname_first);
    } else {
    $('#outer-wrapper').attr('class', pathname_second);
    }
});

Das Ergebniss:

Kategorie Marken:

id="outer-wrapper" class="marken"

Unterkategorie Marken/Dr. Spiller

id="outer-wrapper" class="dr-spiller-online-kaufen"

Formatierung und CSS:

Jetzt kann ich z.B. diese Klasse per CSS ansteuern und entsprechend Formatanweisungen mitteilen.
Hier wurde eine Landingpage in der Unterkategorie realisiert: https://wellomed.com/marken/dr-spiller-online-kaufen/

Die linke Spalte mit den Boxen wurde deaktiviert, damit der Hauptbereich mehr Platz hat und größer erscheint.

Fazit:

Ich hoffe, du kannst was damit anfangen und das Snippet nach deinen Wünschen anpassen. Klar, es gibt immer mehrere Lösungswege. Dieser hier ist recht einfach..., mit ein paar Zeilen Code kann man seinen Shop weiter individualisieren. Dies ohne Overloads und updatesicher :-)