---
title: Router JavaScript en el Back Office de PrestaShop
section: trucos
slug: js-routing
description: Como usar el componente Router de PrestaShop JavaScript para generar URLs de rutas Symfony dinamicamente en el Back Office. Inicializacion, generate(), parametros y fallback.
keywords: prestashop javascript router generate admin backoffice symfony rutas dinamicas ajax
last_updated: 2024-12-01
source_url: "https://ayudaprestashop.es/trucos/js-routing"
---

# Router JavaScript en el Back Office de PrestaShop

> Como usar el componente Router de PrestaShop JavaScript para generar URLs de rutas Symfony dinamicamente en el Back Office. Inicializacion, generate(), parametros y fallback.

El **componente Router** de PrestaShop permite generar URLs de rutas Symfony registradas directamente desde JavaScript. Es esencial para hacer peticiones AJAX a endpoints del BackOffice sin hardcodear rutas que pueden cambiar.

> **[TIP] Disponible desde PS 1.7.6+**
>
> El componente `Router` de `prestashop.instance` esta disponible en PrestaShop 1.7.6 en adelante. Para versiones anteriores, usa el mecanismo de fallback con variables PHP generadas en el template.

## Inicializar el Router

*Inicializar el componente Router*

```javascript
// Esperar a que el DOM este listo
$(function() {
  // Verificar que el sistema de componentes existe
  if (typeof window.prestashop !== 'undefined' &&
      typeof window.prestashop.component !== 'undefined') {
    window.prestashop.component.initComponents(['Router']);
  }
});

// Alternativa: escuchar el evento de componentes listos
document.addEventListener('DOMContentLoaded', () => {
  if (window.prestashop?.component?.initComponents) {
    window.prestashop.component.initComponents(['Router']);
  }
});
```

## Generar URLs con generate()

*Generar URLs de rutas del core*

```javascript
// El nombre de la ruta es el nombre Symfony (routes.yml)
const url = window.prestashop.instance.router.generate('admin_customers_index');
// → /admin123/sell/customers/

const orderUrl = window.prestashop.instance.router.generate('admin_orders_index');
// → /admin123/sell/orders/

const productUrl = window.prestashop.instance.router.generate('admin_products_v2_index');
// → /admin123/sell/catalog/products/
```

## Pasar parametros a la ruta

*Rutas con parametros — CRUD y busqueda*

```javascript
// Ruta con parametro ID
const editUrl = window.prestashop.instance.router.generate(
  'admin_product_form',
  { id: 123 }          // segundo argumento: objeto con parametros
);
// → /admin123/sell/catalog/products/123/edit

// Busqueda de clientes
const searchUrl = window.prestashop.instance.router.generate(
  'admin_customers_search',
  { sf_action: 'search', sf_simple_filter: 'john@example.com' }
);

// Luego hacer la peticion AJAX
fetch(editUrl)
  .then(r => r.json())
  .then(data => console.log(data));
```

## Mecanismo de fallback

*Fallback seguro para versiones antiguas*

```javascript
/**
 * Genera una ruta de forma segura con fallback.
 * @param {string} routeName - Nombre de la ruta Symfony
 * @param {Object} params - Parametros de la ruta
 * @param {string} fallback - URL de fallback si el router no esta disponible
 * @returns {string}
 */
function generateRoute(routeName, params = {}, fallback = '#') {
  try {
    if (window.prestashop?.instance?.router?.generate) {
      return window.prestashop.instance.router.generate(routeName, params);
    }
  } catch (e) {
    console.warn('PS Router not available:', e);
  }
  return fallback;
}

// Uso:
const url = generateRoute(
  'admin_orders_view',
  { orderId: 42 },
  '/admin/sell/orders/42'
);
```

## Exponer rutas del modulo a JS

*Pasar URLs desde PHP al JS del modulo*

```php
<?php
// En el hook actionAdminControllerSetMedia o en el template Twig
public function hookActionAdminControllerSetMedia(array $params): void
{
    // Inyectar las URLs generadas por PHP en el JS
    Media::addJsDef([
        'myModuleUrls' => [
            'save'   => $this->context->link->getAdminLink('AdminMyModule', true, [], ['action' => 'save']),
            'delete' => $this->context->link->getAdminLink('AdminMyModule', true, [], ['action' => 'delete']),
            'list'   => $this->context->link->getAdminLink('AdminMyModule'),
        ],
    ]);
}
```

*Usar las URLs inyectadas desde PHP*

```javascript
// myModuleUrls esta disponible globalmente gracias a Media::addJsDef
console.log(myModuleUrls.save);  // URL de guardado con token

fetch(myModuleUrls.save, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ data: 'value' }),
})
.then(r => r.json())
.then(result => {
  if (result.success) {
    showSuccessAlert('Guardado correctamente');
  }
});
```

## Debug en consola

*Herramientas de debug en la consola del navegador*

```javascript
// Ver todas las rutas disponibles en el Router
console.log(prestashop.instance.router);

// Probar una ruta directamente
prestashop.instance.router.generate('admin_orders_index');

// Ver el objeto completo de prestashop
console.log(window.prestashop);

// Listar todos los componentes disponibles
console.log(prestashop.component);
```


---

*Fuente: [https://ayudaprestashop.es/trucos/js-routing](https://ayudaprestashop.es/trucos/js-routing). Version Markdown generada automaticamente para consumo por LLMs.*