Gambio GX2 statische CSS erstellen – Anleitung

Viele Shopbetreiber haben ein großes Problem mit der Ladegeschwindigkeit. Gerade Gambio hat sehr lange Ladezeiten. Ein Weg diese zu verkürzen liegt darin, die dynamische CSS Datei von Gambio in eine statische CSS umzuwandeln. Das hängt daran, dass die dynamische CSS die Daten aus der Datenbank holen muss. Das kann aber recht schnell und einfach geändert werden.

Nachdem der Shop angepasst wurde wie ihr ihn haben wollt geht ihr wie folgt vor:

1. Erstellt eine neue Datei auf eurem Rechner und nennt sie dynamic.css

2. Nun geht ihr auf die Seite:

http://deineShopadresse.de/templates/EyeCandy/gm_dynamic.css.php?current_template=EyeCandy (Falls ihr EyeCandy verwendet)

und

http://deineShopadresse.de/templates/gambio/gm_dynamic.css.php?current_template=gambio (Falls ihr das Gambio Template nutzt)

und kopiert den kompletten Inhalt in der angelegten dynamic.css

3. ladet die Datei in den Templateordner auf eurem Server. Falls der Shop im Rootverzeichnis liegt: /templates/gambio (oder EyeCandy)/

4. Geht in den Ordner /includes und ladet die Datei header.php runter.

5. Öffnet die Datei header.php mit einem Editor und sucht die Zeile:

<link type=“text/css“ rel=“stylesheet“ href=“<?php echo ‚templates/‘.CURRENT_TEMPLATE.’/gm_dynamic.css.php‘.$renew_cache; ?>“ />

ersetzt diese Zeile mit:

<link type=“text/css“ rel=“stylesheet“ href=“<?php echo ‚templates/‘.CURRENT_TEMPLATE.’/dynamic.css‘; ?>“ />

ladet die header.php Datei nun wieder in den /includes/ Ordner in eurem Shop.

Nun sollte euer Shop immernoch so aussehen, aber er nutzt nun die statische CSS Datei.

Wer die Ladezeit von Gambio noch weiter optimieren will sollte sich diesen Artikel nicht entgehen lassen.  -> zum Artikel

 

Hier nochmal ein Video dazu:

 

VG

Daniel

25 Gedanken zu “Gambio GX2 statische CSS erstellen – Anleitung

  1. Danke guter Tip!

    eignet sich auch gut um die CSS insgesamt zu verschlanken und zu direkt dort zu bearbeiten.

  2. Hi, habe es ausprobiert. Hat super geklappt, nur dass jetzt mit Firefox und IE die CSS nicht geladen wird aber mit Safari und Chrom gehts. Kann mir da jemand helfen woran es liegen könnte? Besten Dank an euch

  3. Hallo,
    als erstes danke für die tolle Anleitung!
    Funktioniert alles wunderbar… 🙂

    Aber ich habe dennoch eine Frage, und zwar;
    Nutze ich zusätzlich zu dem EyeCandy das MobileCandy… dieses ladet jetzt auch nicht dynamisch…

    Meine Frage: wo kann ich einstellen dass die mobile.css (die ich nach dem gleichen Prinzip wie die EyeCandy erstellt habe) geladen wird?

    Danke im voraus…
    Kamo

  4. Hi Kamo,

    dazu musst du die mobile.css genauso bennen, wie die css im EyeCandy. Du kannst zum debuggen auch den Firefox + Addon User Agent Switcher nutzen. Damit kannst du die mob. Version ansehen.
    1. User Agent auf IPhone3 setzen
    2. Deine Domain + index.php?tpl=mobile öffnen also -> http://www.deinedomain.de/index.php?tpl=mobile
    3. mit Firebug oder im Quellcode schauen, welche CSS er nicht laden kann 😉

    Gruß Daniel

  5. Hallo Daniel,
    danke für deine Antwort – hat geklappt – obwohl der Gambio Support meinte dieses sei nicht möglich! 😉

    Mal eine andere Frage nebenbei, weißt du ob ich die Start- + Produktseite Einspaltig und denn Rest zweispaltig?

    Gruß
    Kamo

  6. Hi Kamo, dass sollte machbar sein, ist aber etwas aufwändig. Du müsstest in der includes/header.php ein PHP Script schreiben, welches die URL ausliest, bzw den Serverpfad und dann je nach Fall eine zusätzliche CSS einbinden. Zudem müsstest du in der index.html deines Templates dieselbe Funktion nutzen, um die Sidebar ein/ bzw auszublenden

  7. Halllo Daniel,
    danke für deine Antwort!

    Kann man das nicht einfacher lösen, nähnlich wie mit der Startseite? Oder anders gesagt, vielleicht ist es dann einfacher:
    Nur die Kategorie-Seiten Zweispaltig,
    Rest (Content, Arikelseiten, etc.) Einspaltig…

    MfG
    Kamo

  8. Hallo Kamo, dass geht natürlich auch, du musst halt vorher wissen, welche Seiten 1 Spaltig und welche 2 Spaltig sein sollen.

    Das folgende ist ein Beispiel, bei dem eine zusätzliche CSS für den Warenkorb eingebunden wird.

    if(preg_match(„/shopping_cart/“,$string))
    {
    ?>
    <link type="text/css" rel="stylesheet" href="“ />
    <?php
    }

  9. $string = $_SERVER[‚REQUEST_URI‘];
    if(preg_match(„/shopping_cart/“,$string))
    {
    ?>
    <link type="text/css" rel="stylesheet" href="“ />
    <?php
    }

  10. Hallo Daniel,
    ich nutze die Version v2.1.0.4. Ich hab gelesen man müsste bei der neuen Version nicht mehr die header.php sondern die /templates/EyeCandy/module/head.html abändern. Irgendwie werden die Änderungen nicht übernommen bzw. haben keine Wirkung. Kannst du mir evtl. sagen ob das die Richtige datei ist und wie die Datei aussehen muss damit meine statische css übernommen wird. Ich würde die css in templates/usermod/css/stylesheet.css ablegen um evtl. ein überschreiben bei nem update zu vermeiden.

    Die infos stammen von hier:http://www.gambio-forum.com/topic/6878-eigenes-css-verwenden/

    Ich habe aber keinen Pro account um das Tutorial zu sehen.

    Danke & VG Alex

  11. Hallo Alex,

    am besten legst du eine Kopie der Datei ./templates/EyeCandy/module/head.html an und nennst die Kopie „head-USERMOD.html“.

    In der USERMOD Datei änderst du nun den Abschnitt:
    link type="text/css" rel="stylesheet" href="{$tpl_path}gm_dynamic.css.php?{$content_data.CSS_PARAMS}

    zu
    link type="text/css" rel="stylesheet" href="{$tpl_path}/usermod/css/style.css"

    Das sollte reichen, nachdem du den Cache geleert hast.

    VG
    Daniel

  12. Hallo Daniel,
    ich nutze die Version v2.1.2.0 des Gambio Webshops und dort scheint die Lösung für die Version v2.1.0.4 nicht mehr zu funktionieren. Die Datei „./templates/EyeCandy/module/head.html“ ist nun von Haus aus komplett leer.
    Bin nun schon seit Stunden auf der Suche nach einer Lösung und werde leider nicht fündig.

  13. Hallo Daniel,
    ich habe die Lösung nun doch selbst gefunden dank dem Programm „TextCrawler“.

    Die CSS bei Version 2.1.2.0 ist nun in „\templates_c\%%C6^C67^C67B6960%%head.html.php“ verlinkt.

  14. Hallo Jochen,

    also zunächst stimmt es, dass es ab der Version 2.1.xxx eine Änderung gegeben hat. Das Problem ist nur, dass die Datei in dem Ordner templates_c eine Cache Datei ist. Somit, ist diese nach dem nächsten Cache leeren nicht mehr vorhanden und der Fehler tritt wieder auf.

    Ich arbeite auch aktuell an einem 2.1 Shop. Die Lösung ist die Datei templates/EyeCandy/module/head.html.
    Wenn diese leer ist, kann ich mir nur vorstellen, dass Gambio hierfür einen Standart hat, auf das das System zurückgreift.

    In meiner head.html:
    link type="text/css" rel="stylesheet" href="{$tpl_path}style.css"

    natürlich mit spitzen Klammern.

  15. Hi Daniel, vielen Dank – sehr interessant habe es umgesetzt und es funktioniert wurderbar.

    Hast Du die Zeile 1077 angesehen ? Gibt es da eine Regel im CSS dass man alles einander schreiben kann, ohne Überblick und ohne Similikon am Ende eines Selektors (vor der geschweiften Klammer)

    Ich hab mir die Zeit genommen etwas Ordnung zu schaffen, die Similikone zu ergänzen und die jeweiligen Selektoren sauber zu trennen, dass etwas Überblick herrscht. Danach verschwindet ein guter Teil vom CSS 🙁 weisst Du woran es liegen kann ?

    Danke Dir
    VG
    Carmine

  16. Hallo Carmine,

    die Zeile die du meinst, wird im Vorfeld automatisch generiert. Die Zeile sieht unsauber aus, das stimmt. Kurz gesagt, wurde der CSS Code komprimiert und alle unnötigen Leerzeichen und Zeilenumbrüche entfernt. Durch dieses Verfahren wird die CSS Datei deutlich kleiner. Im Normalfall nutzt man Kompressoren um die Datei zu verkleinern. Es gibt auch Dekompressoren, die die Zeile wieder gut lesbar machen. Hier zB.
    http://html-generator.weebly.com/css-code-decompressor.html

    Wieso bei dir etwas vom CSS verschwindet, hängt denke ich damit zusammen, dass du irgendwo einen Fehler gemacht hast beim auseinander nehmen. vermutlich eine geschweifte Klammer.

  17. Ich benutze Gambio GX2 2.2.1.3 und wenn ich^header.php anschaue finde ich:
    <link type=”text/css” rel=”stylesheet” href=”” />

    überhaupt nicht???
    Hier header.php inhalt:
    set_data(‚GET‘, $_GET);
    $coo_header_control->set_data(‚POST‘, $_POST);
    $coo_header_control->set_(‚c_path‘, $cPath);
    $coo_header_control->set_(‚coo_product‘, $product);

    if(isset($GLOBALS[‚payment_modules‘]))
    {
    $coo_header_control->set_(‚coo_payment‘, $GLOBALS[‚payment_modules‘]);
    }

    $coo_header_control->proceed();

    $t_redirect_url = $coo_header_control->get_redirect_url();
    if(empty($t_redirect_url) == false)
    {
    xtc_redirect($t_redirect_url);
    }
    else
    {
    echo $coo_header_control->get_response();
    }

    Freundliche Grüsse aus der Schweiz

  18. Hallo Pero,

    ab Gambio GX 2.2.0.0 wird die Stylesheet Datei in der Datei /templates/EyeCandy/module/head.html eingebunden.
    Die Stylesheet Datei ist dann dieser Pfad {$tpl_path}gm_dynamic.css.php?{$content_data.CSS_PARAMS} und kann beispielsweise so abgeändert werden: {$tpl_path}deine.css“

    Dabei würde dann die Datei templates/EyeCandy/deine.css eingebunden werden

  19. Danke Daniel

    Ich ahbe noch eine Frage, Gambio GX2 Ver. 2.2.1.3:
    Implementierung einer Routine zur automatischen Vergabe von Artikelnummern bei der Anlage von Produkten bei der Direkteingabe der Daten im Shop; hinterlegbare Mantisse: z. B. „p{NUMBER}“, der Shop tauscht dann die Variable NUMBER mit der nächsten verfügbaren laufenden Nummer aus, so dass z. B.
    die Artikelnummer „p39“ erzeugt wird; diese Nummer wird bei der Speicherung im Artikel eingetragen, sofern der Benutzer keine eigene Artikelnummer eingetragen hat oder diese bereites eingetragen ist.

    Ist so was möglich und was muss ich verändern oder wer kann mir das machen?
    LG
    Pero

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.