Router JavaScript en el Back Office de PrestaShop

// 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']);
  }
});

// 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/

// 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));

/**
 * 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'
);

<?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'),
        ],
    ]);
}

// 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');
  }
});

// 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);