Einzelnen Menupunkt in Top Navigation Abheben.

Shopware 5 Themes & Design
1

Hallo Zusammen,

Bei unserem Shop sind alle Artikelkategorien oben in der Top Leiste zu sehen. Ist es möglich, das man einzelnen Kategorien andere Farben zuweist?

Meine Idee dazu war:

Ich habe die Kategorie erstellt aber habe sie nicht in der Top-Navi anzeigen lassen. Dann habe ich mir das Template (main-navigation.tpll) geöffnet und den Listenpunkt manuell eingefügt mit der jeweiligen Formatierung der Schrift:

{block name='frontend_index_navigation_categories_top_before'}{/block}

            {foreach $sMainCategories as $sCategory}
                {block name='frontend_index_navigation_categories_top_entry'}
                    {if !$sCategory.hidetop}
                        
                            
                                {$sCategory.description}
                            
                                
                    {/if}
                            Außenbereich

Leider weiß ich nicht an welche Stelle ich das eintragen soll.

So wie es jetzt ist kommt dei “neue” Kategorie immer wieder im Wechsel mit den anderen Kategorien untereinander vor.

Sie soll aber nur einmal ganz am Ende also ganz Rechts stehen.

Kann mir jemand helfen?

 

Beste Grüße

Pasi

2

Wenn ich es richtig verstehe soll die letzte Kategorie eine andere Farbe bekommen ?

das kannst du doch mit less gut hinbekommen

&:last-child {deine Farbe;}

 

3

Hallo,

 

Danke für die Hilfe,

Aber irgendwie werden alle Kategorien jetzt gefärbt.

 .navigation--link {
           
            color: #5f7285;
            &:last-child 
            {color: #32cd32;}

  
		}

oder mach Ich das falsch?

4

Hier mal mein Code:
 

{block name='frontend_index_navigation_categories_top_entry'}
	{strip}
		{if !$sCategory.hidetop}
			
				
					{$sCategory.description}
				
			
		{/if}
	{/strip}
{/block}

Der relevante Teil ist

navigation--itemid--{$sCategory.id}

Die Kategorie-ID wird ja im Backend angezeigt.
So bekommt jeder Tab eine Class, die Du dann per Less definieren kannst.

2 „Gefällt mir“
5

Probier es mal so aus, damit bekommst du für jede Kategorie die ID und damit kannst du diese dann individuell gestalten

{extends file="parent:frontend/index/main-navigation.tpl"}

{block name='frontend_index_navigation_categories_top_entry'}
	{if !$sCategory.hidetop}
		
			
				{$sCategory.description}
			
		
	{/if}
{/block}

 

2 „Gefällt mir“
6

Hallo,

So klappt es jetzt.

Dank euch

1 „Gefällt mir“
7

Hallo, ich klinke mich hier auch mal rein.

Wie kann ich denn nun auf die ID zugreifen?

Vielen Dank

8

Hallo Zusammen,

Ich hatte das Problem ja bereits mal gelöst, und wollte das nun für ein neues Projekt nutzen

Doch leider stehe ich gerade total auf dem Schlauch.

Wie spreche ich nochmal die einzelnen IDs in der less Datei an?

kann mir da jemand weiter helfen?

 

9

Ahh habs doch wieder hin bekommen.

Falls das nochmal jemand brauch:

.navigation-main .navigation--itemid--82 
.navigation--link{
	
	background-color: #32cd32;
	color: white;

}

 

2 „Gefällt mir“
10

Danke an alle die sich hier dem Thema angenommen haben, das hat mir einige Zeit und weiter Plugins gespart.  Dennoch würde ich das Thema gerne wiederbeleben und kein neuen Thread aufmachen. Ich hoffe, das ist OK.

Wie verhält sich hier die mobile Version? Diese scheint komplett anders aufgebaut zu sein. In meinem Beispiel handelt sich um ID 39 welche im Desktop Rot ist, aber nicht in mobiler Ansicht. Daher habe ich folgendes im CSS/LESS hinzugefügt. 

// mobile view category color red
[data-fetchurl="/widgets/listing/getCategory/categoryId/39"] {
  color: red !important;
}

Erweitern könnte man es ggf. wenn man den Menüpunkt auswählt, dass dann in mobiler Ansicht auch die anderen 2 aufgezeigten Titel in „rot“ abgebildet werden. Ob das so die richtige Art ist oder man es doch lieber via Template einbaut kann ich nicht sagen. Gerne könnt ihr ja mal eurer Feedback da lassen.