Mudanças no layout responsivo/rwd no magento

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.


Alguns prints


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!

[post update] Outro post com mais detalhes sobre as novidades do tema:
New Features in the Magento CE 1.9 Responsive Theme, por Rob Kent

Compartilhe nos comentários suas experiências com o RWD 😉

Referências:

Publicado por

Vanessa Me Tonini

Magento Front End Certified Developer, trabalha com Magento desde 2010. É desenvolvedora front-end desde 2007. Hoje com foco em metodologias ágeis, também atuando como consultora Agile Coach.

6 comentários sobre “RWD o tema responsivo do Magento!”

  1. Tinha algumas duvidas e sempre fui meio receoso quanto ao uso e a real eficiência do RWD. Depois de ler seu arquivo, vou dar mais uma chance pro RWD. Ainda mais agora que agora fiquei sabendo que tem jQuery nativo.

    Parabéns pelo post Vanessa!

    1. Oie Richard! Obrigada! 🙂
      Então, sim existem controvérsias, inclusive já vi algumas falhas de usabilidade neste tema que pode ser ajustados facilmente. Eu aconselho ter um designer de UX para melhorar a experiência de alguns pontos isolados caso o tema seja derivado do RWD.
      Bom, depois compartilhe aqui a sua experiência. 😀

  2. Olá, bom dia, gostaria de uma ajuda sua se possivel, não consigo colocar meus produtos em mais de 3 colunas, estou usando o tema rwd, olhei na sua loja de exemplo que tem uma linha com 5 produtos, gostaria muito que pudesse me ajudar. Grato.

    1. Tens que olhar nas configurações do bloco de produto do layout XML e verificar a quantidade de produtos por coluna.

Deixe uma resposta

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