26
Feb
JTL Shop 3 Plugin: Category Classes
Abgelegt in: DEV

JTL Shop 3 ist ein noch recht junges Shopsystem aus dem Hause JTL. Neu in Version 3 ist ein ordentliches Plugin System, das quasi beliebige Erweiterungen des Shopsystems ermöglicht (hier hatte ich bereits über JTL Shop Plugins geschrieben).

JTL Shop Plugins bei Kreativkonzentrat.de

Im Zuge des Updates eines JTL Shop der Version 2.19 habe ich mich an ein erstes Frontend Plugin gewagt. Auch um gleich die Idee hinter der Pluginarchitektur zu lernen und zu verstehen. Herausgekommen ist das Plugin Category Classes.

Gleich zu Download und Changelog

Kategorie Klassen

Die Idee hinter dem Plugin: jede Kategorie soll separat per CSS Selektor ansprechbar sein. So kann man per CSS das Look and Feel jeder Kategorie im Shop individuell gestalten. Triviales Beispiel: eine Kategorie „Garten“ kann mit grünen Hintergrundbild versehen werden, die Kategorie „Möbel“ eher in brauner Holzoptik.

So weit so gut. Im Zusammenspiel von JTL WaWi und JTL Shop können wir dies bereits mit dem Kategorieattribut „css_klasse“ behandeln. Dieses Plugin nimmt uns schlicht die Arbeit ab und setzt den Namen der Kategorie als class Attribut des body Tags der Produkt- und Kategorieseiten.

Konkret Beispiele

Ich greife obiges Beispiel auf. Folgende Kategoriestruktur ist gegeben:

  • Garten
    • Beete
    • Zubehör
  • Möbel
    • Betten
    • Zubehör

Die Kategorieseite Garten->Beete und die Seite eines Produktes in Garten->Beete hat nun folgenden öffnenden Tag:

<body class="[...] beete garten"/>

Die Kategorieseite Möbel->Betten und die Seite eines Produktes in Möbel->Betten hat nun folgenden öffnenden Tag:

<body class="[...] betten moebel"/>

Umlaute werden entsprechend ersetzt. Bestehende Werte im class Attribut werden nicht überschrieben, sonder bleiben erhalten. Die neuen Klassen werden nur hinzugefügt.

Zusätzlich habe ich eine Option eingebaut, die auch die Kategorieliste des Themes JTL-Shop3-Tiny derart abändert, dass die Kategorienamen als class Attribute der li Tags gesetzt werden. Eine Kategorieliste würde nun wie folgt aussehen:

<div class="sidebox_content">
<ul class="categories">
<li class="node active garten">
<a [...]><span>Garten</span></a><ul class="subcat">
<li class="first beete"><a [...]><span>Beete</span></a></li>
<li class="zubehoer"><a [...]><span>Zubehör</span></a></li>
</ul>
<!-- / subcat -->
</li>
<li class="node moebel">
<a [...]><span>Möbel</span></a><ul class="subcat">
<li class="first betten"><a [...]><span>Betten</span></a></li>
<li class="zubehoer"><a [...]><span>Zubehör</span></a></li>
</ul>
<!-- / subcat -->
</li>

Die Option ist standardmäßig deaktiviert und kann in der Plugin Konfiguration aktiviert werden.

Changelog

Changelog Version 1.02 – 26.10.2011

Alle Änderungen in diesem Blogpost.

Changelog Version 1.01 – 11.03.2011

Tausend Dank an Maik Waffen, der maßgeblich zu dieser Version beigetragen hat!

  • neue Einstellung: Möglichkeit, nur Rootkategorien als Klassen zu schreiben (Beispiel: bei Möbel -> Zubehör wird in Zubehör nur moebel zum class Attribut hinzugefügt)
  • Bugfix: alle unerlaubten Sonderzeichen werden aus den class Attribut entfernt
  • neue Einstellung: Ersetzungsregeln der Form ö,ä,ü:oe,ae,ue können festgelegt werden. Ersetzt bspw. ö mit oe, bevor diese als unerlaubte Sonderzeichen aus dem Klassennamen entfernt werden

Download

Nach langer Vorrede nun das Plugin als ZIP.

Category Classes JTL Shop 3 Plugin
Category Classes JTL Shop 3 Plugin
category_classes_101.zip
Version: 1.01
5.2 KiB
1968 Downloads
Details...

Getestet wurde das Plugin übrigens mit JTL Shop 3.07, also der aktuell vorliegenden Version. Die Installation läuft wie jedes JTL Shop 3 Plugin:

  1. Zip-Datei lokal entpacken
  2. den entpackten Ordner category_classes per FTP hochladen nach [shoproot]/includes/plugins/
  3. Plugin-Installation im JTL Shop Backend unter Plugins->Pluginverwaltung
  4. Konfiguration der Plugin Optionen unter Plugins->Plugins->Category Classes

Für ein Update einfach mit dem aktuellen Installationspaket den Ordner der alten Version überschreiben. Im Backend dann via Pluginverwaltung das Update durchführen. Vorsicht: die Einstellungen werden bei einem Update zurückgesetzt!

Natürlich freue ich mich über Feedback. Auch Feature Request können in den Kommentaren auf mich losgelassen werden :o)

15 Kommentare

15 Antworten zu “JTL Shop 3 Plugin: Category Classes”

  1. Category Classes für xt:Commerce bei ShopSEO.de sagt:
    März 26th, 2011 at 12:41 am

    […] vor einigen Wochen habe ich das gleiche Problem im JTL Shop 3 via Plugin gelöst. Nun die gleiche Anforderung in einem xtcModified: verschiedene Seiten im Onlineshop sollen […]

  2. Ulli sagt:
    Mai 14th, 2011 at 8:12 pm

    Das Plugin funktioniert insoweit super, als dass die Kategorieklassen im Body und den li-Tags auftauchen. Ich benötige sie aber im Container , den dort wird das Hintergrundbild für den Shopheader definiert. Und das soll kategoriebezogen wechseln.

    Kann man das Plugin so modifizieren, dass die Klassen auch in den geschrieben werden?

  3. NiBa sagt:
    Mai 15th, 2011 at 10:14 am

    Hallo Ulli,

    du meinst ein div Element mit der id „container“? Das könntest du mit den bisherigen Funktionen auch via CSS ansprechen:

    body.mein-kategorie div#container {background: url(mein-bild.jpg)}

    Wenn das nicht hilft: bitte den entsprechenden HTML Quelltext einmal hier posten oder – wenn es nicht zu stark modifiziert wurde – das Template nennen.

    Viele Grüße!
    Niels

  4. Ulli sagt:
    Mai 15th, 2011 at 10:38 pm

    Super, das funktioniert so. Danke für den Hinweis.

    Gruß, Ulli

  5. Maik sagt:
    Mai 23rd, 2011 at 9:12 am

    Danke für das tolle Plugin. Dadurch ist es mir wirklich einfach möglich, mein Menü individuell anzupassen.
    Nun habe ich ein Shop-Update gemacht auf 310. Hier zeigt er dann mit der Plugin-Version 1.0 ein fehlerhaft. Also wollte ich mir die version 1.01 herunterladen, doch ich kann das ZIP-File nicht entpacken. Erbringt mir eine Fehlermeldung –> unbekanntes Format oder beschädigt.

    Gruß maik

  6. NiBa sagt:
    Mai 23rd, 2011 at 11:13 am

    Hallo Maik,

    danke für das Lob und Feedback. Den Fehler des Plugins selbst kann ich mir nicht erklären, in der Version 1.01 hab ich es gerad nochmals neu auf einem JTL Shop 3.10 installiert, funktioniert prima. Beim ZIP Fehler ist wohl ein Update eines WordPress Filemanagers Schuld. Ich habe diesen übergangsweise deaktiviert, der Download des Plugins in Version 1.01 sollte nun erstmal funktionieren.

    Viele Grüße!

  7. Maik sagt:
    Mai 23rd, 2011 at 11:34 am

    Ok, jetzt läuft es. Danke noch mal.

    Gruß Maik

  8. martin sagt:
    Juni 2nd, 2011 at 11:00 pm

    Hallo…
    irgendwie hab ich es noch nicht gerafft….kann ich über die Kategorienboxen bzw. deren Inhalte auch meinen Header oben ändern ?
    wenn ja… wie ?

    Martin

  9. NiBa sagt:
    Juni 19th, 2011 at 11:44 am

    Hallo Martin,

    das Plugin schafft die Grundlage dafür, dass Du via CSS Selektoren diverse individuelle Anpassungen an Kategorieseiten oder Produktseiten deines JTL Shops vornehmen kannst. Was Du durch das Plugin nicht bekommst ist bspw. eine Möglichkeit, im Shop-Backend Bannerbilder hochzuladen und zu verwalten. Category Classes ist somit eher für versierte Webentwickler gedacht, die gut mit CSS und HTML umzugehen wissen.

    Solltest Du das Plugin schon auf einer Testseite nutzen, schaue einfach in den body Tag einer beliebigen Kategorieseite. Hier findest du im class Attribut entsprechende Klassennamen, die Dir das Plugin erzeugt haben.

    In den nächsten Wochen geht auch ein Demoshop online, in dem auch dieses JTL Plugin ausführlicher gezeigt wird. Ich hoffe dann wir einiges klarer ;)

    Viele Grüße
    Niels

  10. christian sagt:
    August 23rd, 2011 at 9:27 am

    Hallo, der Beitrag gefällt mir sehr gut, denn er ist übersichtlich und schritt für schritt gut erklärt. Alles kann man gut nach vollziehen. Meiner Meinung nach finde ich es sehr gut, das du hier das Plugin als Zip zum download herein gestellt hast. Gute Sache und danke für das Plugin.

  11. TN sagt:
    September 8th, 2011 at 11:16 am

    Kann ich mir eine Seite anschauen die dieses Plugin schon einsetzen. Klingt gut.

  12. Kategorieattribut css_klasse in der JTL WaWi und JTL Shop 3 | Kreativkonzentrat sagt:
    September 30th, 2011 at 3:51 pm

    […] Anpassungen des Shops nach der aktuellen Kategorie vornehmen will, wird beim kostenfreien Plugin Category Classes sicher fündig.Antworten abbrechenDeine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche […]

  13. Christian Rauchenwald sagt:
    Oktober 1st, 2011 at 12:02 am

    Nützliches Plugin aber sinnvoller wäre es nicht den Namen der Kategorie aus der Brotnavi zu verwenden sondern kKategorie als class zu nutzen.
    Bei mehrsprachigen Shops muss man mit dem Plugin alles mehrfach angeben, ausserdem muss man die CSS bei Änderung des Kategorienamens ebenfalls anpassen.

    kKategorie hingeben ist in allen Sprachen immer gleich und auch unabhängig vom Kategorienamen.

    Finds dennoch sehr nützlich, würd mich allerdings sehr freuen wenns irgendwann über kKategorie laufen würde.

  14. Category Classes 1.02 | Kreativkonzentrat sagt:
    Oktober 26th, 2011 at 1:18 pm

    […] kostenfreie Plugin Category Classes für JTL Shop 3 gibt es nun in einer aktualisierten Version (hier habe ich das Plugin genauer vorgestellt). Neu ist die Möglichkeit, auch Newskategorien und […]

  15. Torben sagt:
    Dezember 8th, 2015 at 12:27 pm

    Hallo, gibt es dieses Plugin für JTL Version 4? Im ersten Release von JTL 4.0 hat das Plugin noch funktioniert, jetzt jedoch nicht mehr.

    Ich kann hier auch nur Version 1.0.1 runterladen, die Version 1.0.2 scheint nicht mehr verfügbar zu sein bzw. ist der Blog Post bei Kreativkonzentrat nicht mehr da …

    Oder gibt es irgendein vergleichbares Plugin?

    Für mich unbegreiflich, dass das Shopsystem die CSS-Klassen nicht von Haus aus in die entsprechenden Elemente schreibt.

Eine Antwort schreiben