---
title: Gestion de assets en temas PrestaShop
section: themes
slug: assets
description: "Como gestionar CSS, JavaScript e imagenes en temas PrestaShop: theme.yml, assets.yml, registerStylesheet, registerJavascript, CCC y optimizacion."
keywords: prestashop tema assets css javascript theme.yml assets.yml registerStylesheet registerJavascript CCC
last_updated: 2024-12-01
source_url: "https://ayudaprestashop.es/themes/assets"
---

# Gestion de assets en temas PrestaShop

> Como gestionar CSS, JavaScript e imagenes en temas PrestaShop: theme.yml, assets.yml, registerStylesheet, registerJavascript, CCC y optimizacion.

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');
    }
}
```


---

*Fuente: [https://ayudaprestashop.es/themes/assets](https://ayudaprestashop.es/themes/assets). Version Markdown generada automaticamente para consumo por LLMs.*