Your cart
No hay más artículos en su carrito
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):
|
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. |
|
| addresses.tpl | Permite al cliente ver sus direcciones actuales. | |
| Authentication.tpl | Permite al cliente ingresar a su cuenta. |
|
| mejor-sales.tpl |
Se muestran los productos más vendidos. |
|
| breadcrumb.tpl | Muestra la ruta de la categoría a la categoría de producto actual. |
|
| Categoría-cms-árbol-branch.tpl | Funciona a través de las categorías CMS para mostrarlos. |
|
| 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. |
|
| Category.tpl | Muestra el contenido de una categoría: escena, imagen, texto, comparador de producto, etc.. |
|
| CMS.tpl | Muestra el contenido de una página CMS. | |
| contacto-form.tpl | Muestra el formulario de contacto del cliente. |
|
| 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 | 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). |
|
| header.tpl | Muestra el encabezado: doctype HTML, enlaces a archivos CSS, etc.. |
|
| History.tpl | Muestra todas las órdenes anteriores para el cliente. |
|
| Identity.tpl | Muestra y actualiza la información personal del cliente. |
|
| layout.tpl | Exhorta a los ladrillos del tema principales: encabezado, pie de página, columnas, plantilla actual y Live Edit. |
|
| Maintenance.tpl | Muestra una página especial para cuando la tienda está en mantenimiento. | |
| fabricante-list.tpl | Muestra una lista de todos los fabricantes. |
|
| Manufacturer.tpl | Mostrar los productos de un solo fabricante. |
|
| 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. |
|
| orden-Dirección-multishipping-products.tpl | Muestra las direcciones para ofrecer un producto en una situación multishipping. |
|
| orden-Dirección-multishipping.tpl |
|
|
| orden-address.tpl |
|
|
| orden-carrier.tpl |
|
|
| orden-confirmation.tpl |
|
|
| orden-detail.tpl | ||
| orden-follow.tpl | ||
| orden-opc-nuevo-account.tpl | ||
| orden-opc.tpl |
|
|
| orden-payment.tpl |
|
|
|
||
| orden-slip.tpl | ||
| orden-steps.tpl | ||
| pagination.tpl | ||
| Password.tpl |
|
|
| precios-drop.tpl |
|
|
| producto-compare.tpl | ||
| producto-lista-colors.tpl | ||
| producto-list.tpl | ||
| producto-sort.tpl | ||
| producto.tpl |
|
|
| productos-comparison.tpl | ||
| restringido-country.tpl | ||
| scenes.tpl | ||
| Search.tpl |
|
|
| compras-carro-productos-line.tpl | ||
| compras-cart.tpl |
|
|
| Sitemap.tpl |
|
|
| Stores.tpl | ||
| store_infos.tpl | ||
| proveedor-list.tpl | ||
| supplier.tpl | Hace posible Mostrar la lista de productos por proveedor. |
|
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
Carpetas
Las carpetas principales de cualquier tema PrestaShop son:
- El
cachecontiene todos los archivos temporales que se generan y se reutiliza para aligerar la carga del servidor. La carpeta está vacía por defecto. - El
/CSScontiene todos los archivos CSS.- El
/Sasscontiene todos los Sass.SCSSarchivos de origen, antes de que se compilan en los archivos CSS.
- El
- El
/ Fontcontiene los ficheros necesarios. - El
/ IMGcontiene todas las imágenes. - El
/JScontiene todos los archivos JavaScript. - El
/ Langcontiene 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
/mailscontiene 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óvilcontiene la versión móvil del tema. - El
/modulescontiene los archivos de plantilla para muchos módulos. - El
/PDFcontiene 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.eotfontawesome-webfont.svgfontawesome-webfont.ttffontawesome-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:
/Iconpara los iconos simples (por ejemplo, los que no está disponible en su conjunto las fuentes)./jQuerypara 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).