Temas para Magento 2 - Começando do zero

27

Alguns de vocês provavelmente leem esse tópico sobre temas do zero para o Magento 1: Theming - começando do zero

Fiquei me perguntando, qual seria a melhor prática para desenvolver um tema a partir do zero para o Magento 2?

  • Você constrói usando o nativo lumaou o blanktema? Ou qualquer outra coisa?
  • Você usa alguma extensão para ajudá-lo a desenvolver seu tema?
  • Quais etapas você segue ao desenvolver um tema a partir do zero?
magento2 theme template magento-2.0 design Raphael na Digital Pianism
fonte
Estou fornecendo alguns links na minha resposta, por favor, leia-o, você saberá sobre a arquitetura frontend e o desenvolvimento do Magento 2.0.
Asheem Patro 5/05
Siga as etapas do Magento docs devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/… para criar o tema para o frontend.
Rishabh Rk Rai

Respostas:

45

TL: DR

Você cria usando o luma nativo ou o tema em branco? Ou qualquer outra coisa?

Depende de você, declarar um tema pai é opcional. Se você não declarar um pai, continuará usando os módulos (por exemplo, Magento_Catalog) que fornecem arquivos XML e de modelo, mas sem estilo.

Você usa alguma extensão para ajudá-lo a desenvolver seu tema?

Como prefiro trabalhar com SCSS e GULP, agora uso o Frontools e o tema em branco do SCSS . Isso elimina muito o estresse de lidar com o fluxo de trabalho padrão Grunt / LESS.

Quais etapas você segue ao desenvolver um tema a partir do zero?

  1. Declare o tema
  2. Remover CSS do tema pai (se necessário)
  3. Adicione seu próprio CSS / LESS / SCSS

Minha opinião pessoal é que é melhor criar seu próprio 'tema em branco' do zero, pois você pode adaptá-lo para que seja exatamente o que você precisa.

É assim que eu criaria um tema a partir do zero, usei NewStore / default como meu fornecedor e nome do tema.

Agora, a resposta mais detalhada ...

Crie o tema (conforme documentos oficiais)

Crie o tema conforme os documentos oficiais

Opcionalmente declarando um pai

Dentro de app/design/frontend/NewStore/default/theme.xmlvocê, você tem a opção de declarar ou não um tema principal, neste exemplo deixei de fora a linha 3 ( <parent>Vendor/theme</parent>), para que não haja um tema principal . Isso significa que todos os modelos / arquivos de layout serão provenientes dos próprios módulos e não do Blank ou Luma, e não haverá estilo de tema, pois isso será adicionado ao tema em branco.

Meu theme.xml fica assim:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>NewStore default</title>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

Remova o estilo (se você definir um tema pai) e adicione seu próprio CSS

Se você definir em branco ou Luma como pai, será necessário impedir o carregamento dos arquivos CSS. Para fazer isso, crie app/design/frontend/NewStore/default/Magento_Theme/layout/default_head_blocks.xmle adicione o seguinte XML:

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>

        <!-- Remove blank/luma theme styling if you declared a parent -->
        <remove src="css/styles-m.css" />
        <remove src="css/styles-l.css" />
        <remove src="css/print.css" />

        <!-- Add your own CSS files -->
        <css src="css/styles.css" />
    </head>
</page>

Isso remove styles-m.css, styles-l.csse print.cssadicionado pelo tema em branco. Ele também adiciona o styles.css como base para o seu próprio CSS.

Se você não especificou um pai, pode remover as três <remove />tags no código acima.

Adicione seu próprio CSS

Agora você pode estilizar seu tema da maneira que desejar, sou um fã de Sass e não de MENOS, então adicionei este arquivo - app/design/frontend/NewStore/default/web/css/styles.scss

Alterei a cor do plano de fundo aqui apenas para provar que isso funciona. Idealmente, você usaria esse arquivo apenas para importar outros arquivos Sass / Less.

Resultado

O resultado do que acabei de fazer é um tema sem estilo (além do meu lindo fundo verde), permitindo que você estilize seu tema sem trabalhar com o estilo do Magento (às vezes difícil de trabalhar).

insira a descrição da imagem aqui

Dicas

  • Se você prefere trabalhar com o SCSS e não tem tempo para criar um tema a partir do zero, recomendo usar o Frontools e o tema em branco do SCSS, ambos pela Snowdog Apps .

  • Acho que o aspecto mais frustrante de trabalhar com o código de front-end do Magento é a especificidade de seu estilo, para evitar isso, recomendo usar a convenção de nomenclatura BEM ao escrever seu próprio estilo.

  • Também são úteis comentários úteis, se um desenvolvedor acostumado a trabalhar com o Luma / Blank trabalhava em um tema construído do zero, provavelmente descobriria que as coisas funcionam de maneira bem diferente do que eles esperam.

Ben Crook
fonte
Eu criei meu próprio tema em branco usando suas instruções, sem um tema pai definido no theme.xml. No entanto, ainda existem todos os tipos de estilos visíveis no front end. A instalação do Magento está no developermodo e todos os caches foram limpos. Não sei de onde vêm todos esses estilos - você tem uma ideia?
Fritzmg
Você tem extensões / plugins instalados? Também pode ser verniz, se estiver instalado, para excluir isso, adicione um ponto de interrogação e uma sequência aleatória após o URL, como?=123
Ben Crook
Sim, eu descartei o verniz (ou similar). Não há extensões ou plugins instalados.
Fritzmg
É o estilo do tema completo ou apenas partes dele? É difícil para mim dizer sem ver o site e a base de código. Talvez faça uma nova pergunta e publique alguns detalhes lá? Se você me marcar, vou ver se consigo resolver.
Ben Crook
É o tema completo, tanto quanto eu posso ver. Além disso, o arquivo CSS incluído do meu próprio tema. Sim, provavelmente é melhor criar uma nova pergunta para isso :) #
fritzmg
8

Existem muitos tutoriais para iniciar um tema no Magento 2.0. Estou fornecendo alguns links de vídeo e outros normais, onde você pode obter um bom conhecimento sobre o desenvolvimento do tema no magento 2.0. clique aqui para o vídeo

consulte também esses links

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html

http://blog.magestore.com/how-to-create-custom-theme-on-magento-2-part-1/

Neste link, você aprenderá sobre a arquitetura front-end do magento 2.0

http://inchoo.net/magento-2/frontend-theme-architecture/

verifique também esses dois links

http://www.webmull.com/magento-2-create-new-custom-theme/

http://www.slideshare.net/Magestorecom/how-to-create-theme-in-magento-2-part-1

Asheem Patro
fonte
5

Eu herdeiro do espaço em branco, mas estou avançando rapidamente para tentar criar um tema base mais leve que tenha uma estrutura CSS muito menos complexa.

Vale a pena notar que, em 2015, o Magento saiu e disse que não recomenda herdar da luma, pois se reserva o direito de fazer alterações sem aviso prévio para fins de marketing e demonstração. Mais tarde, eles revisaram essa afirmação dizendo que seu objetivo é permitir a herança .

Lawrence
fonte
3

A melhor maneira de começar a desenvolver um tema é começar com a herança de um lumaou de outro blank. A razão para isso é porque eles são criados para serem responsivos (ou seja, compatíveis com várias resoluções). Também reduz a quantidade de trabalho que você deve realizar na criação dos diferentes arquivos de modelo e definições de JS / CSS. Tudo o que você precisa fazer é substituir apenas as peças que você deseja personalizar pelas suas. Veja os links abaixo para obter instruções diferentes sobre como desenvolver um tema.

Links de documentação do Magento:

James Calcaben
fonte
Os arquivos de modelo agora vêm dos módulos e não em branco / luma, para que você possa ignorá-los afetivamente se não precisar de estilo / alterações. Por exemplo, se você der uma olhada em app / design / frontend / Magento / blank / Magento_Catalog, tudo o que faz é mover um elemento e adicionar um pouco de estilo, os modelos são provenientes de app / code / Magento / Catalog / view / frontend / templates e app / code / Magento / Catalog / view / base / templates
Ben Crook