PWA Issue with content creator when changing locales and Navigation service: Too many redirects

Author: irvin_garcia
Publication Date: 11/27/2023 17:55

We’re working on our new headless project and we’re using the Crownpeak PWA Template (https://github.com/e-Spirit/crownpeak-pwa-template).

To set it up we have a small project in our dev instance as well as the Smart Living project installed, while setting it up we found a couple issues:

1. The FirstSpirit Content Creator left navigation is not 100% consistently in sync with the application. When switching languages on the PWA page the change is not reflected in the site navigation or the URL but sometimes it works well, we tested this with the Smart Living project as well as with our own project. We tried debugging the template but so far we haven’t had luck finding the issue (more details below)
2. When running the application with a bigger project, the Navigation API returns an error of too many redirects whenever we load the project. We haven't found a way to reliable debug the navigation service to find the issue, any suggestions?

More details about 1:

In the PWA Crownpeak template are two languages (EN and DE) supported, and switching the languages in the top right corner of the Content Creator Tool will automatically update the language of the content on the screen.

In our PWA test app, which is based on the Crownpeak template, we have to support 15 different language_locale combinations.

If we select the languages, it sometimes updated the content on the screen but mostly not everything consistently.

Console logging the actual selected language will show that the "correct" selected language had been chosen, but the content doesn't update accordingly.

We were running the PWA locally and were changing the languages through the LanguageSwitch component from the template. Often the navigation and other links were updating to the correct language (seemingly calling the navigation API correctly) but  the content itself is not updating.

We have tried using a hardcoded array of supported languages in the locale.ts file as suggested in the documentation (https://github.com/e-Spirit/crownpeak-pwa-template/blob/main/docs/pages/Composables.adoc#locale).

We also had a look into using the getAvailableLocales helper functionof the javascript-content-api-library (https://github.com/e-Spirit/javascript-content-api-library/#helpers) instead of the hardcoded array.

Test cases:

Using Our Project

Case 1 (not working as expected)
1. Open any localized page
2. Change language using the header language selector

Result
1. Header content changes to new locale
2. Other sections in the page remain unchanged
3. URL remains unchanged

Case 2 (not working as expected)
1. Open any localized page
2. Change language using the Content Creator left side bar

Expected Result
1. Header content changes to new locale
2. Other sections in the page change to new locale
3. URL changes to new locale
4. Any subsequent navigation or page refresh keeps the new locale

Actual Result
1. Header remains unchanged
2. Other sections in the page remain unchanged
3. URL changes to reflect the selected locale but
4. Any subsequent navigation or page refresh keeps the previous locale

Using SmartLiving project

Case 1 (working properly)
1. Open any localized page
2. Change language using the header language selector

Result as expected
1. Whole PWA refresh
2. Header content changes to new locale
3. Other sections in the page change to new locale
4. Side navigation syncs to new locale
5. URL changes to new locale
6. Any subsequent navigation or page refresh keeps the new locale

Case 2 (not working as expected)
1. Open any localized page
2. Change language using the Content Creator left side bar

Expected Result
1. Header content changes to new locale
2. Other sections in the page change to new locale
3. URL changes to new locale
4. Any subsequent navigation or page refresh keeps the new locale

Actual Result
1. Header remains unchanged
2. Other sections in the page remain unchanged
3. URL changes to reflect the selected locale but any subsequent navigation or page refresh keeps the previous locale

Do you have any hint on why our content would not update according to the language selection? 

We have the languages with locales as follows:

EN_GB,

DE_DE,

DE_CH,

DE_AT,

FR_FR,

FR_BE,

FR_CH,

ES_ES,

NL_NL,

NL_BE,

IT_IT,

IT_CH,

PT_PT,

RU_RU,

EN_ZA

Do you know what could be causing this issues? Any hint would be greatly appreciated.