Reduzierung der Requests im JTL-Shop

[deepblue]

Hallo,

möchte gerne meine Requests im JTL- Shop 3.19 Build:3 reduzieren.
Habe über einige Tools gesehen, das bei uns im Shop viele einzelne Grafiken geladen werden.
Teilweise ca. 120 Grafiken.

Nun möchte ich gerne das ganze durch Font Awesome ersetzen. Ist so etwas möglich
macht das für einen JTL-Shop sinn? Kann man so die Requests reduzieren?

Würde mich über ein paar Infos freuen. Vielleicht setzt der eine oder andere ja das Font Awesome
in JTL-Shop schon ein.

Vielen Dank!

 

[WIMA Webdesign]

AW: Reduzierung der Requests im JTL-Shop

Font Awesome habe ich schon eingebunden, funktioniert also. Die Frage ist ob Font Awesome auch in dein Design passt und wieviele Grafiken du dadurch einsparen kannst. Welches Format/Größe haben deine Grafiken? Evtl. kannst du da noch optimieren oder z.B. die .png Grafiken zu einer Gesamtgrafik bündeln und mit background position per css für die einzelnen Elemente positionieren.

Viele Grüße
Mario

 

[deepblue]

AW: Reduzierung der Requests im JTL-Shop

Wie funktioniert das mit der Einbindung in JTL-Software? Möchte gerne einzelne Elemente für die Navigationsleiste verwenden zum Beispiel die Pfeile ">".

 

[martinwolf]

AW: Reduzierung der Requests im JTL-Shop

Wie funktioniert das mit der Einbindung in JTL-Software? Möchte gerne einzelne Elemente für die Navigationsleiste verwenden zum Beispiel die Pfeile ">".

Du müsstest die besagten Stellen die durch Font Awesome dargestellt werden sollen, durch Elemente mit den dafür vorgesehenen Klassen ersetzen. Was am Ende sicherlich einiges an _custom Files produziert.

 

[deepblue]

AW: Reduzierung der Requests im JTL-Shop

@martinwolf

Vielen Dank für deine Nachricht. Würde man so die Requests reduzieren?

Möchte gerne mit der Navigationleiste links im Shop anfangen. Mich stören hauptsächlich die Icons in der Navi vor den Link (arrow_right.png und square.png)

 

[WIMA Webdesign]

AW: Reduzierung der Requests im JTL-Shop

---

 

[WIMA Webdesign]

AW: Reduzierung der Requests im JTL-Shop

Font Awesome kannst du auf zwei Wege einbinden

1 Möglichkeit:
Lade dir unter folgendem Link Font Awesome runter
Font Awesome, the iconic font and CSS toolkit

Entpacke die Datei und bennene den Ordner in diesem Beispiel in awesome um. Lade den Ordner per FTP in deinen Theme Ordner

Öffne die header.tpl und trage VOR dem </head> Befehl folgendes ein

<link rel="stylesheet" href="{$currentTemplateDir}themes/NAME DEINES THEMEORDNERS/awesome/css/font-awesome.min.css">

Speicher die header.tpl jetzt als header_custom.tpl ab.

Jetzt kannst du in jeder beliebigen .tpl Datei wie folgt icons einbinden:
<i class="fa fa-shopping-cart"></i> Das ist das Icon für einen Warenkorb

2 Möglichkeit:

Füge einfach in der header.tpl VOR dem </head> Befehl folgendes ein

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Speichere jetzt die header.tpl als header_custom.tpl ab. Den Awesome Ordner musst du in diesem Fall NICHT downloaden.


Das Einbinden der icons funktioniert im zweiten Fall wie bei Möglichkeit 1, jedoch bist du halt bei Möglichkeit 2 darauf angewiesen, das der Pfad zum Aufruf der font-awesome.min.css immer gleich bleibt. Sonst werden quasi alle Icons von heute auf morgen nicht mehr angezeigt.

Die Icons können natürlich auch noch nach belieben mit css gestylt werden. Die Requests kannst du dadurch schon minimieren, jedoch kommt es natürlich darauf an, wieviele Grafiken du gegen Awesome icons austauscht. Wenn es nur 3 oder 4 Grafiken sind, noch dazu so kleine Pfeile, dann wirst du wohl keinen Unterschied merken.

Viele Grüße
Mario

 

[martinwolf]

AW: Reduzierung der Requests im JTL-Shop

@martinwolf

Vielen Dank für deine Nachricht. Würde man so die Requests reduzieren?

Möchte gerne mit der Navigationleiste links im Shop anfangen. Mich stören hauptsächlich die Icons in der Navi vor den Link (arrow_right.png und square.png)

Du könntest auch alle Theme Grafiken zu einer Sprite zusammenfassen. Das wäre dann am Ende auch nur ein einziger Request. Allerdings müsstest du dann das CSS entsprechend anpassen und ggf. auch Code innerhalb der Templates. Aber auch die Verwendung von Font Awesome verursacht logischerweise einen neuen Request. Daher, wenn du nicht alle Theme Grafiken ersetzt sondern nur die im Header verwendet werden, bringt dir das ganze nicht viel Ersparnis. Entweder alle oder keine.