Como criar um tema Magento responsivo

Tutorial 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

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.phtml, 2columns-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.