Window Router Error In Shopware storefront plugin

Question

I get the error

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'slice') at XMLHttpRequest.open

when I try to use the function window.router['frontend.api.name'].

The window.router function is supposed to return the url path but here it generates an error. How do I resolve it?

this._client.post(window.router['frontend.api.name'], payload, this._setContent.bind(this));

Answer 1

You have to register that route first. Look at shopware's vendor/shopware/storefront/Resources/views/storefront/layout/meta.html.twig

{% block layout_head_javascript_router %}
{# Register all routes that will be needed in JavaScript to the window.router object #}
<script>
    window.activeNavigationId = '{{ page.header.navigation.active.id }}';
    window.router = {
    'frontend.cart.offcanvas': '{{ path('frontend.cart.offcanvas') }}',
    'frontend.cookie.offcanvas': '{{ path('frontend.cookie.offcanvas') }}',
    'frontend.checkout.finish.page': '{{ path('frontend.checkout.finish.page') }}',
    'frontend.checkout.info': '{{ path('frontend.checkout.info') }}',
    'frontend.menu.offcanvas': '{{ path('frontend.menu.offcanvas') }}',
    'frontend.cms.page': '{{ path('frontend.cms.page') }}',
    'frontend.cms.navigation.page': '{{ path('frontend.cms.navigation.page') }}',
    'frontend.account.addressbook': '{{ path('frontend.account.addressbook') }}',
    'frontend.country.country-data': '{{ path('frontend.country.country.data') }}',
    'frontend.app-system.generate-token': '{{ path('frontend.app-system.generate-token', { name: 'Placeholder' }) }}',
};
    window.salesChannelId = '{{ app.request.attributes.get('sw-sales-channel-id') }}';
</script>
{% endblock %}

Extend that block and add your route to that js object like shopware does