---
title: CCC — Combinar, Comprimir y Cachear assets
section: performance
slug: ccc
description: "Sistema CCC de PrestaShop: combinar y comprimir CSS/JS, registerStylesheet/registerJavascript, Media::addJsDef y depuracion de assets."
keywords: prestashop CCC combinar comprimir cachear CSS JS registerStylesheet registerJavascript Media addJsDef assets
last_updated: 2024-12-01
source_url: "https://ayudaprestashop.es/performance/ccc"
---

# CCC — Combinar, Comprimir y Cachear assets

> Sistema CCC de PrestaShop: combinar y comprimir CSS/JS, registerStylesheet/registerJavascript, Media::addJsDef y depuracion de assets.

El sistema CCC (Combine, Compress, Cache) de PrestaShop combina todos los archivos CSS y JS en un solo archivo por tipo, los minifica y los cachea. Reduce el numero de peticiones HTTP y mejora el tiempo de carga.

## Como funciona el CCC

| Funcion | Descripcion | Activar en |
| --- | --- | --- |
| Combine CSS | Une todos los .css en un archivo | BO → Rendimiento → CCC |
| Combine JS | Une todos los .js en un archivo | BO → Rendimiento → CCC |
| Compress CSS/JS | Minifica los archivos combinados | BO → Rendimiento → CCC |
| Apache optimization | Activa mod_expires y mod_deflate en Apache | BO → Rendimiento → Servidores |

## Registrar CSS con registerStylesheet()

*Registrar hojas de estilo correctamente*

```php
<?php

// ── Registrar CSS en el hook correcto ──
public function hookActionFrontControllerSetMedia(): void
{
    // ── CSS basico ──
    $this->context->controller->registerStylesheet(
        'mymodule-main',    // ID unico global — evitar conflictos
        'modules/' . $this->name . '/views/css/front.css',
        [
            'media'    => 'all',      // 'all', 'screen', 'print'
            'priority' => 150,         // Menor numero = se carga antes
            'inline'   => false,       // false = <link rel="stylesheet">, true = <style>
        ]
    );

    // ── CSS solo en paginas especificas ──
    $controller = $this->context->controller->php_self;
    if ($controller === 'product') {
        $this->context->controller->registerStylesheet(
            'mymodule-product',
            'modules/' . $this->name . '/views/css/product.css',
            ['media' => 'all', 'priority' => 200]
        );
    }

    // ── CSS del BO ──
    // hookActionAdminControllerSetMedia en lugar de hookActionFrontControllerSetMedia
}

public function hookActionAdminControllerSetMedia(): void
{
    $this->context->controller->addCSS(
        $this->_path . 'views/css/admin.css', 'all'
    );
    // En el BO se puede usar addCSS() para simplicidad
}
```

## Registrar JS con registerJavascript()

*Registrar scripts JavaScript correctamente*

```php
<?php

public function hookActionFrontControllerSetMedia(): void
{
    // ── JS en el footer (recomendado) ──
    $this->context->controller->registerJavascript(
        'mymodule-main',    // ID unico global
        'modules/' . $this->name . '/views/js/front.js',
        [
            'position'   => 'bottom', // 'head' o 'bottom'
            'priority'   => 200,
            'attributes' => 'defer',  // 'defer', 'async' o '' (ninguno)
            'inline'     => false,    // false = <script src>, true = <script> inline
        ]
    );

    // ── Registrar multiples archivos ──
    $jsFiles = [
        'mymodule-utils'     => 'utils.js',
        'mymodule-carousel'  => 'carousel.js',
        'mymodule-main'      => 'front.js',
    ];

    foreach ($jsFiles as $id => $file) {
        $this->context->controller->registerJavascript(
            $id,
            'modules/' . $this->name . '/views/js/' . $file,
            ['position' => 'bottom', 'priority' => 200]
        );
    }

    // ── Registrar una libreria CDN externa ──
    $this->context->controller->registerJavascript(
        'sweetalert2',
        'https://cdn.jsdelivr.net/npm/sweetalert2@11',
        [
            'position' => 'head',
            'server'   => 'remote',  // Indicar que es una URL externa
        ]
    );
}
```

## Pasar variables PHP a JavaScript

*Media::addJsDef() — variables PHP accesibles en JS*

```php
<?php

// ── addJsDef() inserta variables JS antes del bundle combinado ──
// Compatible con el sistema CCC

public function hookActionFrontControllerSetMedia(): void
{
    // Registrar primero los assets
    $this->context->controller->registerJavascript(
        'mymodule-main',
        'modules/' . $this->name . '/views/js/front.js',
        ['position' => 'bottom']
    );

    // Luego pasar las variables
    Media::addJsDef([
        'mymodule' => [
            'ajax_url'   => $this->context->link->getModuleLink($this->name, 'ajax'),
            'token'      => Tools::getToken(false),
            'i18n' => [
                'add_to_cart'    => $this->trans('Add to cart', [], 'Modules.MyModule.Shop'),
                'added'          => $this->trans('Added!', [], 'Modules.MyModule.Shop'),
                'error'          => $this->trans('An error occurred', [], 'Modules.MyModule.Shop'),
            ],
            'id_customer'  => (int) $this->context->customer->id,
            'currency_iso' => $this->context->currency->iso_code,
            'debug'        => (bool) _PS_MODE_DEV_,
        ]
    ]);
}

// ── En JavaScript, acceder a las variables ──
// const ajaxUrl = mymodule.ajax_url;
// const token   = mymodule.token;
// Swal.fire(mymodule.i18n.error);
```

## Depuracion y limpieza del CCC

*Limpiar cache del CCC*

```bash
# ── Limpiar desde el BO ──
# Parametros Avanzados → Rendimiento → Vaciar cache

# ── Limpiar manualmente ──
rm -rf public/var/cache/*
rm -rf var/cache/*
# Archivos CSS/JS combinados:
rm -rf public/css/*.css
rm -rf public/js/*.js

# ── Regenerar con la consola de Symfony ──
php bin/console cache:clear --env=prod
php bin/console prestashop:clear-cache

# ── En desarrollo: desactivar CCC ──
# BO → Parametros Avanzados → Rendimiento
# → Deshabilitar 'Usar CCC para CSS' y 'Usar CCC para JavaScript'
# → Activar 'Modo debug (desactivar la cache de CSS y JS)'

# ── Problema comun: JS/CSS no actualizado tras despliegue ──
# Solucion: cambiar el numero de version en registerJavascript/registerStylesheet
# o limpiar la cache del CCC
```


---

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