Vorteile im Move-Template nur auf der Startseite anzeigen

Lesezeit 3 min

Das Move Template beinhaltet im Fussbereich die Vorteile-Boxen die auf allen Shopseiten angezeigt werden. Ich zeige wie man sie nur auf der Startseite anzeigt oder im Bestellvorgang ausblendet.

Vorteil im Move-Template
Die Boxen mit Vorteilen

Jede Systemseite im JTL-Shop hat eine bestimmte ID, die Body angezeigt wird und in Vorlagen oder in CSS angesprochen werden kann. Ich zeige eine einfache Methode mit CSS die relativ wenig Aufwand erfordert und doch zum Ziel führt.

Wie findet man die ID der aktuellen Shopseite?

Man geht auf die Wunschseite im Shop und klickt mit rechter Maustaste auf die obere linke Ecke und wählt <Element untersuchen> aus. Es öffnet sich ein neues Fenster im unteren Bereich des Browsers. Dort sucht man nach Abschnitt mit <body> wie auf dem Screenshot zu sehen.

Inspektor im Browser

CSS-Code schreiben

Nun wissen wir die ID der Startseite und können unseren CSS-Code für die Anzeige der Boxen wie folgt schreiben:

Nur auf der Startseite anzeigen

/* Zuerst blenden wir den ganzen Bereich überall aus */
.container-plain.actions {
display: none;
}
/* ...und zeigen ihn nur auf der Startseite an */ 
body[data-page="1"] .container-plain.actions {
display: block;
}

Nur im Bestellvorgang ausblenden

/* Der Bestellvorgang bzw. Checkout hat eine ID 11 */
body[data-page="11"] .container-plain.actions {
display: none;
}

In welcher Datei speichert man den CSS-Code?

Der CSS-Code sollte im Child-Template abgelegt werden und zwar in der CSS-Datei des gewählten Themes, z.B. <Blau>.

/templates/MoveChild/themes/blue/style.css