Páginas de modelo Prestashop

Estrutura do arquivo para um tema

Ao criar um tema, você tem que pensar em frente de todas as várias páginas e fragmentos de informação que o tema tem para manipular corretamente, a fim de oferecer uma experiência completa ao seu cliente. Aqui, novamente, o tema padrão é uma boa maneira de obter inspiração, tanto na variedade de arquivos possui e comportamentos atende por, mas também no seu código, que você pode mergulhar a fim de entender melhor como funciona um tema.

Primeiro, aqui está a lista de arquivos de modelo necessário (alerta de spoiler: existem 60 deles. Sim, todas são necessárias para vários recursos do PrestaShop):

ordem-endereço-produto-line.tpl ordem-return.tpl
Nome do arquivo
Por que é necessário
Outros arquivos de modelo usados por este modelo no tema padrão
404 tpl Exibida quando um arquivo não pode ser encontrada.  
address.tpl Permite que o cliente criar um novo endereço.
  • errors.tpl
addresses.tpl Permite que o cliente possa ver os seus endereços atuais.  
Authentication.tpl Permite que o cliente possa entrar em sua conta.
  • ordem-steps.tpl
  • errors.tpl
melhor-sales.tpl

Exibe os produtos mais vendidos.

  • produto-sort.tpl
  • NBR-produto-page.tpl
  • produto-compare.tpl
  • Pagination.tpl
  • produto-list.tpl
breadcrumb.tpl  Exibe o caminho de categoria para a produto/categoria atual.
  • breadcrumb.tpl
Categoria-cms-árvore-branch.tpl Atravessa as categorias CMS para exibi-los.
  • Categoria-cms-árvore-branch.tpl
Categoria-count.tpl Exibe o número de produtos em uma categoria.  
Categoria-árvore-branch.tpl Atravessa as categorias de produtos a fim de exibi-los.
  • Categoria-árvore-branch.tpl
Category.tpl Exibe o conteúdo de uma categoria: cena, imagem, texto, comparador de produto, etc.
  • errors.tpl
  • Scenes.tpl
  • Categoria-count.tpl
  • produto-sort.tpl
  • NBR-produto-page.tpl
  • produto-compare.tpl
  • Pagination.tpl
  • produto-list.tpl
  • produto-compare.tpl
CMS.tpl Exibe o conteúdo de uma página do CMS.  
contato-TPL Exibe o formulário de contato do cliente.
  • errors.tpl
Discount.tpl Exibe a lista de vouchers do cliente.  
errors.tpl Exibe os erros atuais.  
footer. tpl Exibe o rodapé.
  • global.tpl
global.tpl Define diversas variáveis do Smarty, JavaScript mais notável ones.  
Comentários-tracking.tpl Exibe a página de acompanhamento para clientes comentários (visitantes com nenhuma conta).
  • ordem-detail.tpl
header. tpl Exibe o cabeçalho: doctype HTML, links para arquivos CSS, etc.
  • breadcrumb.tpl
History.tpl Exibe todos os seus pedidos anteriores para o cliente.
  • errors.tpl
Identity.tpl Exibe e atualiza as informações pessoais do cliente.
  • errors.tpl
layout.tpl Apela para que os tijolos principais do tema: cabeçalho, rodapé, colunas, modelo atual e viver editar.
  • header. tpl
  • footer. tpl
Maintenance.tpl Exibe uma página especial para quando a loja está em manutenção.  
fabricante-list.tpl Exibe uma lista de todos os fabricantes.
  • errors.tpl
  • NBR-produto-page.tpl
  • Pagination.tpl
manufacturer.tpl Exiba os produtos de um único fabricante.
  • errors.tpl
  • produto-sort.tpl
  • NBR-produto-page.tpl
  • produto-compare.tpl
  • Pagination.tpl
  • produto-list.tpl
my-account.tpl Exibe a página de conta do cliente.  
NBR-produto-page.tpl Exibe o número de produtos na página atual.  
novo-/templates/orderforms/seu_order_form/ Exibe um bloco com os novos produtos.
  • produto-sort.tpl
  • NBR-produto-page.tpl
  • produto-compare.tpl
  • Pagination.tpl
  • produto-compare.tpl
  • Pagination.tpl
ordem-endereço-multishipping-/templates/orderforms/seu_order_form/ Exibe os endereços para entregar um produto de uma situação multishipping.
  • ordem-endereço-produto-line.tpl
ordem-endereço-multishipping.tpl  
  • ordem-steps.tpl
  • errors.tpl
  • ordem-endereço-multishipping-/templates/orderforms/seu_order_form/
   
ordem-address.tpl  
  • ordem-steps.tpl
  • errors.tpl
ordem-carrier.tpl  
  • ordem-steps.tpl
  • errors.tpl
ordem-confirmation.tpl  
  • errors.tpl
  • ordem-steps.tpl
ordem-detail.tpl    
ordem-follow.tpl    
ordem-opc-novo-account.tpl    
ordem-opc.tpl  
  • compras-cart.tpl
  • ordem-address.tpl
  • ordem-opc-novo-account.tpl
  • ordem-carrier.tpl
  • ordem-payment.tpl
  • errors.tpl
ordem-payment.tpl  
  • errors.tpl
  • ordem-steps.tpl
  • shopping-cart-produto-line.tpl
 
  • errors.tpl
ordem-slip.tpl    
ordem-steps.tpl    
Pagination.tpl    
password.tpl  
  • errors.tpl
preços-drop.tpl  
  • produto-sort.tpl
  • NBR-produto-page.tpl
  • produto-compare.tpl
  • Pagination.tpl
  • produto-list.tpl
  • produto-compare.tpl
  • Pagination.tpl
produto-compare.tpl    
produto-lista-colors.tpl    
produto-list.tpl    
produto-sort.tpl    
produto. tpl  
  • errors.tpl
  • produto-list.tpl
produtos-comparison.tpl    
restrito-country.tpl    
Scenes.tpl    
Search.tpl  
  • errors.tpl
  • produto-sort.tpl
  • NBR-produto-page.tpl
  • produto-compare.tpl
  • Pagination.tpl
  • produto-list.tpl
shopping-cart-produto-line.tpl    
compras-cart.tpl  
  • ordem-steps.tpl
  • errors.tpl
  • shopping-cart-produto-line.tpl
sitemap.tpl  
  • Categoria-árvore-branch.tpl
  • Categoria-cms-árvore-branch.tpl
Stores.tpl    
store_infos.tpl    
fornecedor-list.tpl    
Supplier.tpl Torna possível exibir a lista de produtos por fornecedor.
  • errors.tpl
  • produto-sort.tpl
  • NBR-produto-page.tpl
  • produto-compare.tpl
  • Pagination.tpl
  • produto-list.tpl

Vamos mergulhar como um tema é organizado: pastas, arquivos, onde eles pertencem e como tratá-las corretamente

Organização de um tema

  • Organização de um tema
    • Pastas
      • Arquivo em miniatura
      • CSS e Sass
        • CSS
        • Sass / Compass
      • Fonte
      • Imagem
      • JavaScript
      • Língua
      • O tema móvel
    • Arquivos
      • Arquivos de modelos
      • Folhas de estilo
      • Arquivos de imagem
      • Ferramentas

Pastas

As pastas principais de qualquer tema PrestaShop são os:

  • /cache pasta contém todos os arquivos temporários que são gerados e reutilizados a fim de aliviar a carga do servidor. A pasta está vazia por padrão.
  • /CSS pasta contém todos os arquivos CSS.
    • /Sass pasta contém todos os o Sass .SCSS arquivos de origem, antes que eles são compilados em arquivos de CSS.
  • / Font pasta contém os arquivos de fonte necessários.
  • / img pasta contém todas as imagens.
  • /js. pasta contém todos os arquivos de JavaScript.
  • / lang pasta contém traduções do tema. Seus direitos de acesso devem ser definidos no CHMOD 666 (por exemplo), para que a ferramenta de tradução de back-office pode ler e escrever para ele.

As seguintes pastas não estão directamente relacionadas com o tema, mas ajuda você certifique-se de toda a característica do PrestaShop tem um design que é consistente com o seu tema:

  • /mails pastacontém os modelos para os e-mails que PrestaShop envia (confirmação da ordem, solicitação de senha, envio de notificações, etc.).
  • / móvel pasta contém a versão móvel do tema.
  • /modules pasta contém os arquivos de modelo para muitos módulos.
  • /PDF pasta contém os arquivos de modelo para os arquivos PDF que PrestaShop gera (facturas, deslizamento de entrega, ordens de fornecimento, etc.).

A raiz da pasta contém arquivos TPL somente, bem como a Preview.jpg arquivo em miniatura.

Arquivo em miniatura

Preview.jpg arquivo na raiz da pasta do tema é a miniatura que é usada pelo PrestaShop em seu seletor de tema de back-office.

Ele serve como um lembrete visual do que é o tema, e, portanto, deveria fazer uma captura de tela, ao invés de logotipo de sua empresa.

Ele pode ter qualquer tamanho – do tema padrão é 180 * 445 pixels.

Deve ser um arquivo JPEG.

CSS e Sass

CSS

Arquivos CSS do tema estão localizados na /CSS pasta.

É recomendável ter uma folha de estilo comum para globais regras CSS: global.css.
Então, cada um do controlador deve ter seu próprio arquivo CSS: por exemplo, Product.css para a página do produto.

Sass / Compass

Sass e bússolaarquivos são opcionais: você não precisa usar essas ferramentas para criar os arquivos CSS para o seu tema de back-office.

Se você usar Sass e bússola, aconselhamos colocar a fonte .SCSS arquivos na /Sass tema, para que outros desenvolvedores possam ter acesso ao tema e reformulá-las mais facilmente.

A partir daí, você pode gerar os arquivos CSS na /CSS pastas de arquivos Sass no /Sass pasta!

Fonte

/ Font pasta é opcional: contém as fontes que você escolheu para usar para o seu tema.

Por exemplo, o padrão PrestaShop tema usa a fonte fonte impressionante conjunto (http://fortawesome.github.Io/Font-awesome/) para seus ícones responsivos, e, portanto, tem os seguintes arquivos seu / Font pasta:

  • fontawesome-webfont.eot
  • fontawesome-webfont.svg
  • fontawesome-webfont.ttf
  • fontawesome-webfont.woff

Se você não construir seu tema com uma fonte específica ou ícone definido em mente, você pode ignorar esta pasta.

Imagem

Imagens relacionados ao tema estão a ser armazenado na / img pasta.

Você pode criar a subpasta para uma melhor organização. Por exemplo, o tema padrão tem as seguintes subpastas:

  • /Icon para ícones simples (por exemplo, aquelas não disponíveis em seu conjunto de fonte escolhida).
  • /jQuery para imagens específicas do jQuery.

Você pode criar mais se necessário.

JavaScript

Arquivos JavaScript são para ser armazenado na /js. pasta.

Ao contrário dos arquivos CSS, recomendamos que você não tenha um arquivo JavaScript comum/global, nem se você tiver um único arquivo por controlador.

Língua

Todos os arquivos de tradução são para ser armazenado na / lang pasta.

Arquivos devem ser nomeados após seu código ISO 3166-1 alpha-2 em letras minúsculas: por exemplo, fr.php.

Esses arquivos devem ser gerados pela ferramenta de tradução integrado PrestaShop (localizado a localização / menu de traduções).


Carrinho 0 Carrinho de compras

Nenhum produto

Frete grátis! Remessa
$0.00 Total

Confira