Multilingual website

[kasper]

Hi!

I wan’t to add multilingual support to my site, so I have cloned my current website into a new one, and changed the frontity.settings.js file to the following:

const settings = 

[  

  {

    "name": "norwegian",

    "state": {

      "frontity": {

        "url": "https://aamodtgroup2.vercel.app",

        "title": "Aamodt Group",

        "description": "Konsulenter innen utvikling og drift"

      },

      "theme": {

        "menuUrl": "menu",

        "lang": "no"

      }

    },

    "packages": [

      {

        "name": "@aamodtgroup/agtech",

      },

      {

        "name": "@frontity/wp-source",

        "state": {

          "source": {

            "url": "https://backend2.aamodtgroup.com",

            "homepage": "/hjem",

          }

        }

      },

      "@frontity/tiny-router",

      "@frontity/html2react"

    ]

  },

  {

    "name": "english",

    "match": [".*aamodtgroup2.vercel.app\/en(\/.*)?$"], 

    "state": {

      "frontity": {

        "url": "https://aamodtgroup2.vercel.app/en",

        "title": "Aamodt Group",

        "description": "Consultants within development and operations"

      },

      "theme": {

        "menuUrl": "menu-en",

        "lang": "en"

      }

    },

    "packages": [

      {

        "name": "@aamodtgroup/agtech",

      },

      {

        "name": "@frontity/wp-source",

        "state": {

          "source": {

            "url": "https://backend2.aamodtgroup.com",

            "homepage": "/home"

          }

        }

      },

      "@frontity/tiny-router",

      "@frontity/html2react"

    ]

  }

];

export default settings;

The site is live here:

https://aamodtgroup2.vercel.app

Repo:

aamodtgroup/aamodtgroup-multilingual

As you can see, the Norwegian part of the site works fine, but if you click on EN in the top right corner, it can’t find the homepage of the english version. Another problem is that on the EN version, the Link component does not seem to be working, it just takes you to the wp-install links. In the NO verison it works fine, but I had the same problem there as well, untill I removed the “match” prop from the Norwegian package.

The plugin I use is Polylang, and it is set so that the urls of the page adds a /en for the EN version.

Have I done something wrong with the setup?

[Hussein]

Hi, I was having the same problem. You have to use Subdirectory param to the state. I have an example here:

Home in second site returns a 404 in Multisite instalation - Multilanguage

Hi! After some research I found here that we need to add the subdirectory param to the source of the secondary site: "name": "@frontity/wp-source", "state": { "source": { "api": "https://alejandro.inmo.cloud/multilenguage/es/wp-json", "homepage": "homepage", "subdirectory": "/es", } } This would solve the first problem. And about the second problem, I found that at this time we can not change the publicPath dynamically at runtime. And this feature is still in de…

[kasper]

Hi @Hussein!

I tried this, found the post you linked a couple of days ago. But it actually only made things worse. Pretty frustrated right now!

But thank you for trying!

[Hussein]

Hi Kasper,
I have tried using our multilingual WordPress test installation and seems to be working:
Multilanguage – Just another WordPress site && Multilanguage – Just another WordPress site

We used the plugin qTranslate XT but any other solution may work as well, like multisite or WPML. Your Polylang installation should be working as well. Im not sure why is not working. (In the vercel app, the single entries are not working aswell, maybe that’s the reason…)

I had to do few little changes to have it working but here you have an example of a working configuration:

husseincak/aamodtgroup-multilingual

Please, take in mind that in the language switch, you have to send the user to /en/ instead of /en/home/

        <Box>
            <Switch>
                <a href="/en/" className="toggleicon"  when={lang === "nb"}>EN</a>
                <a href="/" className="toggleicon">NB</a>
            </Switch>
        </Box>

and the same with the logo link and any other hardcoded link:

  const TopNavbar = ({ state }) => {
  const { mode, lang } = state.theme;
  const homeUrl = (lang == "nb")? "/" : "/en/";
  
  return (
    <>
      <TopNavContainer>
          <Logo>
            <Link link={homeUrl} alt="Forside link">
              <img src={mode === 'light' ? logo : darkLogo} alt="logo" width="150px" height="50px" />
            </Link>
          </Logo>
          <div className="buttons">
            <Toggle />
            <MobileMenu />
          </div>
      </TopNavContainer>
    </>
  );

[kasper]

Hi @Hussein !

Still does not work with Polylang. I think I know why you managed to make it work, it seems like the plugin that you use make 2 rest api urls, one for the normal page, and a new one for the other lanuguage. Polylang does not make a different rest api url for each language.