cancel
Showing results for 
Search instead for 
Did you mean: 

Como trazer um template html 100% para o magento 2 ?

SOLVED

Como trazer um template html 100% para o magento 2 ?

Tenho tentado vários métodos para trazer um template html para o magento 2. Um deles foi simplesmente carregar folhas de estilo do template que estava trabalhando. Os estilos se misturaram com o template padrão, e a página ficava desfigurada. Foi inútil, mas isso já era esperado!
Em outra tentativa, tentei usar técnicas de reset css, com a esperança de "zerar" o estilo, e fazer meu custom.css servir como novo estilo. Foi inútil.
Uma terceira tentativa foi pesquisar na documentação, para tentar configurar uma página XML com full width, assim teoricamente poderia preencher ali com html do meu template, e ter características full width. As referências da da documentação não eram iguais aos da tela da plataforma, mesmo usando magento 2.3.5. Não funcionou!
Uma última tentativa foi tentar achar algum arquivo padrão (dentro do tema que criei), do tipo "style.css". Era um tema clonado do Luma. Não tentei alterar a pasta Vendor! No entanto, praticamente todas as folhas de estilos padrões eram .less, da qual eu não sei trabalhar, e muito menos saber qual seria a padrão do tema.

Gostaria de saber como é a melhor maneira de clonar 100% um template html para um tema do magento que eu criar!

1 ACCEPTED SOLUTION

Accepted Solutions

Re: Como trazer um template html 100% para o magento 2 ?

Para remover por completo CSSs do tema padrão, usa-se esse código:
Arquivo: app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml: 

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!-- Remove local resources -->
<remove src="css/styles-m.css" />
<remove src="css/styles-l.css" /> <remove src="my-js.js"/> <remove src="Magento_Catalog::js/compare.js" /> <!-- Remove external resources --> <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/> <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"/> <remove src="http://fonts.googleapis.com/css?family=Montserrat" /> </head> </page>

No entanto, como alertou o amigo acima. Resetar todo CSS padrão para impor o do seu projeto, tem um preço, pois terá que refazer os estilos de cada componente. 

View solution in original post

5 REPLIES 5

Re: Como trazer um template html 100% para o magento 2 ?

Eu penso que seria uma boa partir das estruturas que voce ja tem no magento, nos templates.

Voce pega os html e os css dos temas padrao, luma e blank e dos modulos do magento.

Nisso voce vai montando os seus html, como voce disse.

E depois é so "recortar" e vai colocando no seu template no magento.

Dai tudo vai se encaixando no devido lugar. 

Re: Como trazer um template html 100% para o magento 2 ?

Não amigo, não. 
Vou te dizer porque isso não funciona. Primeiro, que sim, o meu tema é baseado no Luma como você sugeriu. E mesmo quando o Magento não "acha" um arquivo padrão dentro do seu tema, ele vai buscar na pasta vendor e recarrega. Um outro problema é justamente conseguir fazer um tema com zero de css. Por causa do comportamento anterior que descrevi do Magento, não daria para para (desta forma) começar um tema com CSS do zero. Agora, se eu conseguisse anular os CSSs que vem com o tema padrão, ou da pasta vendor, aí seria mais fácil carregar meus próprios CSSs dentro do layout.

Re: Como trazer um template html 100% para o magento 2 ?

Voce quem define a herança, qual o tema pai.

Nao entendi pq "zero de css", pq vc nao aproveita  o que ja tem pronto ao inves de reinventar a roda?

Re: Como trazer um template html 100% para o magento 2 ?

Tem aparecido demana de layout 100% customizável. E trabalhar com elementos do tema neste caso específico, só atrapalha. Se eu pelo menos conseguisse remover ou cancelar os CSSs do tema padrão. Você me deu uma ideia em relação ao tema pai. Vou tentar não criar um tema pai. Se eu conseguir, vou postar aqui para ajudar outros que tiverem o mesmo problema. 

Re: Como trazer um template html 100% para o magento 2 ?

Para remover por completo CSSs do tema padrão, usa-se esse código:
Arquivo: app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml: 

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!-- Remove local resources -->
<remove src="css/styles-m.css" />
<remove src="css/styles-l.css" /> <remove src="my-js.js"/> <remove src="Magento_Catalog::js/compare.js" /> <!-- Remove external resources --> <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/> <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"/> <remove src="http://fonts.googleapis.com/css?family=Montserrat" /> </head> </page>

No entanto, como alertou o amigo acima. Resetar todo CSS padrão para impor o do seu projeto, tem um preço, pois terá que refazer os estilos de cada componente.