Como criar um tema Magento responsivo

TutorialResponsive de como criar um tema responsivo para lojas Magento com um framework, muito útil para versões anteriores a versão 1.9 do Magento, mas caso você esteja trabalhando na versão 1.9 ou superior, será mais interessante ver este outro artigo: Como criar um tema responsivo no Magento 1.9 – Inrodução. Neste artigo eu mostro o básico, porém essencial para tornar a experiência do visitante da loja mais agradável.

Tema responsivo é quando o site se adapta ao tamanho da tela do visitante, quando bem aplicado, faz com que o site pareça feito sob medida para a tela do cliente, esse feito gera maior confiança para o cliente melhorando a taxa de conversão, principalmente para usuários de tablet ou smartphone.

No meu novo tema Alpha sense utilizo o framework Unsemantic que torna meu tema responsivo e mostrarei como trabalhar de forma bem simples e rápida, mostro o básico da aplicação, mas é o essencial para criação de qualquer tema em Magento, então vamos lá.

Atenção: lembre-se sempre que não devemos modificar os arquivos no pacote base e no tema padrão do Magento, sempre copie os arquivos para seu tema personalizado e desative o cache para visualizar as alterações.

Baixe o framework logo

primeiramente vá até o site unsemantic.com e baixe o arquivo no link “download here”. Feito isso vamos abrir o arquivo .zip que baixamos e pegar o arquivo unsemantic-grid-base.css ele contém todas as classes que vamos usar dentro dos arquivos do tema.

inclua em seu tema

Neste tutorial eu acredito que você já saiba como iniciar um tema ou já tem um tema criado, caso não tenha leia primeiro este tutorial onde explico como criar um tema com poucos arquivos.

Modifique o arquivo header.phtml  do seu tema ou copie para a pasta correspondente, ele fica na pasta app/design/frontend/base/default//template/page/html/. Insira uma metadata que indica como o zoom da página deve funcionar:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>

Com isso nós alteramos como zoom padrão do browser.

Abra seu arquivo local.xml, dentro do nó layout  > default > reference name=”head” vamos inserir o seguinte código para chamar o arquivo .css:

<action method="addCss"><stylesheet>css/unsemantic-grid-base.css</stylesheet></action>

Assim nós teremos um código parecido com esse:

<layout>
	<default>
		<reference name="head">
			<action method="addCss"><stylesheet>css/unsemantic-grid-base.css</stylesheet></action>
		</reference>
	</default>
</layout>

Com isso  você já pode usar as classes responsivas do framework pra modificar qualquer conteúdo dentro de seu site, inclusive dentro do CMS do MAgento.
Explicar estas classes será tema para outro artigo, aqui vou dar exemplo de como apliquei esta estrutura em meu tema para lojas Magento Alpha Sense.

Como modificar meus arquivos do template?

Copie o arquivo 3columns.phtml da pasta app/design/frontend/base/default/template/page/ para pasta correspondente do seu tema, ex.: app/design/frontend/default/seu_tema/template/page/. dentro dele vamos mudar a sua estrutura. Este arquivo é responsável por mostrar o layout de 3 colunas na loja Magento.

Encontre este trecho de código:

<div class="wrapper">
	<?php echo $this->getChildHtml('global_notices') ?>
	<div class="page">
		<?php echo $this->getChildHtml('header') ?>
		<div class="main-container col3-layout">
			<div class="main">
				<?php echo $this->getChildHtml('breadcrumbs') ?>
				<div class="col-wrapper">
					<div class="col-main">
						<?php echo $this->getChildHtml('global_messages') ?>
						<?php echo $this->getChildHtml('content') ?>
					</div>
					<div class="col-left sidebar"><?php echo $this->getChildHtml('left') ?></div>
				</div>
				<div class="col-right sidebar"><?php echo $this->getChildHtml('right') ?></div>
			</div>
		</div>
		<?php echo $this->getChildHtml('footer') ?>
		<?php echo $this->getChildHtml('before_body_end') ?>
	</div>
</div>

E altere para este:

<div class="wrapper">
<?php echo $this->getChildHtml('global_notices') ?>
<div class="page">
<?php echo $this->getChildHtml('header') ?>
<div class="main grid-container">
<?php echo $this->getChildHtml('breadcrumbs') ?>
<div class="col-main grid-60 push-20 mobile-grid-100">
<?php echo $this->getChildHtml('global_messages') ?>
<?php echo $this->getChildHtml('content') ?>
</div>
<div class="col-left sidebar grid-20 pull-60 mobile-grid-100"><?php echo $this->getChildHtml('left') ?></div>
<div class="col-right sidebar grid-20 mobile-grid-100"><?php echo $this->getChildHtml('right') ?></div>
</div>
<?php echo $this->getChildHtml('footer') ?>
<?php echo $this->getChildHtml('before_body_end') ?>
</div>
</div>

O que foi feito?

Removemos <div class=”main-container col3-layout>

Modificamos <div class=”main> acrescentamos a classe .grid-container.
Como o nome da classe sugere, esse é o container da grade do framework

Removemos <div class=”col-wrapper>

Modificamos <div class=”col-main> para <div class=”col-main grid-60 push-20 mobile-grid-100>
Coluna central, terá 60% de largura em telas grandes e 100% nas telas pequenas, push-20 move a coluna para o centro.

Modificamos <div class=”col-left sidebar> para <div class=”col-left sidebar grid-20 pull-60 mobile-grid-100>
Coluna da esquerda.20% de largura em telas grandes e 100% em telas pequenas. pull-60 vai fazer com que fique do lado esquerdo.

Modificamos <div class=”col-right sidebar> para <div class=”col-right sidebar grid-20 mobile-grid-100>
Coluna da direita. Terá 20% de largura em telas grandes e 100% em telas pequenas.

Com estas alterações as páginas que possuem 3 colunas vão ficar responsivas, para alterar os outros layouts de página você terá que modificar os outros arquivos que ficam na mesma página: 1column.phtml2columns-left.phtml e 2columns-right.phtml que respectivamente controlam o layout de uma coluna, duas colunas com sidebar à esquerda e duas colunas com sidebar à direita.

Este é o básico necessário para fazer um tema responsivo, claro que serão modificados muitos arquivos, mas isso dependerá do seu layout. Para ver um exemplo deste framework em funcionamento veja a visualização do meu tema para lojas Magento Alpha Sense.

Para saber mais deste framework veja meu artigo sobre layout responsivo.

um abraço.

Gostou deste artigo?

Entre com seu email no campo abaixo e fique por dentro de todas minhas dicas e truques sobre Magento:

Importante:neste formulário você se inscreverá somente para as dicas sobre Magento, para receber todos os artigos use o formulário no topo da página.

Não divulgo ou vendo informações alheias.

Uma ferramenta Google FeedBurner

7 respostas

  1. Amigo, eu comprei um tema que não é responsivo e agora tenho a necessidade de modificá-lo para se adaptar as telas de tablets e smartphones. Como posso fazer para transformar esse tema em responsivo? Consigo utilizando esse método??

    1. Amigo, vai ser mais fácil comprar outro tema responsivo que seja parecido com o atual, mas se quiser se aventurar e tiver tempo sobrando… você pode utilizar alguma coisa desse artigo, eliminando as medidas de largura do tema atual e implementando as classes do unsemantic.
      Mas saiba que este não é um trabalho fácil e que vai demandar muito tempo pra teste e acerto.

  2. Oi Ronaldo, bom dia!
    Me tira uma dúvida? Se eu instalo uma loja com o magento 1.8.x.x, e atualizo para 1.9.2.x por exemplo… Posso ter algum problema no site? Vou ter que fazer alterações no meu tema, pra ele ficar responsivo? Como faço esse upgrade, na certeza de que vai ser tudo tranquilo? Tem jeito? Você me pergunta: e por que não instala já o magento 1.9.2? Eu te respondo: Eu só sei instalar com o quickinstall, hehehe e só tenho disponível o 1.8 pra baixar. E me pergunta: Por que não paga alguém? Eu respondo: Tô quebrada e minha única esperança é fazer essa loja funcionar, porque não tenho nem pra aluguel de loja física…
    Obrigada por todas as tuas dicas, estou aprendendo bastante lendo-as. O mundo precisa de mais pessoas generosas como você.
    Forte abraço.

    1. O quickinstall vai pegar a última versão do Magento, a versão 1.9.x trouxe muitas alterações no tema, provavelmente precisará atualizar o tema

Deixe um comentário para Róger Klein Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.