Estructura de archivos para un tema

Al crear un tema, tienes que pensar por adelantado las distintas páginas y piezas de información que el tema tiene para manejarlo correctamente, con el fin de ofrecer una experiencia completa a su cliente. Aquí otra vez, el tema por defecto es una buena manera de obtener inspiración, tanto en la variedad de archivos fuente, sino también en su código, que se puede navegar a fin de comprender mejor cómo funciona un tema.

En primer lugar, aquí está la lista de archivos de plantilla necesarios (alerta de spoiler: hay 60 de ellos. Sí, todos son necesarios para diversas funciones de PrestaShop):

orden-Dirección-productos-line.tpl orden-return.tpl
Nombre de archivo
¿Por qué es necesario
Otros archivos de plantilla utilizadas por esta plantilla en el tema por defecto
404. tpl Se muestra cuando no se encuentra un archivo.  
Address.tpl Permite que el cliente puede crear una nueva dirección.
  • Errors.tpl
addresses.tpl Permite al cliente ver sus direcciones actuales.  
Authentication.tpl Permite al cliente ingresar a su cuenta.
  • orden-steps.tpl
  • Errors.tpl
mejor-sales.tpl

Se muestran los productos más vendidos.

  • producto-sort.tpl
  • NBR-productos-page.tpl
  • producto-compare.tpl
  • pagination.tpl
  • producto-list.tpl
breadcrumb.tpl  Muestra la ruta de la categoría a la categoría de producto actual.
  • breadcrumb.tpl
Categoría-cms-árbol-branch.tpl Funciona a través de las categorías CMS para mostrarlos.
  • Categoría-cms-árbol-branch.tpl
Categoría-count.tpl Muestra el número de productos en una categoría.  
Categoría-árbol-branch.tpl Recorre las categorías de productos con el fin de mostrarlos.
  • Categoría-árbol-branch.tpl
Category.tpl Muestra el contenido de una categoría: escena, imagen, texto, comparador de producto, etc..
  • Errors.tpl
  • scenes.tpl
  • Categoría-count.tpl
  • producto-sort.tpl
  • NBR-productos-page.tpl
  • producto-compare.tpl
  • pagination.tpl
  • producto-list.tpl
  • producto-compare.tpl
CMS.tpl Muestra el contenido de una página CMS.  
contacto-form.tpl Muestra el formulario de contacto del cliente.
  • Errors.tpl
Discount.tpl Muestra la lista de los vales del cliente.  
Errors.tpl Muestra los errores actuales.  
Footer.tpl Muestra el pie de página.
  • global.tpl
global.tpl Define varias variables de Smarty, JavaScript más notable los.  
Comentarios-tracking.tpl Muestra la página de seguimiento para los clientes de huésped (los visitantes no cuenta).
  • orden-detail.tpl
header.tpl Muestra el encabezado: doctype HTML, enlaces a archivos CSS, etc..
  • breadcrumb.tpl
History.tpl Muestra todas las órdenes anteriores para el cliente.
  • Errors.tpl
Identity.tpl Muestra y actualiza la información personal del cliente.
  • Errors.tpl
layout.tpl Exhorta a los ladrillos del tema principales: encabezado, pie de página, columnas, plantilla actual y Live Edit.
  • header.tpl
  • Footer.tpl
Maintenance.tpl Muestra una página especial para cuando la tienda está en mantenimiento.  
fabricante-list.tpl Muestra una lista de todos los fabricantes.
  • Errors.tpl
  • NBR-productos-page.tpl
  • pagination.tpl
Manufacturer.tpl Mostrar los productos de un solo fabricante.
  • Errors.tpl
  • producto-sort.tpl
  • NBR-productos-page.tpl
  • producto-compare.tpl
  • pagination.tpl
  • producto-list.tpl
mi-account.tpl Muestra la página de la cuenta del cliente.  
NBR-productos-page.tpl Muestra el número de productos en la página actual.  
nuevo-products.tpl Muestra un bloque con los nuevos productos.
  • producto-sort.tpl
  • NBR-productos-page.tpl
  • producto-compare.tpl
  • pagination.tpl
  • producto-compare.tpl
  • pagination.tpl
orden-Dirección-multishipping-products.tpl Muestra las direcciones para ofrecer un producto en una situación multishipping.
  • orden-Dirección-productos-line.tpl
orden-Dirección-multishipping.tpl  
  • orden-steps.tpl
  • Errors.tpl
  • orden-Dirección-multishipping-products.tpl
   
orden-address.tpl  
  • orden-steps.tpl
  • Errors.tpl
orden-carrier.tpl  
  • orden-steps.tpl
  • Errors.tpl
orden-confirmation.tpl  
  • Errors.tpl
  • orden-steps.tpl
orden-detail.tpl    
orden-follow.tpl    
orden-opc-nuevo-account.tpl    
orden-opc.tpl  
  • compras-cart.tpl
  • orden-address.tpl
  • orden-opc-nuevo-account.tpl
  • orden-carrier.tpl
  • orden-payment.tpl
  • Errors.tpl
orden-payment.tpl  
  • Errors.tpl
  • orden-steps.tpl
  • compras-carro-productos-line.tpl
 
  • Errors.tpl
orden-slip.tpl    
orden-steps.tpl    
pagination.tpl    
Password.tpl  
  • Errors.tpl
precios-drop.tpl  
  • producto-sort.tpl
  • NBR-productos-page.tpl
  • producto-compare.tpl
  • pagination.tpl
  • producto-list.tpl
  • producto-compare.tpl
  • pagination.tpl
producto-compare.tpl    
producto-lista-colors.tpl    
producto-list.tpl    
producto-sort.tpl    
producto.tpl  
  • Errors.tpl
  • producto-list.tpl
productos-comparison.tpl    
restringido-country.tpl    
scenes.tpl    
Search.tpl  
  • Errors.tpl
  • producto-sort.tpl
  • NBR-productos-page.tpl
  • producto-compare.tpl
  • pagination.tpl
  • producto-list.tpl
compras-carro-productos-line.tpl    
compras-cart.tpl  
  • orden-steps.tpl
  • Errors.tpl
  • compras-carro-productos-line.tpl
Sitemap.tpl  
  • Categoría-árbol-branch.tpl
  • Categoría-cms-árbol-branch.tpl
Stores.tpl    
store_infos.tpl    
proveedor-list.tpl    
supplier.tpl Hace posible Mostrar la lista de productos por proveedor.
  • Errors.tpl
  • producto-sort.tpl
  • NBR-productos-page.tpl
  • producto-compare.tpl
  • pagination.tpl
  • producto-list.tpl

Organización de un tema

  • Organización de un tema
    • Carpetas
      • Archivo en miniatura
      • CSS y Sass
        • CSS
        • Sass / del compás
      • Fuente
      • Imagen
      • JavaScript
      • Idioma
      • El tema móvil
    • Archivos
      • Archivos de plantillas
      • Hojas de estilo
      • Archivos de imagen
      • Herramientas

Carpetas

Las carpetas principales de cualquier tema PrestaShop son:

  • El cache contiene todos los archivos temporales que se generan y se reutiliza para aligerar la carga del servidor. La carpeta está vacía por defecto.
  • El /CSS contiene todos los archivos CSS.
    • El /Sass contiene todos los Sass .SCSS archivos de origen, antes de que se compilan en los archivos CSS.
  • El / Font contiene los ficheros necesarios.
  • El / IMG contiene todas las imágenes.
  • El /JS contiene todos los archivos JavaScript.
  • El / Lang contiene las traducciones del tema. Sus derechos de acceso deben establecerse en CHMOD 666 (por ejemplo), para que la herramienta de traducción de back-office puede leer y escribir en él.

Las siguientes carpetas no están directamente relacionadas con el tema, pero asegúrate de que el conjunto de característica de PrestaShop ayuda tiene un diseño que es coherente con su tema:

  • El /mails contiene las plantillas para los e-mails que PrestaShop envía (confirmación del pedido, solicitud de contraseña, notificaciones de envío, etc.).
  • El / móvil contiene la versión móvil del tema.
  • El /modules contiene los archivos de plantilla para muchos módulos.
  • El /PDF contiene los archivos de plantilla para los archivos PDF que PrestaShop genera (facturas, recibo de entrega, órdenes de suministro, etc..).

La raíz de la carpeta contiene archivos TPL, así como la Preview.jpg archivo en miniatura.

Archivo en miniatura

El Preview.jpg esta en la raiz de la carpeta del tema es la imagen que se utiliza en su selector de tema de back-office de PrestaShop.

Sirve como un recordatorio visual de lo que es el tema, y por lo tanto, debería ser una captura de pantalla en lugar de logotipo de su empresa.

Puede tener cualquier tamaño – el tema por defecto 180 * 445 píxeles.

Debe ser un archivo JPEG.

CSS y Sass

CSS

Archivos CSS del tema se encuentran en el /CSS.

Se recomienda tener una hoja de estilo común globales reglas CSS: global.CSS.
Luego, cada una de las paginas debe tener su propio fichero CSS: por ejemplo, Product.CSS para la página del producto.

Sass / Compas

Sass y Compas son opcionales: no tienes que usar estas herramientas para generar los archivos CSS para tu tema de back-office.

Si usted utiliza Sass y Compas , recomendamos poner la fuente .SCSS archivos en la /Sass el tema, para que otros desarrolladores puedan tener acceso al tema y más fácilmente la reanudación de los.

Desde allí, puede generar los ficheros CSS en el /CSS las carpetas de los archivos de Sass en el /Sass carpeta!

Fuente

El / Font es opcional: contiene las fuentes que elegiste para tu tema.

Por ejemplo, el defecto PrestaShop tema utiliza la fuente fuente impresionante conjunto)http://fortawesome.github.Io/Font-awesome/) para sus iconos sensibles, y por lo tanto, tiene los siguientes archivos en su / Font carpeta:

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

Si no construyes tu tema con una fuente específica o un icono situado en mente, puede omitir esta carpeta.

Imagen

Imágenes relacionadas con el tema son para ser almacenado en el / IMG carpeta.

Puede crear subcarpeta para una mejor organización. Por ejemplo, el tema por defecto tiene las siguientes subcarpetas:

  • /Icon para los iconos simples (por ejemplo, los que no está disponible en su conjunto las fuentes).
  • /jQuery para imágenes específicas de jQuery.

Usted puede crear más si es necesario.

JavaScript

Son archivos JavaScript para ser almacenado en el /JS carpeta.

A diferencia de los archivos CSS, le recomendamos que no tiene un archivo JavaScript común o global, ni si tiene un único archivo por controlador.

Idioma

Todos los archivos de traducción están para ser almacenado en el / Lang carpeta.

Documentos deben ser nombrados después de su código ISO 3166-1 alfa-2 en minúsculas: por ejemplo, fr.php.

Estos archivos deben generarse por la herramienta de traducción integrada de PrestaShop (situado en la localización / menú traducidas).

Producto agregado a favoritos
Producto agregado para comparar

Utilizamos cookies, propias y de terceros, para medir y obtener datos estadísticos de la navegación de los usuarios. A su vez, utilizamos cookies analíticas y de personalización para, por ejemplo, recordar el inicio de sesión a la cuenta de usuario o registrar las preferencias del usuario. Puedes configurar y aceptar el uso de cookies mediante los botones que se muestran a continuación, y modificar las opciones de tu consentimiento en cualquier momento visitando nuestra Política de Cookies. Asimismo, puedes obtener más información en “Configurar Cookies”.