Anleitung Font Awesome Icons in den Kategorien

Wir haben längere Zeit rumprobiert FA Icons schön in die Kategorien einzubinden. Die bisherigen Anläufe waren sehr unschön und mit viel zu viel CSS oder einem <i class> tag in dem eigentlichen Kategorienamen verknüpft. Ein Ticket/Wunsch dazu wurde vor 2 Jahren geschlossen.
Heute haben wir daher eine sehr saubere Lösung umgesetzt, die responsive, sprachenübergreifend und individuell anpassbar funktioniert. Die Updatesicherheit ist selbstredend



Wer Live gucken will: Shop

Ladet aus /templates/Honeygrid/boxes die Dateien box_categories.html und box_categories_top.html herunter.
An beide Dateien -USERMOD anhängen.

box_categories-USERMOD.html in ca. Zeile 25 das suchen

Code:

{$categories_item.data.name|replace:"&":"&"|replace:"&":"&"}

ersetzen durch

Code:

<div class="faicon--{$categories_item.data.id}">{$categories_item.data.name|replace:"&amp;":"&"|replace:"&":"&amp;"}</div>

box_categories_top-USERMOD.html in ca. Zeile 17 das suchen

Code:

{$categories_item.data.name|replace:"&":"&"|replace:"&":"&"}

ersetzen durch

Code:

<div class="faicon--{$categories_item.data.id}">{$categories_item.data.name|replace:"&amp;":"&"|replace:"&":"&amp;"}</div>

Was passiert da?
Die Smarty-Variable {$categories_item.data.name} (Kategoriebezeichnung) bekommt in der Navigation einen div Container verpasst. Der Name des Containers wird für jede Kategorie anhand ihrer ID dynamisch generiert und erhält das Präfix "faicon--".
Das ist deshalb sinnvoll, weil bei mehrsprachigen Shops pro Kategorie nur ein CSS Style erstellt werden muss. Wir haben z.B. die Kategorie "Einzelstücke" auf deutsch und die selbe "single pieces" auf englisch. Beide können wir dadurch mit den selben Styles versehen. Desweiteren bietet es den Vorteil, dass man bei Umbennenung oder neuer Anordnung der Kategorien nicht auch die CSS Klassen im Stylesheet ändern oder mit :nth-child aufpassen muss.


Als nächstes müssen nur noch im StyleEdit oder unter /templates/Honeygrid/usermod/css die Styles hinterlegt werden.
Zu den Screenshots oben sehen diese so aus und enthalten das Pseudoelement :before. Der Content (z.B. "\f005";) ist der Unicode von FontAwesome zum jeweiligen Icon und kann bei FA auf der Seite gefunden werden.

Code:

.faicon--102:before, .faicon--75:before, .faicon--196:before, .faicon--193:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right:5px;
}


.faicon--102:before{ /*Neue Modelle */
    content: "\f005";
    color: #f49b42;
}

.faicon--75:before{ /*Einzelstücke */
    content: "\f3a5";
    color: #ffa5bd;
}

.faicon--196:before{ /*sale */
    content: "\f295";
    color: #f00;
}

.faicon--193:before{ /*Lady/uni */
    content: "\f228";
    color: #00b2ff;
}

 

Hallo,

genau nach so etwas habe ich gesucht.
Leider funktioniert es bei mir noch nicht.. ich habe es genau so umgesetzt. Könntet ihr mir nochmal sagen, wo genau ich dann die USERMOD Dateien und Css Dateien hochladen muss?

Viele Dank!

 

die -USERMOD ist eine Datei, das css kannst Du in das "eigene css" im style Editor packen.

 

ok, aber wo lade ich die box_categories.html_USERMOD und box_categories_top-USERMOD.html hoch?
Wieder bei templates/honeygeid/boxes?
Leider funktioniert das nicht

 

steht doch dabei

 

Das div mit der classe faicon-- wird bei mir einfach nicht angezeigt wenn ich das Menü untersuche

 

Ich habe alles genauso umgesetzt wie in der Anleitung, wo kann der Fehler liegen?

 

nutzt du das honeygrid template oder schon das neuere Theme?

 

Das honeygrid Template

 

du hast die dateien aus dem Ordner
/templates/Honeygrid/boxes/
geladen und mit usermod dran wieder dahin hochgeladen?
caches geleert?

 

ja genau so, mehrmals überprüft ob ich auch wirklch alles richig kopiert habe, aber das div zeigt es einfach nicht an.

 

Wo muss ich den neuen code denn hochladen, falls ich doch auf das Theme umgestellt habe? Denn die USERMOD-Datei scheint ja nicht umgesetzt zu werden.

 

dann müsste wohl jemand nachsehen, schreib Barbara mal an die bietet sowas an.

 

das werde ich versuchen. Danke für deine Hilfe!

 

hoffe Du hast die Datei nicht so benannt wie in Deinem Text: box_categories.html_USERMOD?

 

nein, das war versehentlich in der Schnelle hier so kopiert. Habe sie box_categories_top-USERMOD.html und box_categories-USERMOD.html benannt

 

Plözlich sind die Icons da, habe es vor 2 Tagen schon gemacht und nichts mehr geändert seit dem. Aber ok..
Danke für eure Hilfe!

 

dann würd ich mal sagen du hast evtl. im Browser den cache nicht geleert

 

Ich kenne sowas, hatten wir bei einigen Änderungen auch immer wieder und wir vermuten, dass es an Problemen beim Hoster/PHP Einstellungen lag. Änderungen an CSS oder im Inhalt (Content Manager) wurden einfach nicht übernommen.

Wenn du so ein Problem hast und nichts hilft, mache eine kleine Änderung am Shop wie z.B. eine Kategorie deaktivieren oder zeitweise umbenennen. Cache leeren. Nimm dann einen anderen Browser her und schaue die Änderung an. Wenn dann die kleine Änderung nicht sichtbar ist, dann spinnt der Hoster.
Wenn du sie aber siehst, hast wirklich einen Dreher im CSS/HTML Code.

 

Danke für die Anleitung. Funktioniert das Einbinden der Icons auch für "Unterkategorien" im Hauptmenü?