Skip to content
ca es en

← Temas y front-office

El sistema de temas

Cómo funcionan los temas en PrestaShop y el paso de Smarty hacia plantillas modernas.

5 slides 5 min de lectura

  1. PrestaShop · Temes

    El sistema de temas

    Cómo se construye la cara visible de la tienda.

    PrestaShop · Temas y front-office arlaf.dev

  2. Smarty, el motor de plantillas

    El front-office se renderiza con plantillas .tpl de Smarty. El tema por defecto, classic, es la base recomendada para partir.

    PrestaShop · Temas y front-office arlaf.dev

  3. Anatomía de un tema

    Un tema es una carpeta con una estructura previsible.

    • templates/ — las plantillas .tpl (header, footer, producto…).
    • assets/ — CSS, JS e imágenes, a menudo compilados desde SASS.
    • config/theme.yml — el manifiesto del tema.
    • modules/ — sobrescrituras de plantillas de módulos.
    PrestaShop · Temas y front-office arlaf.dev

  4. El manifiesto theme.yml

    name: el-meu-tema
display_name: El meu tema
version: 1.0.0
author:
  name: Arnau
global_settings:
  configuration:
    PS_IMAGE_QUALITY: png
    PrestaShop · Temas y front-office arlaf.dev

  5. Hooks: dónde se engancha el contenido

    Las plantillas dejan puntos (hooks) donde los módulos inyectan su HTML. Por eso el tema y los módulos encajan sin tocarse entre ellos.

    PrestaShop · Temas y front-office arlaf.dev
Leer la nota completa

El front-office —tot el que veu el client— el dibuixa el tema. Entendre com està fet és el primer pas per personalitzar-lo sense trencar res.

Smarty i el tema classic

PrestaShop renderitza les pàgines amb Smarty, un motor de plantilles .tpl. El tema que ve de sèrie, classic, és net i ben estructurat: és la base recomanada per construir-hi a sobre en lloc de partir de zero.

Què hi ha dins d’un tema

  • templates/ — les plantilles .tpl de cada pàgina i bloc.
  • assets/ — CSS, JS i imatges. En els temes moderns, el CSS surt de SASS compilat amb un pipeline (webpack), no s’escriu a mà el CSS final.
  • config/theme.yml — el manifest: nom, versió, configuració per defecte i els hooks que el tema fa servir.
  • modules/ — aquí el tema pot sobreescriure plantilles de mòduls concrets.

Hooks: la cola entre tema i mòduls

Les plantilles del tema deixen hooks, punts on els mòduls injecten el seu HTML (un carrusel, un bloc de productes, un formulari…). Aquesta és la idea central de PrestaShop: el tema defineix l’estructura i els hooks, i els mòduls hi aporten contingut, sense que cap dels dos hagi de conèixer el codi de l’altre. Quan ho interioritzes, personalitzar el front deixa de fer por.