---
title: Media class — gestion de assets en front
section: front
slug: media-class
description: "Clase Media en PrestaShop: addJsDef, addCSS, addJS, gestion de assets desde controllers y modulos en el front office."
keywords: prestashop Media class addJsDef addCSS addJS assets front controller modulo JavaScript CSS
last_updated: 2024-12-01
source_url: "https://ayudaprestashop.es/front/media-class"
---

# Media class — gestion de assets en front

> Clase Media en PrestaShop: addJsDef, addCSS, addJS, gestion de assets desde controllers y modulos en el front office.

La gestion de assets (CSS y JS) en PrestaShop 1.7+ usa registerStylesheet() y registerJavascript() en los controllers, reemplazando los antiguos addCSS/addJS. Media::addJsDef permite pasar variables PHP a JavaScript.

## registerStylesheet y registerJavascript

*Registrar assets desde un modulo*

```php
<?php

// ── Hook recomendado para registrar assets ──
public function hookActionFrontControllerSetMedia(): void
{
    // ── CSS ──
    $this->context->controller->registerStylesheet(
        'mymodule-style',                                    // ID unico
        'modules/' . $this->name . '/views/css/front.css',   // Path relativo
        [
            'media'    => 'all',        // all, screen, print
            'priority' => 150,          // Orden de carga (default 50)
            'server'   => 'local',      // local o remote
        ]
    );

    // CSS remoto (CDN)
    $this->context->controller->registerStylesheet(
        'mymodule-font-awesome',
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css',
        ['server' => 'remote', 'priority' => 10]
    );

    // ── JavaScript ──
    $this->context->controller->registerJavascript(
        'mymodule-front',
        'modules/' . $this->name . '/views/js/front.js',
        [
            'position'  => 'bottom',    // head o bottom
            'priority'  => 150,
            'attribute' => 'defer',     // defer, async, o vacio
        ]
    );

    // ── Quitar un asset registrado por otro modulo/tema ──
    $this->context->controller->unregisterJavascript('some-other-script-id');
    $this->context->controller->unregisterStylesheet('some-other-style-id');
}
```

## Media::addJsDef

*Pasar variables PHP a JavaScript*

```php
<?php

// ── Desde un hook o controller ──
public function hookActionFrontControllerSetMedia(): void
{
    // Pasar variables al scope global de JS
    Media::addJsDef([
        'myModuleAjaxUrl' => $this->context->link->getModuleLink(
            $this->name, 'ajax', [], true
        ),
        'myModuleToken'   => Tools::getToken(false),
        'myModuleConfig'  => [
            'animationSpeed' => 300,
            'autoplay'       => true,
            'lang'           => $this->context->language->iso_code,
        ],
    ]);
}

// ── En el JavaScript del front ──
// Las variables estan disponibles globalmente:
// myModuleAjaxUrl → "https://tutienda.com/module/mymodule/ajax"
// myModuleToken   → "a1b2c3d4"
// myModuleConfig  → {animationSpeed: 300, autoplay: true, lang: "es"}

// Ejemplo de uso en JS:
fetch(myModuleAjaxUrl, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
        token: myModuleToken,
        action: 'getProducts'
    })
}).then(r => r.json()).then(data => {
    console.log(data);
});

// ── IMPORTANTE: las variables se renderizan como ──
// <script>var myModuleAjaxUrl = "..."; var myModuleConfig = {...};</script>
// Por lo que nombres demasiado genericos pueden colisionar
```

## Condicional por pagina

*Cargar assets solo en paginas especificas*

```php
<?php

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

    // Solo en pagina de producto
    if ($page === 'product') {
        $controller->registerJavascript(
            'mymodule-product',
            'modules/' . $this->name . '/views/js/product.js',
            ['position' => 'bottom']
        );
    }

    // Solo en checkout (order)
    if ($page === 'order' || $page === 'cart') {
        $controller->registerStylesheet(
            'mymodule-checkout',
            'modules/' . $this->name . '/views/css/checkout.css'
        );
    }

    // Solo en categoria
    if ($page === 'category') {
        $controller->registerJavascript(
            'mymodule-category-filter',
            'modules/' . $this->name . '/views/js/filter.js',
            ['position' => 'bottom', 'attribute' => 'defer']
        );
    }

    // En TODAS las paginas excepto checkout
    if ($page !== 'order') {
        $controller->registerJavascript(
            'mymodule-global',
            'modules/' . $this->name . '/views/js/global.js',
            ['position' => 'bottom']
        );
    }
}
```

## Inline CSS y JS critico

*Assets inline para rendimiento*

```php
<?php

// ── CSS inline critico ──
$this->context->controller->registerStylesheet(
    'mymodule-critical',
    'modules/' . $this->name . '/views/css/critical.css',
    [
        'inline'   => true,    // Incluye el CSS directamente en el HTML
        'priority' => 1,       // Muy alta prioridad
    ]
);

// ── JS inline ──
$this->context->controller->registerJavascript(
    'mymodule-config-inline',
    'modules/' . $this->name . '/views/js/config.js',
    [
        'inline'   => true,
        'position' => 'head',
        'priority' => 1,
    ]
);

// ── Alternativa: inyectar HTML directo en <head> ──
public function hookDisplayHeader(): string
{
    $cssVars = ':root { --mymodule-primary: '
        . Configuration::get('MYMODULE_COLOR') . '; }';

    return '<style>' . $cssVars . '</style>';
}
```


---

*Fuente: [https://ayudaprestashop.es/front/media-class](https://ayudaprestashop.es/front/media-class). Version Markdown generada automaticamente para consumo por LLMs.*