[SOLVED] Sage 9 + WPML - Js routes not loading in other languages

[ierpe]

Hi

I am using WPML on a Bedrock site with Sage9, and the js routes aren’t loading on my english pages (default is french)

I thought Js routes were loaded regarding the body classes, which are the same between my pages.

Exemple for my homepage, in french, body classes are:

page-template page-template-homepage homepage page page-id-58 home app-data index-data singular-data page-data page-58-data page-home-data homepage-data

In my english version of the same page:

page-template page-template-homepage homepage page page-id-677 home app-data index-data singular-data page-data page-677-data page-home-data homepage-data

I can see only the page ID is changing, but the rest of the classes are the same.

I even tried to create a second route in my main.js:

import home from './routes/home';
import pageId677 from './routes/home';

    /** Populate Router instance with DOM routes */
    const routes = new Router({
    //...
      // Home page
      home,
      pageId677,
    //...
    });

but it’s not working.

I have the same problem with other english pages (for instance, for a taxonomy that has the body class taxChallengeFamily and another regular page)

I’m using a console.log to see if the route is loaded (among other things that do not work), so I am sure that they are not loaded.

Any ideas?

[strarsis]

language independent body classes - WPML

[ierpe]

Sorry but how has this anything to do with js routing in Sage9 ?

As I mentioned, the body classes are similar between French and English, so could you elaborate?
Posting a link without any explanation in how this could sort my problem is not helpful at all.

[Twansparant]

You shouldn’t use page id’s as body class (they change for translations) but the template names! That way the routes are loaded for every page (incl. translations) using that template.

[pauloc]

What I use to do is to add the default language class to the body. I do it by adding this code to the body_class filter located on app/filters.php:

    if( function_exists( 'pll_current_language' ) ){
      global $post;
      $default_lang = pll_default_language();
      if( pll_current_language() !== $default_lang ){
        if ( $post ) {
            $translated_post_id = pll_get_post( $post->ID, $default_lang );
            $classes[] = basename( get_permalink($translated_post_id) );
        }
      }
    }

Take into account that this code is intended to be used with Polylang, you should transform it to WPML.

[Anton]

Seems like its just a fronted developer hired to work with wordpress, not php developer who trying to figure out how to change something in template trough javascript, and this is why his question its hard to understand even by him self…

I hope i am wrong and i wonder to see how the js routes works in wordpress.

That similar clases this is a normal behavior for every wordpress pages, what multilanguage is doing its only change the text content, not classes and some times not urls (if different domain in use).

You need to use code in php (not in javascript) to change this kind of stuff, for example hook in to the necessary filter to change class or other stuff. Like in pauloc example.

[Twansparant]

This seems correct, is your main.js loaded properly? Did you run yarn build:production to test it because that strips out console logs

[ierpe]

I eventually found that a (usually non blocking) error in the common.js was stopping the Router.js from working.

That error happened only on my English homepage because of a missing selector in the English version… The router was working in fact, the problem was somewhere else.

Thanks for your help! Somehow it put me on the right track (Compared to most other comments which were not helpful or offensive…)

Cheers