🗜️ CCC — Combinar, Comprimir y Cachear assets

Actualizado: 2024-12-01

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

FuncionDescripcionActivar en
Combine CSSUne todos los .css en un archivoBO → Rendimiento → CCC
Combine JSUne todos los .js en un archivoBO → Rendimiento → CCC
Compress CSS/JSMinifica los archivos combinadosBO → Rendimiento → CCC
Apache optimizationActiva mod_expires y mod_deflate en ApacheBO → 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
Descargar en Markdown Pensado para pegar en ChatGPT, Claude u otra IA. Incluye solo el contenido de esta pagina.