Criando um tema do zero para Opencart - Parte 1

Criando um tema do zero para Opencart - Parte 1

: Rafael Marques        25 de Dez de 2017    (5)

O início de nossa jornada para a criação de um tema Opencart do zero. Nesse post iremos conhecer a estrutura de um tema


Fala Dev ;)

Nesta série de posts eu irei ensinar a montar um tema Opencart do zero, incluindo sua estrutura e funcionamento para que a partir daí você possa converter qualquer layout para dentro do OC e ter uma loja sem necessitar de temas prontos e ainda faturar com seus próprios temas.

Na primeira parte iremos instalar o Opencart e entender a estrutura básica necessária para o tema. Então vamos lá!

1. Baixe o Opencart AQUI clicando em Download Now

Você irá baixar um ZIP contendo o CMS. Apenas descompacte e coloque na raíz do seu servidor local. (Se não souber trabalhar com servidore APACHE me conta nos comentários que eu faço um post ensinando, é bem rápido)

Basicamente você irá utilizar apenas o conteúdo da pasta UPLOAD

Você terá na estrutura 2 arquivos que deverão ser renomeados

config-dist.php para config.php

admin/config-dist.php para admin/config.php

Feito isso, crie um banco de dados vazio e acesse a pasta do seu projeto através do navegador. Vai aparecer o instalador do Opencart.

Informe o nome do banco que você criou, o usuário e a senha (normalmente o usuário é root e a senha fica em branco). Informe um usuário para o admin com e-mail e senha.

Após a instalação ser concluída, apague a pasta INSTALL da raíz do projeto e PRONTO! Opencart instalado ;)

Agora precisamos identificar o tema padrão.

O Opencart trabalha com padrão MVC. Um padrão de projeto que separa tudo em 3 camadas.

MODEL = Camada responsável pelo modelo de negócios (interação com banco de dados, gravação de log, envio de e-mails etc...)

VIEW = Camada responsável pela apresentação do conteúdo ao usuário

CONTROLLER = Camada reponsável pela lógica do sistema, validação de dados, envio de informações para View, negociação com o Model e etc..

O Opencart ainda tem uma pasta LANGUAGE em adicional a este padrão e contém arquivos com os textos para serem traduzidos.

O tema padrão está dentro da VIEW (óvbio né) e podemos encontra-lo no seguinte caminho:

catalog/view/theme/default/...

IMAGE:

A pasta image armazena as imagens pertinentes ao tema. Não são imagens de produtos, logotipo ou fabricantes. As imagens nessa pastas são aquelas fixas que não serão modificadas pleo gerente da loja como basndeiras de cartões aceitos, elementos visuais, padrões etc...

STYLESHEET:

A pasta stylesheet obviamente contém a folha de estilo do tema. Por questões de convesão, qualquer outra folha de estilo que não faça parte de uma biblioteca deverá ser colocada ali

TEMPLATE:

Aqui são guardados os arquivos contendo os HTMLs já integrados com o motor de templates TWIG. Aqui que você vai jogar as telas convertidas em HTML.

 

Criando um tema do zero para Opencart - Parte 1

DICA: A estrutura dos temas Opencart é extremamente organizada e cada departamente é separado em pastas. A pasta COMMON contém tudo aqui que é padrão na loja como o HEADER (Topo) e o FOOTER (Rodapé). Página de sucesso, a HOME, o Carrinho entre outros.

Fique tranquilo que iremos abordar todos a medida em que chegamos em cada um para criar o nosso tema. Nem todos são obrigatórios pois o Opencart carrega o template do tema DEFAULT caso o seu tema não possua determinado arquivo.

No próximo post iremos iniciar conhecendo o tema e iniciando com o Header.

Valeu Dev! E um forte abraço ;)

  • Compartilhe esse post
  • Compartilhar no Facebook00
  • Compartilhar no Google Plus00
  • Compartilhar no Twitter

Entre para a Lista VIP

Acesse conteúdo EXCLUSIVO e NOVIDADES sobre os cursos em primeira mão!

Também Odiamos Spam!

Rafael Marques

Desenvolvedor Web há quase 10 anos e especialista em Opencart E-Commerce CMS. Trabalho com HTML5 / CSS3 / JS / PHP / MySql.

        

Comentários (10)

Fernando Kurt

Fernando Kurt

Vai sair as outras aulas
Enviando Comentário Fechar :/
Rafael Marques

Rafael Marques

Olá Fernando, vai sim! Infelizmente tivemos diversos contratempos que atrasaram todo cronograma. A previsão para novos conteúdos (principalmente Opencart) é para a segunda quinzena de fevereiro. Cadastre-se em nosso informativo pra receber em primeira mão ;) e Obrigado pelo feedback.

Enviando Comentário Fechar :/
Adelto Almeida

Adelto Almeida

Meus Parabéns, pela a iniciativa e seus conteúdo são de primeira qualidade.
:)
Enviando Comentário Fechar :/
Rafael Marques

Rafael Marques

Fala Adelto, muito obrigado pelo seu feedback!

Enviando Comentário Fechar :/
Marcio Almeida

Marcio Almeida

Muito bom mesmo.parabéns.
Enviando Comentário Fechar :/
Rafael Marques

Rafael Marques

Obrigado Marcio, seja bem vindo ;)

Enviando Comentário Fechar :/
Matteus Sousa

Matteus Sousa

Muito bem, vou acompanhar os updates, valeu por compartilhar!!
Enviando Comentário Fechar :/
Rafael Marques

Rafael Marques

Legal Matteus obrigado e pode esperar que essa semana vem mais conteúdo. Abraço e obrigado pelo feedback!

Enviando Comentário Fechar :/
Alex Dias

Alex Dias

Bacana demais sua iniciativa. Parabéns.
Enviando Comentário Fechar :/
Rafael Marques

Rafael Marques

Valeu Alex, obrigado pelo feedback ;) Em breve sai mais conteúdo sobre Opencart!

Enviando Comentário Fechar :/
Enviando Comentário Fechar :/