Temi - a partire da zero


30

Qual è il metodo preferito per iniziare una build completa del sito , da zero ? Le mie build in genere iniziano da pagine wireframe HTML5 completamente simulate e da lì colleghiamo la funzionalità.

Ma una parte di me ritiene che la maggior parte delle volte nelle ultime fasi di un progetto finiamo per trovare tutte le aree di funzionalità che devono essere collegate, in genere cose come Enterprise RMA, sezione Account personale, ecc. Penso questo potrebbe essere evitato iniziando con un tema Magento dal primo giorno; l'opinione opposta afferma che ci sarà uguale tempo per scrivere CSS e modificare la struttura dal default.

Sviluppa il tema "vuoto" di base ? Esiste una versione Enterprise di questo tema vuoto? Qual è la migliore pratica qui?

Risposte:


32

Quindi questo causerà il clamore finale e andrà contro il grano di ogni sviluppatore di Magento - ma abbiamo un solido processo per i temi - che non usa local.xml (ne parleremo più avanti).

Lavoriamo sempre sul modello base/default(e enterprise/defaultper EE), ma azzeriamo il CSS. Anche se tutti i design non si prestano in particolare al layout strutturale di un negozio Magento alla vaniglia, troviamo buona pratica utilizzare il defaulttema come punto di partenza; possiamo rimuovere metodi / loop / html non utilizzati, se necessario durante il modello.

Quando si avvia un tema

Per EE

Installiamo prima questa estensione , in modo da ottenere un livello di fallback dei temi, quando in seguito rimuoviamo i file dei temi che abbiamo copiato.

Il pacchetto

Iniziamo innanzitutto creando il pacchetto e copiando l'intero base/defaulttema; quindi per esempio (diciamo che era il nostro sito Web, chiameremmo il pacchetto sonassi)

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

Il template

L'obiettivo finale è che non dobbiamo continuare a copiare e incollare ogni file che modifichiamo ogni volta che ne abbiamo bisogno, semplicemente modifichiamo il file nel tema.

Ma ogni volta che modifichiamo il file, eliminiamo le intestazioni di Magento Commerce e aggiungiamo un'intestazione / identificatore appropriata per contrassegnare il file come un modello personalizzato, di solito qualcosa come ...

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

Questa intestazione ha uno scopo in seguito quando eseguiamo la pulizia finale del modello. Poiché faremo un ricorsivo diffsulla base/default/templatedirectory e sulla sonassi/default/templatedirectory, quindi elimineremo tutto ciò che non è stato modificato.

In questo modo, rimangono solo i file modificati e il pacchetto complessivo è stato ridotto ai file minimi modificati.

I file di layout

Usiamo un nostro modulo standard standard sonassi.core. Sì, abbiamo sempre il prefisso dello spazio dei nomi del modulo con un identificatore univoco - blocca i conflitti in cui altre aziende hanno scelto lo stesso nome (ad esempio fishpig / wordpress e sonassi / wordpress)


La metodologia del layout locale

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

Quindi le due classi magiche che aggiungono la funzionalità per non averne local.xmlpiù bisogno ,

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;
    }
}

e

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;
    }

}

Le due classi precedenti aggiungono la funzionalità in Magento in modo che tu possa estenderla, ma non sovrascrivere un file XML di layout. L'estensibilità del layout XML è importante per noi, in quanto ci consente di mantenere sempre la stessa separazione dei file catalog.xml, cms.xmlecc., Ma è sufficiente aggiungere brevi porzioni di layout XML per manipolare i blocchi (inserire / clonare / rimuovere).

La local.xmlmetodologia prevede di inserire le modifiche prevalenti in un file ingombrante ingombrante.

La nolocalmetodologia significa che invece di mettere tutte le modifiche in un singolo file, le metti in un file con il nome file appropriato che sta modificando (es. catalog.xml) - semplicemente creando un nuovo file sonassi/default/layout/custom/catalog.xml- con * solo le modifiche .

Ancora una volta, una volta terminato di creare il modello, possiamo semplicemente rimuovere il contenuto di sonassi/default/layoutcon l'eccezione della customdirectory. In questo modo, come nel modello, disponiamo di un modello esteso leggero, basato sui modelli di base.

I fogli di stile

Li cancelliamo tutti. Non ci preoccupiamo di copiarli nella directory CSS del nostro pacchetto. Copieremo nel JS e basta: la directory imagese CSSsarà vuota dall'inizio.

Dato che stiamo usando SASS al giorno d'oggi, avremo un'altra directory ( scss) per i CSS pre-elaborati - e l'output nei principali stili / file CSS di stampa.

Pulizia del modello

Quindi, come abbiamo detto, una volta completato il tema del modello, ora puoi ripulirlo - per rimuovere i file non modificati e ridurlo al minimo indispensabile.

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/"

Allora perché no local.xml?

Non è per te - è per terze parti, allo stesso modo che communityè per te ed localè per terze parti. È un failback, ultima risorsa, destinazione finale per le sostituzioni.

Strutturare l'XML in questo modo lo mantiene in linea con il modo in cui Magento ha originariamente configurato la directory e la struttura dei file. Inoltre, per la continuità dello sviluppo - ha più senso, è molto più facile da digerire e non aggiunge un notevole sovraccarico.

Magento è un prodotto strano, la community ha inventato le proprie best practice basate sul buon senso e imitando ciò che fanno il core team di Magento. Quindi non c'è mai un modo ufficiale (non fino a quando un unicorno si imbatte nella documentazione di Magento-1) ; ma questo è il nostro modo.

Quindi vorrei anche dire che questa non è la risposta, è solo uno dei tanti modi per affrontare una sfida comune. Anche se mi piacerebbe pensare che il nostro metodo sia il migliore.

Contenuto proveniente da sonassi.com felicemente


1
Ragazzi non siete nulla se non incredibilmente creativi.
Filwinkle,

3
Scrittura molto bella e consigli solidi a tutto tondo.
ColinM,

Mi piace il tuo approccio all'estensione del layout xml piuttosto che alla semplice copia su file esistenti o usando local.xml, è fantastico! Invece di copiare inizialmente tutti i file modello, adoro il comando "Copia modello" di Magicento, che può essere usato per copiare facilmente un modello su un altro tema, posizionandolo nella giusta struttura di cartelle. In alternativa, quando si pulisce il tema 3 alla fine, si consiglia di controllare il comando "dev: theme: duplicates" di n98-magerun.phar, che produrrà un elenco di file che non sono stati modificati.
Jim OHalloran,

Mi chiedo se esiste un plug-in che esegue il fallback default/defaultper le installazioni CE. Forse non è così difficile hackerare con le fonti date, solo curioso (masticare su questo: Magento Theme Fall-back / Hierarchy alla luce del tema personalizzato e delle estensioni di terze parti )
Hacre

"...the same way that community is for you and local is for 3rd parties..."Il modo Magento è che questo sia il contrario, come indicato qui: magentocommerce.com/wiki/2_-_magento_concepts_and_architecture/…
RichardBernards,

7

Crea un tema bootstrap vuoto per Enterprise. Ciò significa prendere il enterprise/defaulttema, ripulire il suo CSS e "fare clic su tutto" per verificare di aver gestito lo stile delle funzionalità. Non dimenticare il voodoo della griglia di prodotti.

Uno dei vantaggi è che ciò offre l'opportunità di impostare un flusso di lavoro MENO (o altro). Pensaci - mentre il tema vuoto è un buon inizio per temi chiari, è un po 'di lavoro per cambiarlo per adattarsi a un tema scuro / nero. Soprattutto, DEVI incorporare il enterprise/defaulttema, altrimenti hai un'installazione EE interrotta dall'inizio.


Hai assolutamente ragione
Philwinkle,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.