Tabla de contenidos
| Table of Contents | ||
|---|---|---|
|
...
Codificación de un tema
El sistema de tema de PrestaShop se basa en un motor de plantillas, llamado Smarty, el cual permite a diseñadores y desarrolladores web crear fácilmente su propio tema, con pocos conocimientos técnicos.
...
- Todos los temas tienen sus archivos ubicados en la carpeta raíz
/themes. - Cada tema contiene su propia sub-carpeta, en la carpeta de temas principales.
- Cada tema está compuesto de archivos plantilla (
.tpl), archivos de imagen (.gif,.jpg,.png), uno o más archivos CSS (.css) , e incluso a veces archivos JavaScript (.js). - Cada tema tiene su propio archivo de imagen
preview.jpgen su carpeta, permitiendo al propietario de la tienda observar la manera como luce el tema directamente desde el back office, y seleccionar el tema apropiado.
...
| Info |
|---|
Las carpetas |
...
Todas las cadenas de texto de su tema deben ser encerrados en una función Smarty, como esta:
| Code Block |
|---|
{l s='My Text'}
|
Esto permitirá a cualquier persona traducir el tema en su propio idioma, utilizando la herramienta de traducción interna, la cual se encontrar en el back-office de PrestaShop, en la pestaña "Herramientas" y su sub-pestaña "Traducciones". En la sección "Modificar traducciones", utilice el menú desplegable, elija la opción "traducción de Front Office", y luego haga clic en la bandera del idioma en que desea traducir sus cadenas. Todas las cadenas del front-office serán mostradas.
...
El siguiente gráfico explica la forma en que los datos son transmitidos desde el núcleo de PrestaShop a su tema. Usando el método l() permite al tema mostrar su texto en el idioma elegido, si ha sido traducido previamente.
Mejores Prácticas
Le presentamos una lista no exhaustiva de las mejores prácticas que se debe seguir al crear un tema:
...
El tema por defecto fue concebido en un estilo neutro y como tal puede ser utilizado para cualquier tipo de tienda, independiente de la industria. Además, este tema hace todo lo posible para cumplir con los estándares web, según lo establecido por W3C, y ha sido optimizado para ser mostrado de forma eficaz en los principales navegadores.
Dicho esto, es muy posible que desee tener un tema realmente confeccionado a la medida de su sitio web o de su actividad en línea, en lugar de contar con el mismo tema que tienen miles de tiendas virtuales. Aquí es donde necesita construir su propio tema - y la mejor manera de realizarlo es utilizando el tema por defecto como una base sólida o al menos como fuente de inspiración.
...
Archivo o carpeta | Descripción |
|---|---|
preview.jpg | Esta imagen es utilizada como una vista preliminar en el selector "Tema" de la sub-pestaña “Aspecto” en la pestaña "Preferencias". Esta imagen es obligatoria, ya que sin ella el tema no puede ser seleccionado. Obviamente, debe reflejar el diseño del tema, no su ?? logo o el nombre del diseñador... |
404.tpl | Utilizado cuando la página solicitada no es encontrada (error HTTP 404). |
address.tpl | Utilizado al agregar o editar una dirección del cliente. |
addresses.tpl | Utilizado al enumerar las direcciones de un cliente. |
authentication.tpl | UUtilizado Utilizado al identificar a un usuario o crear una nueva cuenta de usuario. |
best-sales.tpl | Utilizado para enumerar las mejores ventas. |
breadcrumb.tpl | Utilizado para encontrar la ruta de navegación. |
category.tpl | Utilizado para enumerar todos los productos de una categoría específica. |
category-tree-branch.tpl | Utilizado sólo por el bloque de Categoría. |
category-cms-tree-branch.tpl | ... |
cms.tpl | Utilizado para páginas informativas (sub-pestaña CMS>"Herramientas"). |
contact-form.tpl | Utilizado por el formulario de contacto. |
discount.tpl | Utilizado al enumerar todos los boletos de descuento para un solo cliente. |
errors.tpl | Utilizado al mostrar errores. Potencialmente llamado por todas las páginas. |
footer.tpl | Pie de página. |
guest-tracking.tpl | Utilizado cuando un visitante no tiene una cuenta conocida en el sitio, pero desea que su cuenta sea rastreada – por lo tanto necesita crear una cuenta para ingresar. |
header.tpl | Encabezado de la página |
history.tpl | Utilizado cuando se enumera el historial de pedidos de un cliente. |
identity.tpl | Utilizado cuando un cliente edita su información personal. |
index.php | Archivo en blanco, los visitantes pre visualizar el contenido de la carpeta. |
index.tpl | Página de bienvenida. |
maintenance.tpl | Utilizado cuando el sitio se encuentra en modo de mantenimiento. |
manufacturer.tpl | Utilizado al enumerar todos los productos de un solo fabricante. |
manufacturer-list.tpl | Utilizado al enumerar todos los fabricantes. |
my-account.tpl | Página de bienvenida para la cuenta de un cliente. |
new-products.tpl | Utilizado al enumerar productos que fueron agregados de último al carrito. |
order-address.tpl | Utilizado durante el proceso de compra: Paso 1, elección de direcciones (entrega, facturación). |
order-carrier.tpl | Utilizado durante el proceso de compra: Paso 2, elección método de transporte. |
order-confirmation.tpl | Utilizado durante el proceso de compra: Último paso, confirmación del pedido (previo pago). |
order-detail.tpl | Utilizado para mostrar el contenido del pedido de un cliente. |
order-follow.tpl | Utilizado cuando un cliente necesita solicitar una devolución del producto. |
order-opc.tpl | ... |
order-opc-new-account.tpl | ... |
order-payment.tpl | Utilizado durante el proceso de compra: Paso 3, elección del modo de pago. |
order-return.tpl | Utilizado para mostrar los detalles de la devolución de un producto de un cliente. |
order-slip.tpl | Utilizado para mostrar vales de crédito del cliente. |
order-steps.tpl | Barra de progreso del proceso de compra. |
pagination.tpl | Utilizado por todas las páginas que enumeran productos. Muestra el botón de paginación, permiten saltar a la página siguiente/anterior de productos. |
password.tpl | Utilizado cuando un cliente necesita cambiar su contraseña. |
prices-drop.tpl | Utilizado para enumerar todas las promociones actuales. |
product.tpl | Utilizado para mostrar los detalles de tan sólo un producto. |
product-list.tpl | Utilizado por todas las páginas que enumeran productos. Muestra la lista actual de los productos. |
product-sort.tpl | Utilizado por todas las páginas que enumeran productos. Muestra un menú que permite organizar y filtrar productos. |
products-comparison.tpl | ... |
scenes.tpl | Utilizado para mostrar detalles de una escena dentro de una categoría de producto. |
search.tpl | Utilizado para enumerar resultados de una consulta de búsqueda. |
shopping-cart.tpl | Utilizado para enumerar productos del carrito de un cliente. |
shopping-cart-product-line.tpl | Utilizado para mostrar una sóla hilera del carrito. |
sitemap.tpl | Utilizado para mostrar el mapa de sitio. |
store_infos.tpl | ... |
stores.tpl | ... |
supplier.tpl | Utilizado para enumerar todos los productos de un sólo proveedor. |
supplier-list.tpl | Utilizado para enumerar todos los proveedores. |
thickbox.tpl | Utilizado para acercar la imagen de un producto. |
/cache | ... |
/css | Contiene todos los archivos de hojas de estilo para el tema. El archivo |
/img | Contiene todas las imágenes del tema. Debe remplazar estas imágenes con sus creaciones respectivas. Si no sabe qué hacer con ellos, mantenga los archivos originales. |
/js | Contiene todos los archivos del tema JavaScript. A menos que sepa exactamente lo que está haciendo, no debe manipular estos archivos. |
/lang | Contiene todos los archivos de traducción. Estos son generados por la herramienta de traducción de back-office y no se deben editar directamente. Si la traducción necesita edición, trasládese a la sección “Modificar traducciones” de la sub-pestaña “Traducciones” en la pestaña "Herramientas" del back-office y seleccione "Traducciones de front office". |
Algunos consejos
Firebug, Dragonyfly et al.: Su trabajo como desarrollador de primera puede ser de gran ayuda con las herramientas adecuadas a la mano, siempre que pruebe su diseño en un navegador moderno que ofrezca dichas herramientas, ya sea mediante un módulo (FireBug de Firefox) o integrado directamente (Dragonfly de Opera, Chrome & Web Inspector de Webkit). Aprenda a dominarlos y se sorprenderá por su utilidad.
...
- El nombre del bloque.
- Identificación del bloque, para dirigirlo al CSS.
- El bloque de la plantilla o una carpeta, si usted necesita para hacer el intercambio.
...
Hooks
Principales áreas de contenido
Módulos
Sección del Encabezado
Bloques de página de inicio
Categoría en la columna central
Página de producto
Formularios de cuentas y pasos para finalizar el pedido
Formaulario de creación de cuenta
Bloques de pedidos
Direcciones
...
Elección del módulo de pago
Mapa del Sitio
Foormulario de Contacto
Página de Tiendas (ubicación)
...