OpenCart - Arquitetura de Temas
Tema PersonalizadoArquitetura básica dos temas para OpenCartO OpenCart usa a arquitetura MVC. Isso significa que o “V” ou “View” é mantido separado do código principal.* A “view” é composto dos arquivos * .tpl e são sempre encontradas no diretório:catalog/view/theme/SEU_TEMA/*.** Arquivos tpl são fundamentalmente estruturados por conteúdo html e utilizam PHP para mostrar os dados que você deseja ver.* As referências para as tags php nos arquivos tpl são baseadas nos controladores de variáveis disponíveis, ou referências de classe global.A sintaxe é simples:No arquivo de controle deve-se colocar algo como $ this->data['variavel ']=’ xyz ‘;No arquivo tpl você teria que colocar como referência: <?php echo $ variavel; ?>O OpenCart suporta múltiplos temas. Há muitos temas disponíveis a partir de contribuições assim como há muitos disponíveis comercialmente.Se não deseja comprar um tema e não encontrou uma contribuição que lhe agrade, você pode optar por criar seu próprio tema.Boas práticas para criar um novo tema:Existem algumas regras de ouro para seguir ao criar seu próprio tema, são elas:
1. NUNCA edite os arquivos do tema padrão, pois toda vez que novas atualizações forem lançadas, o tema padrão é sobrescrito com o código mais recente.
2. NUNCA delete o tema padrão ou copie a pasta inteira dele para renomea-la e fazer seu novo tema. Isso fará com que a atualização de seu novo tema seja muito mais difícil. O OpenCart usa como regra o tema padrão do sistema. Isto significa que se estiver faltando um arquivo na sua pasta de tema personalizado, ele irá procurar dentro da pasta do tema padrão. A grande vantagem disso é que você só precisa editar alguns arquivos para fazer uma grande mudança no seu tema, e sempre que houver novas versões lançadas o seu tema será quase transparente durante uma atualização.
Mãos a obra:
Antes de começarmos é importante informar que, é necessário ter conhecimento básico de
CSS para poder fazer grandes mudanças em seu tema. Se você não tem esse conhecimento não se entristeça, se você chegou até aqui, não será esse o problema para você, busque esse conhecimento e acredite, não será nenhum grande desafio.
2. Copie os seguintes arquivos a partir do tema padrão “default” para a pasta “silverfish“. Certifique-se de manter a mesma estrutura de diretório:
- catalog/view/theme/default/stylesheet/ *.*
- catalog/view/theme/default/image/*.*
- catalog/view/theme/default/template/common/header.tpl3. Edite o arquivo header.tpl que se encontra emcatalog/view/theme/silverfish/template/common/4. Localize e substitua dentro do arquivo todas as referências a “default” por “silverfish“. Salve o arquivo e feche-o.5. Na área de administração do seu OpenCart, vá para o menu Configurações aba Loja e mude o tema de default para silverfish.6. Edite o arquivo stylesheet.css que se encontra emcatalog/view/theme/silverfish/stylesheet/7. Faça uma alteração na cor de fundo para a cor que quiser. Para fazer essa alteração localize dentro do arquivo as seguintes linhas:body {
margin: 0px;
padding: 0px;
text-align: center;
}E acrescente a referência “background: #333333;” vai ficar assim:body {
margin: 0px;
padding: 0px;
text-align: center;
background: #333333;
}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 tocar o #333333 pela cor que você deseja. Se você não sabe o código das cores acesse o site abaixo que com certeza vai encontrar uma cor que lhe agrade:
http://www.colorschemer.com/online.html8. Agora recarregue a página de sua frente de loja. Você já deverá ver as novas mudanças.9. Só copie os arquivos da pasta “default” necessários para fazer alterações personalizadas na estrutura das páginas.
Com isso, ao atualizar o OpenCart, seu tema deve continuar intocável. Quaisquer alterações na estrutura do OpenCart serão mostradas durante a utilização do novo modelo com exceção das alterações para os arquivos que você personalizou. Por exemplo, se o arquivoheader.tpl localizado em catalog/view/theme/default/template/common/ sofreu mudanças na atualização do OpenCart, então você terá que fazer somente pequenos ajustes para o seu tema, de modo muito fácil, apenas fazendo comparações entre o novo e o seu tema. E isso é muito mais fácil do que tentar recriar o seu tema inteiro.
Related Articles
OpenCart - Configurando
MENU-> OPÇÃO DO MENU- SUBMENUCampo: Selecionar ou digitar no campo.
Depois de instalar o...
