Theming - von vorne anfangen

Was ist die bevorzugte Methode, um eine vollständige Site-Erstellung von Grund auf neu zu beginnen ? Meine Builds beginnen in der Regel mit vollständig nachgebildeten HTML5-Gitternetzseiten, und wir fügen von dort aus Funktionen hinzu.

Ein Teil von mir hat jedoch das Gefühl, dass wir die meiste Zeit in den späten Phasen eines Projekts alle Bereiche der Funktionalität finden, die angeschlossen werden müssen - normalerweise Dinge wie Enterprise RMA, Customer My Account, usw., denke ich Dies könnte vermieden werden, indem Sie ab dem ersten Tag mit einem Magento-Thema beginnen. Die gegenteilige Ansicht besagt, dass das Schreiben von CSS und das Ändern der Struktur von der Standardeinstellung gleich viel Zeit in Anspruch nehmen wird .

Bauen Sie auf das Kernthema "Blank" ? Gibt es eine Enterprise-Version dieses leeren Themas? Was ist die beste Vorgehensweise hier?

Dies wird also ultimativen Aufruhr hervorrufen und gegen den Strich eines jeden Magento-Entwicklers verstoßen - aber wir haben einen soliden Prozess für das Theming - der local.xml nicht verwendet (dazu später mehr).

Wir arbeiten immer an der base/default(und enterprise/defaultfür EE) Vorlage - aber setzen das CSS auf Null. Auch wenn sich alle Designs nicht besonders für das strukturelle Layout eines Vanille-Magento-Geschäfts eignen - wir halten es für eine gute Praxis, das defaultThema als Ausgangspunkt zu verwenden. Wir können nicht verwendete Methoden / Loops / HTML usw. nach Bedarf während des Templatings entfernen.

Beim Starten eines Themas

Für EE

Wir installieren diese Erweiterung zuerst, damit wir eine Ebene des Theme-Fallbacks erhalten - wenn wir später die von uns kopierten Theme-Dateien entfernen.

Das Paket

Zunächst erstellen wir das Paket und kopieren das gesamte base/defaultThema. also zum Beispiel (sagen wir es war unsere eigene Website, wir würden das Paket nennen sonassi)

cd ./app/design/frontend
mkdir sonassi
cp -par base/default sonassi/default
mkdir sonassi/default/layout/custom

Die Vorlage

Das ultimative Ziel ist, dass wir nicht jede Datei, die wir ändern, kopieren und einfügen müssen, wann immer wir müssen. Wir bearbeiten einfach die Datei im Design.

Aber jedes Mal, wenn wir die Datei bearbeiten, entfernen wir die Magento Commerce-Header - und fügen einen geeigneten Header / Bezeichner hinzu, um die Datei als benutzerdefinierte Vorlage zu kennzeichnen, normalerweise so etwas wie ...

/*
* @category    Template
* @package     sonassi_default
* @copyright   Copyright (c) 2013 Sonassi
*/

Dieser Header hat später einen Zweck, wenn wir die endgültige Vorlagenbereinigung durchführen. Da wir diffdas base/default/templateVerzeichnis und das sonassi/default/templateVerzeichnis rekursiv bearbeiten werden, löschen Sie alles, was nicht geändert wurde.

Auf diese Weise bleiben nur die geänderten Dateien übrig und das Gesamtpaket wurde auf das Minimum der geänderten Dateien reduziert.

Die Layoutdateien

Wir verwenden ein eigenes Standard-Kernmodul sonassi.core. Ja, wir stellen dem Modulnamensraum immer eine eindeutige Kennung voran - dies verhindert Konflikte, bei denen andere Unternehmen denselben Namen gewählt haben (z. B. fishpig / wordpress und sonassi / wordpress).

Die nolokale Layoutmethode

<core>
  <rewrite>
    <layout>Sonassi_Core_Model_Core_Layout</layout>
    <layout_update>Sonassi_Core_Model_Core_Layout_Update</layout_update>
  </rewrite>
</core> 

Dann die zwei magischen Klassen, die die Funktionalität hinzufügen, die man nielocal.xml wieder braucht ,

class Sonassi_Core_Model_Core_Layout 
    extends Mage_Core_Model_Layout
{
    /**
     * Loyout xml generation
     *
     * @return Mage_Core_Model_Layout
     */
    public function generateXml()
    {
        $xml = $this->getUpdate()->asSimplexml();
        $removeInstructions = $xml->xpath("//remove");
        if (is_array($removeInstructions)) {
            foreach ($removeInstructions as $infoNode) {
                $attributes = $infoNode->attributes();
                $blockName = (string)$attributes->name;
                if ($blockName) {
                    $unremoveNodes = $xml->xpath("//unremove[@name='".$blockName."']");
                    if (is_array($unremoveNodes) && count($unremoveNodes) > 0) {
                        continue;
                    }
                    $ignoreNodes = $xml->xpath("//block[@name='".$blockName."']");
                    if (!is_array($ignoreNodes)) {
                        continue;
                    }
                    $ignoreReferences = $xml->xpath("//reference[@name='".$blockName."']");
                    if (is_array($ignoreReferences)) {
                        $ignoreNodes = array_merge($ignoreNodes, $ignoreReferences);
                    }

                    foreach ($ignoreNodes as $block) {
                        if ($block->getAttribute('ignore') !== null) {
                            continue;
                        }
                        $acl = (string)$attributes->acl;
                        if ($acl && Mage::getSingleton('admin/session')->isAllowed($acl)) {
                            continue;
                        }
                        if (!isset($block->attributes()->ignore)) {
                            $block->addAttribute('ignore', true);
                        }
                    }
                }
            }
        }
        $this->setXml($xml);
        return $this;
    }
}

und

class Sonassi_Core_Model_Core_Layout_Update 
    extends Mage_Core_Model_Layout_Update
{

    public function getFileLayoutUpdatesXml($area, $package, $theme, $storeId = null)
    {
        if (null === $storeId) {
            $storeId = Mage::app()->getStore()->getId();
        }
        /* @var $design Mage_Core_Model_Design_Package */
        $design = Mage::getSingleton('core/design_package');
        $layoutXml = null;
        $elementClass = $this->getElementClass();
        $updatesRoot = Mage::app()->getConfig()->getNode($area.'/layout/updates');
        Mage::dispatchEvent('core_layout_update_updates_get_after', array('updates' => $updatesRoot));
        $updateFiles = array();
        foreach ($updatesRoot->children() as $updateNode) {
            if ($updateNode->file) {
                $module = $updateNode->getAttribute('module');
                if ($module && Mage::getStoreConfigFlag('advanced/modules_disable_output/' . $module, $storeId)) {
                    continue;
                }
                $updateFiles[] = (string)$updateNode->file;

                // custom theme XML contents
                $updateFiles[] = 'custom/'.(string)$updateNode->file;    

                // custom theme XML override
                $updateFiles[] = 'local/'.(string)$updateNode->file;            
            }
        }

        // custom local layout updates file - load always last
        $updateFiles[] = 'local.xml';
        $layoutStr = '';
        foreach ($updateFiles as $file) {
            $filename = $design->getLayoutFilename($file, array(
                '_area'    => $area,
                '_package' => $package,
                '_theme'   => $theme
            ));
            if (!is_readable($filename)) {
                continue;
            }
            $fileStr = file_get_contents($filename);
            $fileStr = str_replace($this->_subst['from'], $this->_subst['to'], $fileStr);
            $fileXml = simplexml_load_string($fileStr, $elementClass);
            if (!$fileXml instanceof SimpleXMLElement) {
                continue;
            }
            $layoutStr .= $fileXml->innerXml();
        }
        $layoutXml = simplexml_load_string('<layouts>'.$layoutStr.'</layouts>', $elementClass);
        return $layoutXml;
    }

}

Die beiden oben genannten Klassen fügen die Funktionalität in Magento hinzu, sodass Sie eine Layout-XML-Datei erweitern, aber nicht überschreiben können. Die Erweiterbarkeit des XML-Layouts ist für uns wichtig, da wir weiterhin die gleiche Dateitrennung usw. beibehalten können catalog.xml, cms.xmlaber nur kurze Teile des XML-Layouts hinzufügen müssen, um Blöcke zu bearbeiten (Einfügen / Klonen / Entfernen).

Die local.xmlMethode besteht darin, dass Sie einfach Ihre überschreibenden Änderungen in eine umständliche, nicht verwaltbare Datei eingeben.

Die nolocalMethode bedeutet, dass Sie nicht alle Änderungen in einer einzelnen Datei ablegen, sondern sie in einer Datei mit dem entsprechenden Dateinamen ablegen, den Sie ändern (z. B. catalog.xml), indem Sie einfach eine neue Datei sonassi/default/layout/custom/catalog.xmlmit * nur den Änderungen erstellen .

Sobald wir die Vorlage fertiggestellt haben, können wir wieder nur den Inhalt von sonassi/default/layoutmit Ausnahme des customVerzeichnisses entfernen . Auf diese Weise haben wir, wie bei der Vorlage, eine leichtgewichtige erweiterte Vorlage, die auf den Basisvorlagen basiert.

Die Stylesheets

Wir löschen sie alle. Wir machen uns nicht die Mühe, sie in das CSS-Verzeichnis unseres Pakets zu kopieren. Wir werden in der JS kopieren und das ist es - das imagesund CSSVerzeichnis wird von Anfang an leer sein.

Da wir heutzutage SASS verwenden, haben wir ein anderes Verzeichnis ( scss) für das vorverarbeitete CSS - und geben es in die Hauptstile / Druck-CSS-Datei (en) aus.

Schablone bereinigen

Wie bereits erwähnt, können Sie das Vorlagen-Design nach Fertigstellung jetzt bereinigen, um die nicht geänderten Dateien zu entfernen und auf das Nötigste zu reduzieren.

cd ./app/design/frontend

PREFIX="cleantheme_"
THEME="sonassi/default"
diff -BPqr "base/default/template" "$THEME/template" | \
awk '{print $4}' | \
  while read FILE; do 
    DIR=$(dirname "$FILE")
    [ -d "$PREFIX$DIR" ] || mkdir -p "$PREFIX$DIR"
    [ -f "$PREFIX$FILE" ] || cp -pa "$FILE" "$PREFIX$FILE"
  done
cp -par "$THEME/layout" "$PREFIX$THEME/"

Warum also nicht local.xml?

Es ist nicht für Sie - es ist für Dritte, genauso wie communityfür Sie und localfür Dritte. Es ist ein Failback, letzter Ausweg, endgültiges Ziel für Außerkraftsetzungen.

Die Strukturierung der XML-Datei auf diese Weise entspricht der ursprünglichen Konfiguration der Verzeichnis- und Dateistruktur durch Magento. Darüber hinaus ist dies für die Kontinuität der Entwicklung nur sinnvoller, ist viel einfacher zu verdauen und verursacht keinen spürbaren Mehraufwand.

Magento ist ein seltsames Produkt. Die Community hat ihre eigenen Best Practices entwickelt, die auf gesundem Menschenverstand basieren und die Arbeit des Magento-Kernteams nachahmen. Es gibt also nie einen offiziellen Weg (erst wenn ein Einhorn mit der Magento-1-Dokumentation reitet) ; aber das ist unser Weg.

Ich möchte sogar sagen, dass dies nicht die Antwort ist, sondern nur eine von vielen Möglichkeiten, um eine häufig auftretende Herausforderung anzugehen. Obwohl ich gerne denke, dass unsere Methode die beste ist.

^{Inhalte stammen von sonassi.com}

Erstellen Sie ein leeres Bootstrap-Design für Enterprise. Das bedeutet, dass Sie das enterprise/defaultThema übernehmen, sein CSS bereinigen und auf "alle Elemente klicken", um zu überprüfen, ob Sie das Styling der Features durchgeführt haben. Vergessen Sie nicht die Produktgitteransicht Voodoo.

Einer der Vorteile besteht darin, dass Sie damit die Möglichkeit haben, einen WENIGER (oder einen anderen) Workflow einzurichten. Denken Sie darüber nach - während das leere Thema ein guter Anfang für helle Themen ist, ist es ein bisschen Arbeit, es zu ändern, um es an ein dunkles / schwarzes Thema anzupassen. Vor allem Sie MÜSSEN das enterprise/defaultTheme einbinden , sonst haben Sie von Anfang an eine defekte EE-Installation.