Skip to content
ca es en

← Temes i front-office

El sistema de temes

Com funcionen els temes a PrestaShop i el pas de Smarty cap a plantilles modernes.

5 slides 5 min de lectura

  1. PrestaShop · Temes

    El sistema de temes

    Com es construeix la cara visible de la botiga.

    PrestaShop · Temes i front-office arlaf.dev

  2. Smarty, el motor de plantilles

    El front-office es renderitza amb plantilles .tpl de Smarty. El tema per defecte, classic, és la base recomanada per partir.

    PrestaShop · Temes i front-office arlaf.dev

  3. Anatomia d'un tema

    Un tema és una carpeta amb una estructura previsible.

    • templates/ — les plantilles .tpl (header, footer, producte…).
    • assets/ — CSS, JS i imatges, sovint compilats des de SASS.
    • config/theme.yml — el manifest del tema.
    • modules/ — sobreescriptures de plantilles de mòduls.
    PrestaShop · Temes i front-office arlaf.dev

  4. El manifest 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 · Temes i front-office arlaf.dev

  5. Hooks: on s'enganxa el contingut

    Les plantilles deixen punts (hooks) on els mòduls injecten el seu HTML. Per això el tema i els mòduls encaixen sense tocar-se entre ells.

    PrestaShop · Temes i front-office arlaf.dev
Llegir 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.