Diogo Costa

OpenCart para Webdesigners – O Básico.

A mudança da versão 0 para a versão 1 do sistema OpenCart foi mais profunda do que mostra a primeira vista. Não somente as funcionalidades, o painel administrativo e a interface da loja padrão, todo o sistema sofreu uma reformulação de Base muito grande. Saber dessas mudanças e como funciona o Core do OpenCart é necessário para entender porque os plugins desenvolvidos para a versão Zero, simplesmente não funciona na nova e versão, e o que fazer para alterar e criar novos plugins.

Um Design mais Inteligente.

Seguindo uma tendência de vários projetos e frameworks, o OpenCart 1 foi desenvolvido sobre um novo padrão de arquitetura de projetos chamado MVC.

Se você usa algum framework de desenvolvimento em PHP (ou outras linguagens) como o CakePHP, você vai se sentir em casa. OpenCart 1 é totalmente Orientado a Objetos e feito inteiramente em MVC.

Se você não entende de programacão, saber algumas coisas de MVC pode ser importantes. E é para você que eu vou tentar explicar. Um papo de designer (com um pouco de conhecimento em programação) para designer.

MVC é uma sigla que significa Model-View-Controller. Ele é uma arquitetura que tenta deixar tudo em seu devido lugar, o que facilita a programação, a escalabilidade e a robustez de uma plataforma.

O Model é a parte do código que vai cuidar da comunicação da plataforma com o banco de dados. Isso pode parecer pouca coisa, mas é de vital importância para todo o sistema. Ele vai criar modelos que serão utilizados pelo Controlador, evitando que o sistema tenha que fazer requisições desnecessárias ao banco de dados e economizando muitas (mas muitas mesmo) linhas de código.

O Controller é a parte da plataforma que vai ser responsável por toda a operação lógica do sistema. Dentro dele é que toda a coisa acontece mesmo, onde as variáveis e funções vão ser desenvolvidas. Se você é designer, não se preocupe com esta área, ela não foi feita para você.

A View concentra todos os templates e layouts que dão forma a tudo o que o modelo e controlador fizeram. É nessa parte que você designer deve se concentrar. Aqui é onde fica tudo referente a visão da loja: layouts htmls, folhas de estilo css, javascript, imagens.

Editando Templates

Agora vamos ao que importa para você webdesigner: Os templates. Para criar um template no OpenCart é muito simples: Você deve se concentrar na pasta View do área do Catalog. Nessa view você tem duas pastas: Javascript e Theme. A pasta Javascript é claro, serve para colocar scripts Js. Por padrão você vai ter alí a última versão do script do Jquery (baseado na versão do OpenCart que você estiver usando).

A pasta Theme, irá ficar os templates de sua loja. Para criar um novo template é simples: Copie e cole a pasta default, e altere o nome da pasta para o nome do template que você irá criar. Agora, você deve ir até o painel de controle, em Admin->Configurações->Setting e no campo template, altere a template. Salve e voi lá. Sua template estará funcionando.

Feito isso, comece a trabalhar. Uma pasta de template tem 3 pasta: Image, Stylesheet e Templates. Todas as imagens que você usar em seu template (e não as imagens dos produtos, veja bem) você coloca na pasta image. Folhas de Estilo CSS estarão em Stylesheet e os templates estarãos os arquivos de layout que você deverá alterar.

Esta pasta templates está dividida em várias subpastas e não vai ser díficil descobrir para o que cada uma serve. Dentro delas há arquivos .tpl, não se assuste, em sua essência são arquivos html.

O arquivo central, o tronco chave do seu sistema será o arquivo layout.tpl. Alí você terá a estrutura HTML em sí. Este arquivo irá chamar outros arquivos por linhas como essa:

Em todos os arquivos que você encontrar, você verá linhas como essa. A linha acima está chamando o arquivo header.tpl e se você quiser alterar o topo de seu sistema você deve alterar este arquivo.

É por esta razão que o OpenCart é tão fácil e rápido de ser utilizado. Ele tem uma forma robusta de mostrar as informações e acelera muito a criação de templates.

Com o que você já sabe acima, vai ficar mais fácil de criar templates. Para terminar, só umas dicas:

1. Sempre que você precisar utilizar o caminho absoluto do site, utilize a URL: “catalog/view/themes/seutema”. Ainda não tem um código que complete a URL, e diferente do OpenCart Zero, você deve informar essa URL para incluir imagens, por exemplo.

2.

Isso é um código de repetição e tudo o que estiver dentro dele será repetido conforme a quantidade de dados que o código possuir. Cuidado com os codígos que possuir o comando IF. Ele é um comando condicional. Significa que algo pode ou não ser incluido. Cuidado com fechamento de divs, quando você vir este comando.

3. Você pode retirar a maioria destas váriaveis quando quiser. Por exemplo, se você não quiser dar opção de linguagem em sua loja, retire o comando:

do arquivo header.tpl. Isso vai fazer com que a opção de linguagem não apareça. Para inserir algum comando específico, você deverá alterar as configurações no Controlador. E isso é matéria para outro post.

Bom, espero que tenha ajudado alguma pessoa que estiver perdida no OpenCart. Você pode tirar suas dúvidas neste comentário ou melhor ainda, entrar em nossa lista de discussão do OpenCart Brasil.