How to use JS router from a a Module?

[jolelievre]

In the migrated page we use FOSRoutingBundle to use the Symfony routes in the frontend (JavaScript).

Example:

this.router.generate('admin_addresses_edit', {
        addressId: address.addressId,
        liteDisplaying: 1,
        submitFormAjax: 1,
      });

We need to document how to use this Router from a module as well. Besides it would be great if modules could add their own routing data, see this issue https://github.com/PrestaShop/PrestaShop/issues/19473

Depending on the state of the core issue when this doc is redacted, also explain how to add routing from your module

[zuk3975]

In the migrated page we use FOSRoutingBundle to use the Symfony routes in the front office.

in the Back Office (but the front-end part)* Not the front office :v:

[matks]

In the migrated page we use FOSRoutingBundle to use the Symfony routes in the front office.

in the Back Office (but the front-end part)* Not the front office ✌️

Fixed 😊 thanks

[matks]

Demo module merged https://github.com/PrestaShop/example-modules/tree/master/demojsrouting

[tivuno]

@matks @jolelievre everything is fine with the dummy module but it does not ADD new route. It uses an existing one 🤔

[valquino]

Demo module merged https://github.com/PrestaShop/example-modules/tree/master/demojsrouting

From Prestashop 1.7.8 I have the exact same problem like @tivuno says. Seems the dummy module works for core routes (existing routes in Prestashop). But unfortunately. for customs routes created within a module, it doesn't work.

Here my javascript file:

const Router = () => {
    let router = null;
    if (typeof window.prestashop.component !== 'undefined') { 
        window.prestashop.component.initComponents(['Router']); 
        router = window.prestashop.instance.router;
    }
    return router;
};

$('select').on('change', function() {
        let value = $(this).val();
        const route = Router().generate('my_custom_route', { id: value});
        $.get(route, function(data) {
            alert(data);
        });
});

Then my routes file:

my_custom_route:
    path: /mymodule/{id}/add
    methods: [GET]
    defaults:
      _controller: 'ModuleName\Controller\Admin\AdminController::getThings'
      _legacy_controller: 'AdminController'
      _disable_module_prefix: true
    options:
      expose: true

Even follow what the dev documentation provided here: https://devdocs.prestashop-project.org/1.7/modules/concepts/controllers/admin-controllers/route-generation/#javascript-routes

Then i did php bin/console fos:js-routing:dump --format=json from the console and put the generated json file in admin-dev/themes/new-theme/js/fos_js_routes.json. Now i see my_custom_route declared in this json file.

But i have the following error:

Uncaught Error: The route "my_custom_route" does not exist.

If i call my_custom_route in a php controller it's working. Only calling the route in javascript not working. So i don't know what i can do more. If someone have a solution, please :)

[rboadalabelgrup]

Is there already a solution to be able to use the routing component with URLs declared inside a module?

A solution can be to use the hook actionAdminControllerSetMedia to add the URL with Media::addJsDef to be able to use it:

public function hookActionAdminControllerSetMedia()
{
    Media::addJsDef([
        'js_route' => $this->get('router')->generate('my_module_route_in_routes_file'),
    ]);
}