Theming - começando do zero


30

Qual é o método preferido para iniciar uma compilação completa do site , do zero ? Minhas compilações geralmente começam a partir de páginas de estrutura de arame HTML5 totalmente simuladas e conectamos a funcionalidade a partir daí.

Mas, parte de mim sente que, na maioria das vezes, nos estágios finais de um projeto, acabamos encontrando todas as áreas de funcionalidade que precisam ser conectadas - normalmente coisas como Enterprise RMA, seção Customer My Account etc. isso pode ser evitado começando com um tema Magento desde o primeiro dia; a visão oposta diz que haverá uma quantidade igual de tempo escrevendo CSS e modificando a estrutura do padrão.

Você desenvolve o tema "em branco" do Core ? Existe uma versão Enterprise desse tema em branco? Qual é a melhor prática aqui?

Respostas:


32

Portanto, isso causará alvoroço máximo e vai contra todos os desenvolvedores do Magento - mas temos um processo sólido para o tema - que não usa o local.xml (mais sobre isso mais tarde).

Sempre trabalhamos fora do modelo base/default(e enterprise/defaultpara o EE) - mas zeramos o CSS. Embora todos os designs não se prestem particularmente ao layout estrutural de uma loja Magento de baunilha - consideramos uma boa prática usar o defaulttema como ponto de partida; podemos remover os métodos / loops / html etc. não utilizados, conforme necessário, durante o modelo.

Ao iniciar um tema

Para EE

Instalamos essa extensão primeiro, para obter um nível de fallback de tema - quando removemos posteriormente os arquivos de tema que copiamos.

O pacote

Começamos criando o pacote e copiando o base/defaulttema inteiro ; por exemplo (digamos que fosse nosso próprio site, chamaríamos o pacote sonassi)

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

O modelo

O objetivo final é que não precisamos copiar e colar cada arquivo que modificamos sempre que necessário, apenas editamos o arquivo no tema.

Mas cada vez que editamos o arquivo, removemos os cabeçalhos do Magento Commerce - e adicionamos um cabeçalho / identificador apropriado para marcar o arquivo como um modelo personalizado, geralmente algo como ...

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

Esse cabeçalho serve a um objetivo mais tarde, quando fazemos a limpeza final do modelo. Como faremos uma recursiva diffno base/default/templatediretório e no sonassi/default/templatediretório - exclua tudo o que não foi alterado.

Dessa forma, apenas os arquivos modificados permanecem e o pacote geral foi reduzido ao mínimo de arquivos alterados.

Os arquivos de layout

Utilizamos um módulo básico padrão sonassi.core. Sim, sempre prefixamos o namespace do módulo com um identificador exclusivo - ele interrompe conflitos em que outras empresas escolheram o mesmo nome (por exemplo, fishpig / wordpress e sonassi / wordpress)


A metodologia de layout não local

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

Em seguida, as duas classes mágicas que adicionam a funcionalidade para nuncalocal.xml mais precisar ,

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

}

As duas classes acima adicionam a funcionalidade ao Magento para que você possa estender - mas não substituir um arquivo XML de layout. A extensibilidade do XML do layout é importante para nós, pois ainda é possível manter a mesma separação de arquivos catalog.xml, cms.xmletc. - mas é necessário adicionar apenas pequenas partes do XML do layout para manipular blocos (inserir / clonar / remover).

A local.xmlmetodologia é que você apenas insira suas alterações principais em um arquivo incontrolável e complicado.

A nolocalmetodologia significa que, em vez de colocar todas as alterações em um único arquivo, você as coloca em um arquivo com o nome de arquivo apropriado que está modificando (por exemplo. catalog.xml) - simplesmente criando um novo arquivo sonassi/default/layout/custom/catalog.xml- com * apenas as modificações .

Novamente, quando terminarmos de criar o modelo, podemos apenas remover o conteúdo, sonassi/default/layoutcom exceção do customdiretório. Dessa forma, novamente, como no modelo, temos um modelo estendido leve - baseado nos modelos base.

As folhas de estilo

Nós os excluímos, todos eles. Não nos incomodamos em copiá-los para o diretório CSS do nosso pacote. Copiaremos o JS e é isso - o diretório imagese CSSestará vazio desde o início.

Como estamos usando o SASS atualmente, teremos outro diretório ( scss) para o CSS pré-processado - e enviaremos para os principais estilos / imprimiremos os arquivos CSS.

Limpando o modelo

Portanto, como mencionamos, uma vez concluído o tema do modelo, você pode limpá-lo - para remover os arquivos não modificados e reduzi-lo ao mínimo.

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

Então, por que não local.xml ?

Não é para você - é para terceiros, da mesma forma que communityé para você e localpara terceiros. É um failback, último recurso, destino final para substituições.

Estruturar o XML dessa maneira mantém-o alinhado com a maneira como o Magento configurou originalmente a estrutura de diretórios e arquivos. Além disso, para continuidade do desenvolvimento - apenas faz mais sentido, é muito mais fácil de digerir e não adiciona sobrecarga perceptível.

Magento é um produto estranho, a comunidade inventou suas próprias práticas recomendadas com base no senso comum e imitando o que a equipe principal do Magento faz. Portanto, nunca existe uma maneira oficial (não até que um unicórnio chegue com a documentação do Magento-1) ; mas este é o nosso caminho.

Então, eu diria até que essa não é a resposta, é apenas uma das muitas maneiras de enfrentar um desafio comum. Embora eu queira pensar que nosso método é o melhor.

Conteúdo proveniente de sonassi.com


1
Vocês não são nada se não forem incrivelmente criativos.
philwinkle

3
Muito bom artigo e conselhos sólidos.
ColinM

Eu gosto da sua abordagem para estender o xml do layout, em vez de apenas copiar os arquivos existentes ou usar o local.xml, isso é incrível! Em vez de copiar inicialmente todos os arquivos de modelo, eu amo o comando "Copy Template" do Magicento, que pode ser usado para copiar um modelo para outro tema facilmente, colocando-o na estrutura de pastas correta. Como alternativa, ao limpar o tema 3 no final, você pode conferir o comando "dev: theme: duplicates" do n98-magerun.phar, que produzirá uma lista de arquivos que não foram alterados.
Jim OHalloran

Gostaria de saber se existe um plugin que utiliza fallbacks default/defaultpara instalações do CE. Talvez não seja tão difícil de cortar com as fontes dadas, apenas curioso (mastigação sobre isso: Magento tema da queda-back / Hierarquia à luz do tema personalizado e extensões de terceiros )
hakre

"...the same way that community is for you and local is for 3rd parties..."A maneira Magento é para que este seja o contrário como indicado aqui: magentocommerce.com/wiki/2_-_magento_concepts_and_architecture/...
RichardBernards

7

Crie um tema de inicialização em branco para o Enterprise. Isso significa pegar oenterprise/default tema, limpar seu CSS e "clicar em tudo" para verificar se você manipulou o estilo dos recursos. Não se esqueça da exibição da grade de produtos vodu.

Um dos benefícios é que isso oferece a oportunidade de configurar um fluxo de trabalho MENOS (ou outro). Pense nisso - embora o tema em branco seja um bom começo para temas de cores claras, é um pouco de trabalho alterá-lo para se adaptar a um tema preto / escuro. Acima de tudo, você DEVE incorporar o enterprise/defaulttema, caso contrário, você terá uma instalação de EE quebrada desde o início.


Você está absolutamente certo
philwinkle
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.