Arquitetura de temas para OpenCart

Postado por Manoel Vidal em 19/agosto/2010, arquivado em: Artigos

Muitos colegas tm batalhado com uma simples, porm, desafiadora questo relacionada ao OpenCart, que a personalizao do tema (template) da loja. Tentando ajudar, busquei informaes na documentao do site oficial e achei este pequeno guia de como fazer temas modificados a partir do tema padro do OpenCart, fiz a traduo e algumas adaptaes para que possamos ter nosso primeiro tema personalizado e entender como funciona a arquitetura bsica dos temas para o OpenCart.

1. Arquitetura:
O OpenCart usa a arquitetura MVC+L. Isso significa que os arquivos do tema (templates) so criados e organizados de forma separada do cdigo principal, porm, possuem interligao com o mesmo. * A view composta dos arquivos *. tpl, que so sempre encontrados no diretrio:catalog/view/theme/SEU_TEMA/*.* * Arquivos tpl so fundamentalmente estruturados por contedo html e utilizam PHP para mostrar os dados que voc deseja exibir. * No existe um motor de temas como Smarty para copilar os temas, ou seja, unir os temas com os cdigos PHP. Motores para temas a frase do momento, mas na verdade s complicam e limitam o uso para desenvolvimento. O PHP uma linguagem robusta e permite que voc faa tudo o que voc precisa com um cdigo muito menor do que utilizando um motor de tema. * As referncias para as tags php nos arquivos tpl so baseadas nos controladores de variveis disponveis, ou referncias de classe global. A sintaxe simples: No arquivo de controle para se criar uma varivel deve-se colocar algo como: $this->data['nomevariavel '] = xyz; No arquivo tpl para exibir o valor da varivel criada anteriormente, voc teria que colocar algo como: <?php echo $nomevariavel; ?> Como resultado voc veria impresso em seu arquivo de tema o texto xyz. Voc precisa entender que: O OpenCart suporta mltiplos temas, e h muitos temas grtis disponveis a partir de contribuies assim como h muitos temas disponveis comercialmente. Se no deseja comprar um tema e no encontrou uma contribuio que lhe agrade, voc pode optar por criar seu prprio tema apenas modificando o tema padro.

2. Boas prticas para criar um novo tema:

Existem algumas regras de ouro para seguir ao criar seu prprio tema, so elas:

1. NUNCA edite os arquivos do tema padro, pois toda vez que novas atualizaes forem lanadas para o OpenCart, o tema padro (default) ser sobrescrito com o cdigo mais recente, perdendo assim totalmente o seu trabalho de modificaes. 2. NUNCA delete o tema padro (default) ou copie a pasta inteira dele para renome-la e fazer seu novo tema. Isso far com que a atualizao de seu novo tema seja mais difcil. O OpenCart usa como regra o tema padro (default) para resgatar informaes do sistema e localizar tpl que no estejam em um novo tema, isto significa que se estiver faltando um arquivo na sua pasta de tema personalizado, ele ir procurar dentro da pasta do tema padro (default). A grande vantagem disso que voc s precisa editar alguns arquivos para fazer uma grande mudana no seu tema, e sempre que houver novas verses do OpenCart lanadas o seu tema ser quase que transparente durante uma atualizao.

3. Mos a obra:
Antes de comearmos importante informar que necessrio ter conhecimentos bsicos de HTML e CSSpara poder fazer grandes mudanas em seu tema. Se voc no tem esse conhecimento no fique triste, se voc chegou at aqui no ser esse o problema para voc, busque este conhecimento e acredite, no ser nenhum grande desafio. 1 Passo: Crie uma nova pasta para seu tema dentro de catalog/view/theme/. Para este exemplo, vamos criar a pasta com o nome de meutema 2 Passo: Copie os arquivos abaixo a partir da pasta do tema padro default para a pasta que voc acabou de criar meutema. Certifique-se de manter a mesma estrutura de pastas na nova pasta do tema (criada no 1 passo): catalog/view/theme/ |->default |->|-> image/*.* copie todos os arquivos |->|-> stylesheet/*.* copie todos os arquivos |->|-> template |->|->|-> common |->|->|->|-> header.tpl Obs.: O smbolo*.* significa que so todos os arquivos dentro da pasta anterior ao /, no caso, todos os arquivos dentro das pastas: stylesheet e image. Abaixo segue um exemplo de como dever ficar a estrutura de pastas que iro receber os arquivos para o novo tema: catalog/view/theme/ |->meutema |->|-> image/ |->|-> stylesheet/ |->|-> template |->|->|-> common 3 Passo: Edite o arquivo header.tpl que se encontra em catalog/view/theme/meutema/template/common/ Localize e substitua dentro do arquivo todas as referncias com a palavra default por meutema. Salve o arquivo e feche-o.

4 Passo: Assumindo que voc instalou o pacote de linguagem portugus do Brasil, acesse a administrao do seu OpenCart, v para o menu Configuraes, acesse a sua loja e localize a aba Loja e mude o tema dedefault para meutema. 5 Passo: Edite o arquivo stylesheet.css que se encontra em catalog/view/theme/meutema/stylesheet/ Vamos fazer uma pequena alterao na cor de fundo da pgina da loja para uma cor diferente do branco. Para fazer essa alterao localize dentro do arquivo stylesheet.css as seguintes linhas: body { margin: 0px; padding: 0px; text-align: center; } E acrescente a referncia background: #333333; vai ficar assim: body { margin: 0px; padding: 0px; text-align: center; background: #333333; } Salve o arquivo e feche-o. O que fizemos foi indicar que queremos o fundo de nossa loja na cor cinza escuro: background: #333333; igual a Fundo: Cinza escuro (cor em hexadecimal) Para colocar outra cor de fundo basta trocar o #333333 para a cor que voc deseje. Se voc no sabe o cdigo das cores em hexadecimal acesse o site abaixo que com certeza voc vai encontrar uma cor que lhe agrade: http://www.colorschemer.com/online.html 6 Passo: Agora recarregue a pgina de sua frente de loja, voc j dever ver a mudana na cor de fundo. 7 Passo: Lembre-se, s copie os arquivos da pasta default (alm dos recomendados), que sejam necessrios para fazer alteraes personalizadas na estrutura das pginas de seu nova tema, com isso, ao atualizar o OpenCart, seu tema deve continuar praticamente intocvel. Qualquer alterao na estrutura do OpenCart ser mostrada durante a utilizao do novo modelo com exceo das alteraes para os arquivos que voc personalizou. Por exemplo, se o arquivo header.tpl localizado emcatalog/view/theme/default/template/common/ sofreu mudanas na ltima atualizao do OpenCart, ento voc ter que fazer somente pequenos ajustes para o seu tema, de modo muito fcil, apenas fazendo comparaes entre o novo arquivo e o arquivo do seu tema, e isso muito mais fcil do que tentar recriar o seu tema inteiro. Voc tambm pode alterar as imagens da pasta image para personalizar mais seu tema. Por enquanto s, espero que tenham gostado, logo farei mais tutoriais sobre temas

Fonte:

http://www.opencart.com/index.php?route=documentation/documentation&path =43_44

Agradecimentos:
A Deus, a minha me, a pacincia e incentivo de minha amada esposinha e filhos.

Dvidas:
Caso ainda tenha dvidas, poste em nosso frum: http://www.opencartbrasil.com.br/forum/

Crditos:
Manoel OpenCart Brasil Vidal