paginas web barcelona

Centro Web Barcelona

Soluciones en Internet

Plantillas en Prestashop



Como crear una plantilla en prestashop

Prestashop se basa en un motor de plantillas muy conocido llamado Smarty que permite a los desarrolladores web crear un tema nuevo para este CMS si se tienen un mínimo de conocimientos técnicos.

La composición de las plantillas de Prestashop está compuesta por un conjunto de archivos, su organización principal es la siguiente:

centro web prestashop

  • Todas las plantillas están compuestas de archivos y subcarpetas que residen en la carpeta raíz raíz /themes.
  • Los archivos de plantilla son archivos .tpl y están enlazados a uno o varios archivos CSS, a veces Javascript y las correspondientes imágenes.
  • En la carpeta de cada plantilla hay una imagen preview que permite pre visualizar el tema desde el backoffice y elegirlo si es el caso.
  • En la carpeta /lang se encuentran las traducciones del template. Para que se pueda acceder a ellos desde el backoffice debe configurarse en CHMOD 666. Para manejar las traducciones hay que tener en cuenta el sistema que utiliza Prestashop, veremos variables de la siguiente forma:

{l s='My Text'}

 

 

 

Pasos a seguir para personalizar un tema

  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. Por ejemplo MyStoreTheme.
  3. En la carpeta del tema personalizado, ubique la carpeta /css.
  4. Abra el archivo global.css y cámbielo de acuerdo a sus necesidades. Aquí estará limitado por su creatividad – y su conocimiento de CSS.
  5. Las imágenes nuevas o modificadas deben ser colocados en carpeta del nuevo tema /img (e.j., /themes/MyStoreTheme/img).
  6. 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.
  7. Diríjase a la sección “Temas” de la sub-pestaña “Aspecto” en la pestaña “Preferencias” de su back office.
  8. Seleccione el nuevo tema y haga clic en Guardar

 

tienda online barcelonaSi deseas hacer una modificación profunda de una plantilla en Prestashop deberás tener cuidado con los módulos deendientes y si es necesario modificar los estilos CSS correspondientes a estos archivos.

Smarty separa el código HTML de PHP. En una plantilla veremos variables y funciones en PHP smarty y código HTML en su versiçon XHTML.

El código HTML se modifica en sus archivos .tpl. Es importante saber que l parámetro $smarty->force_compile del archivo /config/smarty.config.inc.php debe estar en “true” para que los cambios se reflejen.

Sobre los módulos: Los archivos tpl de los módulos se encuentran en la carpeta /modules/nombre_del_módulo/nombre_del_módulo.tpl, para modificar el contenido y la estructura de los mismos hay que salir de la carpeta /themes y entrar en la carpeta de cada módulo; aunque el CSS se sigue cambiando desde global.css, a no ser que el módulo tenga un .css dentro de su carpeta.

Para las traducciones el archivo es.php es generado automáticamente y no se modifica manualmente.