Neu Produktübersichten anpassen - Text als Button darstellen

HMH Marketing

Mitglied
25. Juli 2022
25
4
Hallo zusammen,

ich konnte über die Suche nichts finden, daher mache ich ein neues Thema. Wir nutzen JTL Shop 5.2.4 mit dem Nova Child Theme. Im Megamenü haben wir einen Punkt Produkte, der dann zu einer Produktübersicht führt. In der Übersicht werden die Kategorienamen als Text mit Unterstrich dargestellt. Hier noch mittig, eine Ebene tiefer linksbündig. Wir wollen den Text als Button darstellen, was wesentlich schöner aussieht.

Meine Frage ist nun, wo finde ich die Klassen oder die passende Template Datei, sodass ich diese bearbeiten kann?

Müssten die Klassen: "caption" und "text-clamp-2" sein. Diese möchten wir einfach gegen "btn btn-info btn-block" austauschen. Ein Beispiel habe ich als Foto beigefügt. Bin für alle Lösungsansätze dankbar.
 

Anhänge

  • Produktübersicht.jpg
    Produktübersicht.jpg
    239 KB · Aufrufe: 10

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.701
1.613
Berlin
Der beste weg wäre, das über die tpl Dateien zu machen, als Beispiel für die item_box.tpl die du dann in dein Child, mit nur diesem Inhalt einfügst

Code:
                        {block name='productlist-item-box-caption-short-desc'}
                            <div class="productbox-title" itemprop="name">
                                {link href=$Artikel->cURLFull class="btn btn-info btn-block"}
                                    {$Artikel->cKurzbezeichnung}
                                {/link}
                            </div>
                        {/block}
 
  • Gefällt mir
Reaktionen: HMH Marketing

HMH Marketing

Mitglied
25. Juli 2022
25
4
Der beste weg wäre, das über die tpl Dateien zu machen, als Beispiel für die item_box.tpl die du dann in dein Child, mit nur diesem Inhalt einfügst

Code:
                        {block name='productlist-item-box-caption-short-desc'}
                            <div class="productbox-title" itemprop="name">
                                {link href=$Artikel->cURLFull class="btn btn-info btn-block"}
                                    {$Artikel->cKurzbezeichnung}
                                {/link}
                            </div>
                        {/block}
Danke dir, das hat super funktioniert. Allerdings nur auf der zweiten Produkt-Ebene. Auf der ersten Ebene unter dem Menüpunkt /Produkte passiert nichts. Kann es sein, dass es sich da um Kategorien handelt und es dann in einer anderen tpl steht?
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.701
1.613
Berlin
Ich sehe j anicht welche Boxen du meinst aber du hast in Productlist/
  1. item_box
  2. item_list
  3. item_slider
in snippets/ hast du dann noch slider_items.tpl

Die musst du dann natürlich alle nach meinem Prinzip anfassen
 

HMH Marketing

Mitglied
25. Juli 2022
25
4
Ich sehe j anicht welche Boxen du meinst aber du hast in Productlist/
  1. item_box
  2. item_list
  3. item_slider
in snippets/ hast du dann noch slider_items.tpl

Die musst du dann natürlich alle nach meinem Prinzip anfassen
Ich habe nochmal ein bisschen rumprobiert, hatte aber noch keinen Erfolg.

Es handelt sich auf jeden Fall um Auflistungen der Kategorien / Unterkategorien. Glaube die Klasse heißt "class=sub-categories". Konnte diese aber bis jetzt nirgends finden. Ich habe mal ein Beispielfoto hochgeladen. Die Produktlisten sehen gut aus, die Kategorielisten aber nicht. Die tpl. Dateien habe ich mit deinem Code schon überall angepasst.
 

Anhänge

  • Kategorieübersicht.jpg
    Kategorieübersicht.jpg
    138,6 KB · Aufrufe: 6

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.701
1.613
Berlin
Ok, das sind ja die Kategorien, mein Fehler ich bin von den Produkten ausgegangen, weil ich da Produkte und clamp gelesen habe, clamp ist in den Kategorienamen nicht vorhanden

bei den Kategorien ist es vergleichbar

da wäre es in productlist die header.tpl, das sollte der Block sein den du dann wie du das bei den Produkten gemacht hattest in deinem Child übernimmst

Code:
                                    {block name='productlist-header-subcategories-link'}
                                        <div class="caption">
                                            {link href=$subCategory->getURL() class="btn btn-info btn-block"}
                                                {$subCategory->getName()}
                                            {/link}
                                        </div>
                                    {/block}
 
  • Gefällt mir
Reaktionen: HMH Marketing

HMH Marketing

Mitglied
25. Juli 2022
25
4
Ok, das sind ja die Kategorien, mein Fehler ich bin von den Produkten ausgegangen, weil ich da Produkte und clamp gelesen habe, clamp ist in den Kategorienamen nicht vorhanden

bei den Kategorien ist es vergleichbar

da wäre es in productlist die header.tpl, das sollte der Block sein den du dann wie du das bei den Produkten gemacht hattest in deinem Child übernimmst

Code:
                                    {block name='productlist-header-subcategories-link'}
                                        <div class="caption">
                                            {link href=$subCategory->getURL() class="btn btn-info btn-block"}
                                                {$subCategory->getName()}
                                            {/link}
                                        </div>
                                    {/block}
Das hat funkitoniert, vielen lieben Dank!

Gibt es irgendeinen Trick, wie ich rausfinden kann, in welcher .tmp die Daten stehen? Habe auch schon etwas in der Dokumentation gelesen, aber nichts gefunden.
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.701
1.613
Berlin
Ich, da ich ja ständig in den Templates arbeite kenne sehr viele Positionen, wenn ich eine Position nicht direkt weiß, dann schaue ich über die Console vom Browser nach dem Element in dem ich etwas ändern möchte nach Anhaltspunkten, z.B.: einer ID oder Klasse die einen besondere Bezeichnung hat.
Alles andere ist dann nur noch ein Durchsuchen der tpl Dateien nach dieser Bezeichnung und ein durchhangeln zum entsprechendem Element.
Da ich PHP Storm verwende ist das relativ einfach

in diesem Fall wäre es z.b: sub-categories was ja nicht so oft vorkommen sollte.

also erst das schauen im quellcode über die Console

2023-11-22 13 28 51.png

und dann in meinem Editor alle tpl Dateien durchsuchen lassen, geht natürlich schnell da dort alles im index ist


2023-11-22 13 30 04.png

dann hast du eben da die header.tpl zu stehen, schaust dir den Bereich an und findest auch deinen Block in dem das steht was du ändern möchtest.
 
  • Gefällt mir
Reaktionen: ple und HMH Marketing

HMH Marketing

Mitglied
25. Juli 2022
25
4
Ich, da ich ja ständig in den Templates arbeite kenne sehr viele Positionen, wenn ich eine Position nicht direkt weiß, dann schaue ich über die Console vom Browser nach dem Element in dem ich etwas ändern möchte nach Anhaltspunkten, z.B.: einer ID oder Klasse die einen besondere Bezeichnung hat.
Alles andere ist dann nur noch ein Durchsuchen der tpl Dateien nach dieser Bezeichnung und ein durchhangeln zum entsprechendem Element.
Da ich PHP Storm verwende ist das relativ einfach

in diesem Fall wäre es z.b: sub-categories was ja nicht so oft vorkommen sollte.

also erst das schauen im quellcode über die Console

Den Anhang 103417 betrachten

und dann in meinem Editor alle tpl Dateien durchsuchen lassen, geht natürlich schnell da dort alles im index ist


Den Anhang 103420 betrachten

dann hast du eben da die header.tpl zu stehen, schaust dir den Bereich an und findest auch deinen Block in dem das steht was du ändern möchtest.

Super, vielen Dank für deine Hilfe und die Infos!
 

Ähnliche Themen