🗜️ 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
| 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
Descargar en Markdown
Pensado para pegar en ChatGPT, Claude u otra IA. Incluye solo el contenido de esta pagina.