RWD o tema responsivo do Magento!

Neste artigo falarei pra vocês as principais mudanças e melhorias de layout no tema RWD, quais as vantagens de escolher o RWD como seu tema base para desenvolver o tema da sua loja, e começar já com o que tem de melhor!

Antes de começar, é importante alinharmos alguns pontos:

O que é RWD?

O termo RWD é uma sigla para Responsive Web Design, o nome do tema faz jus ao recurso adicionado no tema. Este recurso na verdade é uma série de técnicas e boas práticas de desenvolvimento frontend para que o mesmo se torne responsivo. Veja mais sobre RWD.

Responsivo ou mobile?

Para quem não sabe a diferença de um tema responsivo e um tema mobile, explicando de maneira bem simples, um site responsivo se adapta a diversos tamanhos de telas utilizando os mesmos arquivos de template/layout. Já a versão mobile na maioria das vezes fica em um domínio/submínio diferente (m.minhaloja.com.br) e tem arquivos de layout/template diferentes da versão “desktop“.

Sobre tema RWD do Magento, principais mudanças e recursos:

O Magento tanto nesta versão (1.9) como nas anteriores contém os recursos necessários para criar uma versão mobile da sua loja, principalmente utilizando detecção do user agent do navegador. Porém o diferencial do tema RWD é justamente que não há necessidade de criar arquivos diferentes para a mesma loja, assim facilitando a manutenção do código e das informações.

HTML5

Uma das melhorias mais simples porém de extrema importância, é que o tema RWD é HTML5. Isso facilita o desenvolvimento frontend, pois o HTML5 contém diversos componentes de tela nativos, ou seja, inputs com validação e formatação, semântica e integração com Microdata e WAI-ARIA, sem contar todas as outras APIs nativas da linguagem abrindo assim um leque de inovação tecnológica que pode ser explorada em prol da sua loja.

PRÉ-PROCESSADOR PARA CSS (COMPASS)

Todos nós sabemos que temas do Magento costumam ter arquivos de CSS gigantescos, e a cada módulo que você instala tem mais um arquivo CSS e assim por diante. Isso acaba resultando num head com mais de 20 ou 30 requisições de arquivos de CSS e JS. E por consequência numa manutenção difícil do código. No tema RWD a escrita e manutenção do código ficou melhor graças ao uso do pré-processador SASS+Compass unido ao conceito de componentização (onde cada elemento do layout é um componente).

Entenda mais sobre componentização: Um conto sobre componentização e quebra de paradigmas.

NOVO BLOCO LEFT_FIRST

Para quem já estavam acostumado com os temas antigos do Magento, no RWD irá encontrar mudanças drásticas principalmente nos xmls de layout do core como o catalog.xml e customer.xml. Isto foi feito justamente para organizar a ordem do conteúdo quando o mesmo está em 2 ou 3 colunas, em telas pequenas o conteúdo fica em 1 coluna só que o conteúdo precisa ficar em uma ordem lógica e para isso foi criado o bloco left_first.

FALLBACK COM O THEME.XML

Outro recurso é que agora se pode controlar melhor o fallback do seu tema, isso através de um novo arquivo o theme.xml. Com ele você define qual é o pacote padrão de arquivos e qual o pacote customizado.

Este arquivo é adicionado no diretório etc (no mesmo nível dos diretórios layout e template no app).

Lembrando que o fallback do rwd/default é o base/default.

Mais infos em: Parent/Child Themes.

JQUERY NATIVO

Outra novidade é que este tema já vem com suporte nativo ao jQuery (versão 1.10.2), o que facilita muita coisa para demandas de interface e claro com os famosos conflitos com o Prototype. Mas não só o jQuery que vem nativo, mas também outras libs que ajudam muito o desenvolvedor como: selectivizr, enquire.js modernizr entre outras.

Os JS ficam dentro da pasta skin/frontend/rwd/default/js e você pode conferir tudo que venho de novo por lá.

IMAGENS EM SPRITES!

Parece tão óbvio, mas os temas do Magento não tinham seu set de ícones em um sprite, o que fazia a pasta images sempre ser uma zona de bagunça! Agora os ícones do tema estão um sprite e também contém o “sprite@2x” para telas de retina.

Saiba como aplicar em: Easily create image sprites for retina displays.

Basicamente estes são os pontos que achei mais importantes e que vão agilizar muito no dia a dia do desenvolvedor.

Em breve farei um post só sobre como funciona o Compass e como ele modulariza os SCSS, para que facilite o seu entendimento e que isto seja mantido no seu tema responsivo de forma organizada.

Para dúvidas poste no canal no Stack Exchange sobre o RWD do Magento

Veja a demonstração do RWD.

Baixe agora o Magento CE 1.9 que vem nativamente com o tema RWD!

2017-01-24T20:24:07+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x