Criando um tema do zero para Opencart - Parte 1

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

Criando um tema do zero para Opencart - Parte 1
  • Compartilhe esse post
  • Compartilhar no Facebook00
  • Compartilhar no Google Plus00
  • Compartilhar no Twitter

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

Olá, deixe seu comentário para Criando um tema do zero para Opencart - Parte 1

Já temos 4 comentário(s). DEIXE O SEU :)
Matteus Sousa

Matteus Sousa

Muito bem, vou acompanhar os updates, valeu por compartilhar!!
★★★★★DIA 03.01.18 12h01RESPONDER
Rafael Marques
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!

★★★★★DIA 03.01.18 12h14RESPONDER
N/A
Enviando Comentário Fechar :/
Alex Dias

Alex Dias

Bacana demais sua iniciativa. Parabéns.
★★★★★DIA 28.12.17 14h11RESPONDER
Rafael Marques
Enviando Comentário Fechar :/
Rafael Marques

Rafael Marques

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

★★★★★DIA 02.01.18 16h20RESPONDER
N/A
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/