Codificación de un tema

Tabla de contenidos

/*<![CDATA[*/ div.rbtoc1597397864075 {padding: 0px;} div.rbtoc1597397864075 ul {list-style: disc;margin-left: 0px;} div.rbtoc1597397864075 li {margin-left: 0px;padding-left: 0px;} /*]]>*/

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 diseñadores y desarrolladores web deben utilizar las siguientes herramientas:

  • Firefox: Firebug es una extensión gratuita para facilitar la comparación y la depuración entre su CSS y la salida.

  • Firefox/Chrome: Web Developer agrega muchas herramientas de desarrollo web útiles para su navegador.

  • Safari/Chrome: habilite el Web Inspector.

  • Opera: Dragonfly, un ambiente de depuración con todas las funciones.

  • Internet Explorer 8+: Developer Tools se encuentra disponible a través del menú Herramientas.

Los usuarios de Internet Explorer también pueden utilizar Firebug lite.

Conceptos e información técnica

Funcionamiento de un tema

Un tema de PrestaShop es un conjunto de archivos que puede editar con el fin de cambiar el aspecto de su tienda virtual.

Le presentamos algunas pequeñeces a tomar en cuenta:

  • 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.

He aquí un resumen de la estructura de archivos de un tema de PrestaShop (la opción por defecto):

  • La carpeta /css contiene todos los archivos CSS.

  • La carpeta /img contiene todas las imágenes.

  • La carpeta /js contiene todos los archivos JavaScript.

  • La carpeta /lang contiene traducciones del tema. Sus derechos de acceso deben configurarse en CHMOD 666 (por ejemplo), de modo que la herramienta de traducción de back-office se pueda leer y escribir dentro de la misma.

  • La raíz de la carpeta sólo contiene archivos TPL (archivos Smarty), así como el archivo preview.jpg.

Las carpetas /css, /img y /js son opcionales, el tema puede funcionar perfectamente sin ellas, depende de usted crearlas.

Manejo de traducciones

Todas las cadenas de texto de su tema deben ser encerrados en una función Smarty, como esta:

{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.

h3 Transmisión de datos a un tema de PrestaShop

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 debe seguir al crear un tema:

  1. No mezcle el código XHTML y PHP.

  2. No mezcle el código XHTML y CSS, coloque el código CSS en un archivo .css separado.

  3. Valide su código XHTML y CSS usando los validadores W3C: XHTML validator, CSS validator.

  4. No haga consultas SQL desde un controlador PHP (archivo {{.php en la raíz de PrestaShop); prefiera el uso de métodos existentes de las clases de PrestaShop o cree nuevos métodos para estas clases.

  5. Compruebe si un método que necesite ya existe en las clases disponibles.

  6. Asegúrese siempre de producir un código claro y legible, fácil de mantener para cualquier persona.

  7. Comente su código, en inglés.

  8. Al editar el tema en un sitio en producción, primero sitúe la tienda en el modo de mantenimiento a través del back-office.

  9. Utilice navegadores modernos, como Firefox, Google Chrome u Opera, y asegúrese de que sus amigos también lo hagan.

  10. Siempre que sea posible, utilice CSS sprites (revise el siguiente artículo).

  11. Si desea agradecer al equipo PrestaShop por su arduo trabajo, considere realizar una donación o ¡corra la voz!

Personalización del tema por defecto

Siga los siguientes pasos para crear su propio tema de PrestaShop fuera del tema por defecto.

1. Copie el tema por defecto

  1. Ubique el directorio /themes en su instalación de PrestaShop y cree una copia del directorio por defecto ../themes/prestashop/.

  2. Cambie el nombre al duplicado.

2. Modifique la ficha CSS

  • En la carpeta del tema personalizado (ej., /themes/MyStoreTheme/), ubique la carpeta /css.

  • Abra el archivo global.css y cámbielo de acuerdo a sus necesidades. Aquí estará limitado por su creatividad – y su conocimiento de CSS. Nota: el archivo maintenance.css ubicado en la misma carpeta, controla el diseño de la página de modo de mantenimiento.

  • Las imágenes nuevas o modificadas deben ser colocados en carpeta del nuevo tema /img (e.j., /themes/MyStoreTheme/img).

Consejos del equipo de desarrollo de PrestaShop

  • Siempre que sea posible, utilice CSS en lugar de HTML (ej., utilizar sólo cuadros para datos tabulares, no para diseño).

  • Valide su código XHTML y CSS utilizando las herramientas W3C : HTML validator, CSS validator.

  • Reducir el tamaño de las imágenes y fotografías utilizando la compresión. Smushlt de Yahoo! es una excelente herramienta para realizarlo.

  • Pruebe su tema es varios navegadores web, no sólo en Internet Explorer. Mozilla Firefox, navegadores WebKit (Apple Safari, Google Chrome) y Opera deben ser considerados, ante todo debe comprobar que funciona bien en la mayoría de navegadores con los que su sitio web es más visitado. Si su sitio web aún no ha sido lanzado, revise estadísticas de navegadores en su país. Por ejemplo, aquí tenemos estadísticas para la región sudamericana, desde el 2011 a 2012|http://gs.statcounter.com/#browser-sa-monthly-201101-201201].

  • Mantenga los nombres de archivo en minúsculas.

  • Recuerde que el texto de la página de inicio y el logotipo se pueden modificar directamente a través del Back Office. Trasládese a sub-pestaña “Temas” en la pestaña "Módulos".

3. Cree una captura de pantalla preliminar

Una vez que su tema personalizado se encuentra listo, usted debe colocar un archivo que represente el tema, llamado preview.jpg, en la carpeta raíz del tema (ej., /themes/MyStoreTheme). Este archivo debe ser .jpg de 100 × 100 píxeles.

4. Pruebe el tema

  1. Diríjase a la sección “Temas” de la sub-pestaña “Aspecto” en la pestaña “Preferencias” de su back office.

  2. Seleccione el nuevo tema y haga clic en Guardar.

¡Compartir sus temas!

¡Muestre su trabajo, obtenga comentarios y construya reputación al compartir su tema en la sección Temas de nuestro Foro!

¡También puede vender su tema a los usuarios de PrestaShop a través de nuestro sitio web Addons|http://addons.prestashop.com/]!

Creación de su propio tema

Tema por defecto de PrestaShop

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.

Primeros pasos hacia su propio tema

Todos los temas instalados actualmente se encuentran ubicados en la carpeta /themes, donde muy pronto se encontrará el suyo. El tema se encuentra en la sub-carpeta /themes/prestashop sub-folder. Esta es la carpeta donde va a construir su propio tema.

Por otra parte, es sumamente desaconsejable cambiar directamente los archivos para el tema por defecto, por la razón de que esto puede introducir nuevos errores y no tendrá manera de regresar. Entonces, tiene que mantener el tema por defecto intacto, para poder intercambiar entre su tema y el tema por defecto con el fin de averiguar si el problema presentado se encuentra ligado a su tema, o a un error en otra parte de PrestaShop.

El primer paso será crear una copia de la sub carpeta /prestashop y ofrecerle a esa copia un nombre singular, por ejemplo, el nombre de su propia página web o tema. De esta manera, el tema por defecto se mantiene intacto.

Estructura de archivos para un tema

Al crear un tema, usted tiene que pensar desde el principio de las diferentes páginas y pedazos de información que su tema que ha de manejar correctamente, para ofrecer una experiencia completa a su cliente. Aquí también, el tema por defecto es una manera excepcional para conseguir inspiración, tanto en la variedad de archivos y comportamientos que presenta como en su código, en el que puede sumergirse con el fin de entender mejor el funcionamiento del tema.

Algunos consejos

Firebug, Dragonyfly: 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.

JavaScript: todos los archivos JavaScript deben ser almacenados en la carpeta /js del tema.

Archivo preview.jpg : Una vez que su diseño se encuentre completado, puede crear el archivo de imagen de vista preliminar. Tome una captura de pantalla, luego, cambie el tamaño a 180px de ancho para utilizarla en vez del archivo por defecto preview.jpg . Puede utilizar la herramienta de captura de pantalla proporcionada por su sistema operativo (Snipping Tool de Windows, combinación Comando-Shift-4 para OS X de Mac) o instale una extensión del navegador, como FireShot o Screengrab de Firefox.

Integración: donde se encuentran los hooks y los módulos

Uno de los puntos clave de la integración dentro de un tema PrestaShop feliz es saber dónde se muestra dicho contenido y dónde se encuentran ubicados los hooks y módulos.

Aquí les mostramos una representación gráfica de dónde se encuentran, para cada página. Usted encontrará:

  • 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

Términos y Condiciones & Elección de Transportista

Elección del módulo de pago

Mapa del Sitio

Foormulario de Contacto

Página de Tiendas (ubicación)

Last updated