Multilanguage site and Polylang/WPML support

🙋Get Help
1

Hi guys,
I’m experiencing some difficulties in implementing a multilanguage website. I DON’T want to create a multisite, just handle two languages. I tried with Polylang and WPML without success.

I’ve been looking for websites with effective multilanguage support to better understand but seems no website created with frontity has more than one language.

My main problem is about reaching both languages. Setting 2 different website URLs with regex for matching the “/en” or in my case the it version (without using “/it” in the URL being the default option), just return me 404 on calling the /en version.

Here’s my frontity.settings.js:

const settings = [
  {
    name: "test ita",
    match: ["^.*(?:localhost:3000)((?!(/en))).*$"],
    state: {
      frontity: {
        url: "localhost:3000",
        title: "Test",
        description: "WordPress installation for Frontity development",
      },
      theme: {
        lang: "it",
      },
    },
    packages: [
      {
        name: "my-theme",
        state: {
          theme: {
            menu: [],
            featured: {
              showOnList: false,
              showOnPost: false,
            },
          },
        },
      },
      {
        name: "@frontity/wp-source",
        state: {
          source: {
            api: "http://localhost/wp-json",
            homepage: "/hp",
          },
        },
      },
      "@frontity/tiny-router",
      "@frontity/html2react",
    ],
  },
  {
    name: "test eng",
    match: ["localhost:3000/en(/.*)?$"],
    state: {
      frontity: {
        url: "localhost:3000",
        title: "Test",
        description: "WordPress installation for Frontity development",
      },
      theme: {
        lang: "en",
      },
    },
    packages: [
      {
        name: "my-theme",
        state: {
          theme: {
            menu: [],
            featured: {
              showOnList: false,
              showOnPost: false,
            },
          },
        },
      },
      {
        name: "@frontity/wp-source",
        state: {
          source: {
            api: "http://localhost/wp-json",
            homepage: "/hp",
          },
        },
      },
      "@frontity/tiny-router",
      "@frontity/html2react",
    ],
  },
];

export default settings;

I noticed that with both plugins, sharing the same slug returns me 404 when calling both language homepages. I also don’t understand if i have to set “hp” or “/en/hp” for the english version.

2

Hi @jacopo.bombardieri

Welcome to the Frontity community. We’re delighted that you’re interested in trying Frontity.

I haven’t really had any experience of working with either of the plugins you mention, but have you checked what the WP REST API returns when trying the endpoints? This may give you an idea of the api to specify in each case. You can just type the paths into the browser address bar, or use a utility such as Postman.

If you’re still having an issue after trying this could you please provide a link to a repo so that we can clone it and try to reproduce the error. A live WP site would also be useful - I see from your frontity.settings.js snippet above that you’re currently using localhost.

4

Hi @jacopo.bombardieri

I think your regexes are not correct because you’re not escaping the slashes. They should be:

^.*(?:localhost:3000)(?!(\/en)).*$

and

localhost:3000\/en(\/.*)?$

respectively :slight_smile:

In any case, the match: [] is setting is explicitly for multi-site which you say that you don’t want, so I’m a bit confused about your use case. Did you know that in development you can also access your site using the ?frontity_name=site-name syntax?

(By the way, the documentation still shows name instead of frontity_name, so I’ve made a tiny PR to update it: https://github.com/frontity/docs/pull/235)

Finally, could you share a repo of what you’re working on and your wordpress REST API url, I think it would be much easier to understand your use case

5

Hi @mburridge
thank you.
Unfortunately I’m working on a company demo and cannot share repo and live website. Will provide a personal project attempt in the next days.
I’m lately trying to use just parent page in order to have a second language (www.website.test/it/generic-slug for en and /generic-slug for standard english)
Just try to create a 2 lang website, try to use the same slugs as above.

6

Thanks @mmczaplinski!
you are right about the regex! The match setting was correctly working also without traling slashes but now is surely better.
Unfortunately, as answered to @mburridge, I cannot share repo and urls.
I’ve put apart the polylang and wpml solution for now, since using a parent /en page for handling english version was seeming to work… with some problems! :sweat_smile:
Changing creation order in pages could give 404s. If you create the /en version first it will break, if instead you create the italian version first, it works. Try it out

7

If you want to reproduce the problem:
create a “standard language” homepage in spanish for example, and another page, lets call it “investors” (slug: investors).
So until now you have a homepage and investors’ page in spanish.
Now we create the english version of homepage and investors’ page setting /en as slug for the first and choose en homepage as parent page for investors page; this way the en URL will be build in this way /en + /investors => /en/investors

If you invert the creation of the pages (/en version before the spanish/italian/whatever) you will get 404s when switching the english page with a IT|EN language switch (code below)

import React from "react";
import { connect } from "frontity";

const LangSelector = ({ state, actions }) => {
  const changeLanguage = (lang) =>
    state.test.currentLang !== lang ? actions.theme.setLanguage(lang) : false;

  return (
    <React.Fragment>
      <a
        onClick={() => changeLanguage("it-IT")}
        className={`it-IT ${state.test.currentLang == "it-IT" ? "current" : ""}`}
      >
        IT
      </a>
      |
      <a
        onClick={() => changeLanguage("en-EN")}
        className={`en-EN ${state.test.currentLang == "en-EN" ? "current" : ""}`}
      >
        EN
      </a>
    </React.Fragment>
  );
};

export default connect(LangSelector);

In actions.theme in the src/index.js

setLanguage: ({ state, actions }) => (lang) => {
    state.test.currentLang = lang;
    sessionStorage.setItem("testSessionLang", state.test.currentLang);

    let newlink;
    let ishome = state.router.link.match(/(^\/$)|(^\/en\/$)/);
    if (null === ishome && state.test.currentLang == 'it-IT') {
      newlink = state.router.link.replace(/(^\/en)/, '')
      actions.router.set(newlink);
    }
    if (null === ishome && state.test.currentLang == 'en-EN') {
      newlink = `/en${state.router.link}`
      actions.router.set(newlink);
    }
    console.log(state.test.currentLang, state.router.link, ishome, newlink);
  },

These are the plugins I’m actually using in WP

image
image407Ă—502 13.7 KB

8

Hi @jacopo.bombardieri

Your language switcher looks fine to me!

I’m unfortunately not familiar with how the multi-language WP plugins that you have mentioned work.

I suspect that the incorrect handler is being called for your /en site but I’d be happy to take a proper look once you’re able to share your project publicly :slight_smile: