🎨 Gestion de assets en temas PrestaShop

Actualizado: 2024-12-01

PrestaShop gestiona los assets (CSS, JS) a traves de un sistema centralizado que permite combinar y comprimir archivos (CCC). Los temas pueden declarar sus assets en theme.yml y los modulos los registran via hooks o metodos del FrontController.

#Declarar assets en theme.yml

theme.yml — declaracion de assets del tema

yaml

name: mytheme
display_name: My Custom Theme
version: 1.0.0
author:
  name: gmartos.es
  url: https://gmartos.es

meta:
  compatibility:
    from: 8.0.0
    to: ~

global_settings:
  # Assets globales — se cargan en TODAS las paginas
  stylesheets:
    - id: theme-main
      path: assets/css/theme.css
      media: all
      priority: 50
  javascript:
    - id: theme-main
      path: assets/js/theme.js
      position: bottom
      priority: 50

# Assets por pagina (cargados condicionalmente)
page_specific_assets:
  product:
    stylesheets:
      - id: product-page
        path: assets/css/product.css
        priority: 60
    javascript:
      - id: product-page
        path: assets/js/product.js
        position: bottom
  checkout:
    javascript:
      - id: checkout
        path: assets/js/checkout.js
        position: bottom

#Registrar CSS/JS desde un modulo

registerStylesheet y registerJavascript en el FrontController

php

<?php

// Desde un FrontController del modulo
public function setMedia(): bool
{
    parent::setMedia();

    // ── CSS ──
    $this->registerStylesheet(
        'mymodule-main',                           // ID unico
        'modules/mymodule/views/css/front.css',    // path relativo a /themes/mytheme/ o PS root
        [
            'media'    => 'all',   // all, screen, print, ...
            'priority' => 200,
        ]
    );

    // ── JS ──
    $this->registerJavascript(
        'mymodule-main',                           // ID unico
        'modules/mymodule/views/js/front.js',      // path
        [
            'position' => 'bottom',  // head | bottom
            'priority' => 200,
        ]
    );

    // ── DESDE UN HOOK (hookActionFrontControllerSetMedia) ──
    return true;
}

// Desde un hook — para cargar assets desde mymodule.php
public function hookActionFrontControllerSetMedia(): void
{
    // Solo en paginas de producto
    if ($this->context->controller->php_self === 'product') {
        $this->context->controller->registerStylesheet(
            'mymodule-product',
            'modules/' . $this->name . '/views/css/product.css'
        );
    }
}

#Combine Compress Cache (CCC)

CCC (Combine, Compress, Cache) es el sistema de PrestaShop para combinar multiples archivos CSS/JS en uno solo y comprimirlos. Reduce las peticiones HTTP y el peso de las paginas.

Opcion CCC	Ubicacion en BO	Efecto
Combinar CSS	Rendimiento > CCC	Une todos los CSS en un solo archivo
Combinar JS	Rendimiento > CCC	Une todos los JS en un solo archivo
Comprimir CSS	Rendimiento > CCC	Minifica el CSS combinado
Comprimir JS	Rendimiento > CCC	Minifica el JS combinado
Cache de Smarty	Rendimiento	Cachea los templates compilados

⚠️

Desactivar CCC durante el desarrollo

Con CCC activo, los cambios en CSS/JS pueden no reflejarse de inmediato. Desactivalo durante el desarrollo y reactivalo en produccion. En produccion, borra la cache desde BO > Rendimiento > Borrar cache.

#Assets condicionales por pagina

Cargar CSS/JS solo en paginas especificas

php

<?php

public function hookActionFrontControllerSetMedia(): void
{
    $controller = $this->context->controller;
    $pageName   = $controller->php_self ?? '';

    // Solo en ficha de producto
    if ($pageName === 'product') {
        $controller->registerStylesheet('mymodule-product', 'modules/mymodule/views/css/product.css');
        $controller->registerJavascript('mymodule-product', 'modules/mymodule/views/js/product.js', ['position'=>'bottom']);
    }

    // Solo en checkout
    if ($pageName === 'order') {
        $controller->registerJavascript('mymodule-checkout', 'modules/mymodule/views/js/checkout.js', ['position'=>'bottom']);
    }

    // Solo en paginas de listado (category, search, etc.)
    if (in_array($pageName, ['category', 'search', 'new-products', 'best-sales'])) {
        $controller->registerStylesheet('mymodule-listing', 'modules/mymodule/views/css/listing.css');
    }
}

← Anterior Variables Smarty globales Siguiente → Child themes

Descargar en Markdown Pensado para pegar en ChatGPT, Claude u otra IA. Incluye solo el contenido de esta pagina.