Child pages
  • Codificación de un tema

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

Tabla de contenidos

Table of Contents
maxLevel2

...

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.jpg en 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 /css, /img y /js son opcionales, el tema puede funcionar perfectamente sin ellosellas, depende de usted crearlas.

...

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.

Image Modified

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 global.css se dedica la diseño de casi todo el sitio. A menos que sepa exactamente lo que está haciendo, no manipule estos archivos.

/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

Image Modified

Módulos

Sección del Encabezado

Image Modified

Bloques de página de inicio

Image Modified

Categoría en la columna central

Image Modified

Página de producto

Image Modified

Formularios de cuentas y pasos para finalizar el pedido

Image Modified

Formaulario de creación de cuenta

Image Modified

Bloques de pedidos

Image Modified

Direcciones

...

Elección del módulo de pago

Image Modified

Mapa del Sitio

Image Modified

Foormulario de Contacto

Image Modified

Página de Tiendas (ubicación)

...