Neu Child Template mit Theme updatesicher erstellen

[AET]

Hallo zusammen,

ich glaube ich habe noch ein paar Verständnisprobleme bei der Template- bzw. Themes-Anpassung.

Ziel: Ich möchte mit dem Evo-Template mit Slate Thema eigene Anpassungen vornehmen. Als erstes z.B. einen Text auf der Startseite nach unten verschieben. Die Anleitungen dazu habe ich gefunden (denke ich), aber ich möchte das ganze Update fähig halten und habe dazu ein Child-Template erstellt.

Voraussetzungen:

Shop 4.06​

Evo Template mit Slate Theme​

Evo-Child Template mit dem Minimum-Template aus https://gitlab.com/falk.jtl/evo-child-vorlage/tree/master von Falk Prüfer angelegt (lässt sich auch aktivieren), jedoch noch nichts verändert.​

Probleme:

• Wenn ich jetzt das Child Template aktiviere ist es leer und ich muss einfach alle Einstellungen die ich vorher im Evo gemacht habe wieder im Child einstellen. Die Vererbungen des Evo auf das Child gelten nicht für die Grundeinstellungen, richtig?
• Das Thema Slate wird nicht angegeben, nur das my-evo. Soweit ich verstanden habe sollte ich jetzt im Child Template unter /Evo-Child/themes/base/less in den Dateien base.less und variables.less die Pfade anpassen. Dann sollte das Slate Thema laufen, richtig?
  • Also in der base.less - @import "../../../../Evo/themes/evo/less/theme"; - ändern zu @import "../../../../Evo/themes/slate/less/theme";.
  • Und in der variables.less - @import "../../../../Evo/themes/evo/less/variables"; - ändern zu @import "../../../../Evo/themes/slate/less/variables";.
• Wenn ich dies habe muss ich laut meinem Verständnis kompilieren. Und dann sollte es laufen und ich kann die gewünschten Änderungen vornehmen. Also die zu ändernden Dateien kopieren, ändern und in den gleichen Child Verzeichnissen ablegen.

Ist das so richtig oder befinde ich mich da auf dem Holzweg?

Vielen Dank für die Hilfe.

aet

 

[css-umsetzung]

Ich würde das base Verzeichnis direkt aus dem Child Template rauswerfen und einen symbolischen Link zum base vom evo setzen.
Warum: mit einem Update ist die Wahrscheinlichkeit hoch, dass sich etwas in der base.less ändert, so umgehst du jeglichen Stress das ständig neu rüber zu kopieren und zu bearbeiten.

Ich würde dann das less Verzeichnis aus dem slate/ in das my-theme/ oder wie auch immer du das dann nennen wirst kopieren und dann dieses Theme auch neu compilen, damit dort die Bootstrap.css erstellt wird.
Änderungen wirst du dann in der angelegten css/mytheme.css im Child vornehmen, wenn du dich nicht mit less beschäftigen möchtest.

Was du noch tun solltest: Die Fonts aus dem Evo solltest du auch in das Child kopieren, wenn du auch Upload Artikel hast dann solltest du auch die JS und css Dateien vom Evo ins Child kopieren, da es hier einen BUG im Shop gibt.

Wenn es dann später mal ein Update gibt, dann gehst du wie folgt vor:
Du überspielst das Evo Template, danach compilest du dein Theme neu, damit er Änderungen die an der base.less eventuell vorgenommen wurden übernimmt.

 

[AET]

Ich würde das base Verzeichnis direkt aus dem Child Template rauswerfen und einen symbolischen Link zum base vom evo setzen.
Warum: mit einem Update ist die Wahrscheinlichkeit hoch, dass sich etwas in der base.less ändert, so umgehst du jeglichen Stress das ständig neu rüber zu kopieren und zu bearbeiten.

Ich würde dann das less Verzeichnis aus dem slate/ in das my-theme/ oder wie auch immer du das dann nennen wirst kopieren und dann dieses Theme auch neu compilen, damit dort die Bootstrap.css erstellt wird.
Änderungen wirst du dann in der angelegten css/mytheme.css im Child vornehmen, wenn du dich nicht mit less beschäftigen möchtest.

Was du noch tun solltest: Die Fonts aus dem Evo solltest du auch in das Child kopieren, wenn du auch Upload Artikel hast dann solltest du auch die JS und css Dateien vom Evo ins Child kopieren, da es hier einen BUG im Shop gibt.

Wenn es dann später mal ein Update gibt, dann gehst du wie folgt vor:
Du überspielst das Evo Template, danach compilest du dein Theme neu, damit er Änderungen die an der base.less eventuell vorgenommen wurden übernimmt.

Hallo, und erstmal Danke für die Info's.

Wenn ich Deine Antwort richtig deute ist mein Vorgehen an sich richtig, aber wäre noch besser mit dem symbolischen Link.

Aber ist der symbolische Link nicht der den ich in der /Evo-Child/themes/base/less base.less mit @import "../../../../Evo/themes/slate/less/theme setze? Wenn nicht wie würde das aussehen?

Viele Grüße

aet

 

[css-umsetzung]

Nein, das ist ein Pfad den du angibst wo er die less Dateien vom base findet.

Hier mal ein Auszug aus meiner childTemplate/php/functions.php, das kannst du so bei dir im Child anlegen, nimm nicht die functions.php aus dem evo und kopiere die ins Child
cssLayout in der letzten Zeile ist hier der Name meines Child Templates, das muss natürlich angepasst werden.

<?php
include_once $smarty->get_template_vars('parent_template_path').'php/functions.php';

$cssTemplateConfig = \Shop::getSettings(array(CONF_TEMPLATE, CONF_CACHING));
$cssTemplateDir = $smarty->__get('template_dir')['frontend'];
$cssThemePath = $cssTemplateDir.'themes/'.$cssTemplateConfig['template']['theme']['theme_default'].'/';

if($cssTemplateConfig['caching']['caching_activated']=='N' || $cssTemplateConfig['template']['general']['EntwicklerModus']=='Y')    {
  \Shop::Cache()->flushAll();
  $smarty->clear_compiled_tpl();
}

if($cssTemplateConfig['template']['general']['themeSymLinks']=='Y' )    {
  if(isset($GLOBALS['template']->xmlData)) {
    if(($dir = opendir (PFAD_ROOT.'templates/Evo/themes/')) !== null) {
        $i=0;
      while (($file = readdir($dir)) !== false && $i++<100) {
        if($file != '..' && $file!='.' && is_dir(PFAD_ROOT.'templates/Evo/themes/'.$file) ) {
           @symlink ( PFAD_ROOT.'templates/Evo/themes/'.$file , PFAD_ROOT.'templates/'.$GLOBALS['template']->xmlData->cOrdner.'/themes/'.$file );
        }
      }
      closedir($dir);
    }
    $cssTemplateObj = new \stdClass();
    $cssTemplateObj->cWert ='N';
    \Shop::DB()->updateRow('ttemplateeinstellungen', array('cTemplate','cSektion','cName'), array('cssLayout','general','themeSymLinks'), $cssTemplateObj);
}

Und die template.xml erweiterst du dann mit diesem Eintrag:

        <Section Name="Allgemein" Key="general">
            <Setting Description="Symlinks der Themes prüfen / wiederherstellen, bitte lassen SIe diese Option bei Ihrer erstinstallation aktiviert" Key="themeSymLinks" Type="select" Value="Y">
                <Option Value="Y">Ja</Option>
                <Option Value="N">Nein</Option>
            </Setting>
        </Section>
        <Section Name="Allgemein" Key="general">
            <Setting Description="Entwicklermodus aktiv" Key="EntwicklerModus" Type="select" Value="N">
                <Option Value="Y">Ja</Option>
                <Option Value="N">Nein</Option>
            </Setting>
        </Section>

Das sorgt dafür das dein Child Template bei der Aktivierung die Symlinks automatisch erstellt.

Die Vorgehensweise wird eventuell nicht jedem gefallen, aber es ist der aus meiner Sicht beste Weg und sorgt eben dafür das du nicht ständig die Daten vom base/ anpassen musst.

 

[AET]

Danke Dir,

werde das mal über die Feiertage ausprobieren.

Frohes Fest,

aet

 

[FPrüfer]

Hallo aet,

Voraussetzungen:

Shop 4.06​

Evo Template mit Slate Theme​

Evo-Child Template mit dem Minimum-Template aus https://gitlab.com/falk.jtl/evo-child-vorlage/tree/master von Falk Prüfer angelegt (lässt sich auch aktivieren), jedoch noch nichts verändert.​

Hier bitte beachten, dass der master-Stand immer für den aktuellen Entwicklungsstand des Shop - aktuell also für Shop5 - angepasst ist und ggfs. für ältere Versionen nicht geeignet ist. (Dort fehlen z.B. die angesprochenen JS-Dateien, da das ab 5.0 nicht mehr notwendig ist.) Für Shop 4.06 bitte die Vorlage aus dem entsprechenden Branch verwenden: https://gitlab.com/falk.jtl/evo-child-vorlage/tree/release/4.06

• Wenn ich jetzt das Child Template aktiviere ist es leer und ich muss einfach alle Einstellungen die ich vorher im Evo gemacht habe wieder im Child einstellen. Die Vererbungen des Evo auf das Child gelten nicht für die Grundeinstellungen, richtig?

Das ist richtig!

• Das Thema Slate wird nicht angegeben, nur das my-evo. Soweit ich verstanden habe sollte ich jetzt im Child Template unter /Evo-Child/themes/base/less in den Dateien base.less und variables.less die Pfade anpassen. Dann sollte das Slate Thema laufen, richtig?
  • Also in der base.less - @import "../../../../Evo/themes/evo/less/theme"; - ändern zu @import "../../../../Evo/themes/slate/less/theme";.
  • Und in der variables.less - @import "../../../../Evo/themes/evo/less/variables"; - ändern zu @import "../../../../Evo/themes/slate/less/variables";.

Das ist grundsätzlich so richtig. Die Child-Vorlage ist so angelegt, dass man auf Grundlage eines bestimmten Evo-Themes mehrere eigene Theme-Variationen anlegen kann. Deshalb besitzt die Vorlage hier ein eigenes base-Verzeichnis und erbt nicht einfach alle Themes des Evo.
Anmerkung hierzu: Dieser Weg ist Updatesicher, da alle Angaben aus dem Parent importiert werden! Er erlaubt jedoch keine Anpassung über den Evo Theme-Editor, da dieser die Inhalte der Dateien direkt auswertet. Wenn also Anpassungen über den Theme-Editor gemacht werden sollen, müssen die Less-Dateien kopiert oder wie von css-umsetzung vorgeschlagen über Symlinks eingebunden werden. Wenn du deine Anpassungen dagegen direkt über eigene Less-Dateien vornimmst, ist das nicht notwendig.

• Wenn ich dies habe muss ich laut meinem Verständnis kompilieren. Und dann sollte es laufen und ich kann die gewünschten Änderungen vornehmen. Also die zu ändernden Dateien kopieren, ändern und in den gleichen Child Verzeichnissen ablegen.

Ist das so richtig oder befinde ich mich da auf dem Holzweg?

Das sieht soweit gut aus

 

[AET]

Hallo FPrüfer,

vielen Dank für die Antwort. Ich habe die 4.06 Version genommen und soweit funktioniert es mit den .less Dateien. Jetzt muss ich mich nur noch an die Einbindung mit den Symlinks von css-umsetzung machen...

 

[Jogi1962]

Hallo @css-umsetzung,

ich habe als child-Template das originale 4.06 child, Thema EVO. Habe alle Eintragungen gemacht, hochgeladen und es funktioniert.

Dann wollte ich deine Empfehlungen von oben umsetzen und bekomme beim compilieren die Fehlermeldung base/less/base.less existiert nicht und beim Seitenaufruf in Chrome "Die Seite funktioniert nicht."

Wo kann da der Fehler liegen?

 

[css-umsetzung]

Vermutlich weil du die Symlinks nicht hast erstellen lassen.
Das Template kümmert sich selbst darum das es compiled wird. Aber die Option Symlink erstellen sollte nach aktiviert sein.

 

[Jogi1962]

Hallo,
danke für die Antwort. Aber wo aktiviere ich das denn? Ich habe an deinen Vorlagen oben nichts geändert außer dem Namen "cssLayout".

 

[worqpro]

Guten Tag,

Wir möchten gerne die gelbe Farbe ändern. Nur wissen wir leider nicht, welche genaue Einstellungen beim JTL Theme Editor verändert werden müssen.
Auf PC ist alles rot, wie es sein sollte. Auf Handy wiederum Gelb.
Wir möchten das alles einheitlich ist.

Vielen Dank für eure Hilfe


Handy: PC: