Multilanguage with ACF

🙋Get Help
1

Dear frontity community. We are developing the multilanguage website by using Frontity.
We have a dev build here: http://time.webbuilder.in.ua/
We don’t use any plugins like polylang for multilanguage because in our practice it works with bugs. We use ACF instead of it.
The example of data: https://time-admin.webbuilder.in.ua/wp-json/wp/v2/posts?slug=v-harkove-uzhestochili-karantin
As you see, in ACF we have a language identifier with the data.

We found the way to change the language in the state immediately and it works well.
Also, we can use GET parameter lang to identify the default language.
The example url:

Problem:
We need to set

  • /our-link for the base laguage
  • /uk/our-link for the another language.
    The API request for the 2 urls should be the same.
    How we can do it in Frontity ?

The project repo: https://github.com/dancer2090/time-frontity

7

Hey @ivaneichyk.ivan, why not using two different sites, one for each language, combined with the state.source.subdirectory option?

Something like this:

const settings = [
  {
    name: "frontity",
    state: {
      frontity: {
        url: "http://time.webbuilder.in.ua",
        title: "Frontity",
      },
    },
    packages: [
      {
        name: "@frontity/mars-theme",
        state: {
          theme: {
            menu: [
              ["Home", "/"],
              ["Nature", "/category/nature/"],
              ["About Us", "/about-us/"],
              ["UK", "http://time.webbuilder.in.ua/uk"],
            ],
          },
        },
      },
      {
        name: "@frontity/wp-source",
        state: {
          source: {
            api: "https://test.frontity.org/wp-json",
          },
        },
      },
      "@frontity/tiny-router",
      "@frontity/html2react",
    ],
  },
  {
    name: "frontity-uk",
    match: ["https?:\\/\\/[^/]+\\/uk([^-\\w]|$)"],
    state: {
      frontity: {
        url: "http://time.webbuilder.in.ua/uk",
        title: "Frontity UK",
      },
    },
    packages: [
      {
        name: "@frontity/mars-theme",
        state: {
          theme: {
            menu: [
              ["Home", "/uk"],
              ["Nature", "/uk/category/nature/"],
              ["About Us", "/uk/about-us/"],
              ["Non-UK", "http://time.webbuilder.in.ua"],
            ],
          },
        },
      },
      {
        name: "@frontity/wp-source",
        state: {
          source: {
            api: "https://test.frontity.org/wp-json",
            subdirectory: "uk",
          },
        },
      },
      "@frontity/tiny-router",
      "@frontity/html2react",
    ],
  },
];

export default settings;

I’ve created a CodeSandbox with the example:

Let me know if it works :slightly_smiling_face:

10

2 posts were split to a new topic: Site with a subdirectory returns 404

16

Hi @luisherranz! Sorry for the late answer!
It works. But with one important thing.
When we do the request from subdirectory frontity save the result in store without subpath.
Example:
http://time.webbuilder.in.ua/uk/somerote
will be saved as
/someroute
It means that we still need to parse the URL to get the result from the store. But it is not a big problem.
In our case, we decided to save language as get variable because we have a lot of custom rest API requests. And for us easier to play with it when we have GET parameter.

17

Interesting, thanks for sharing! We will take it into account for the next version of source :slightly_smiling_face:

18

Hey @luisherranz, your codesandbox examples don’t work with the last version of Frontity.

    "frontity": "^1.14.1",
    "@frontity/core": "^1.10.1",
    "@frontity/wp-source": "^1.11.1",
    "@frontity/tiny-router": "^1.3.2",
    "@frontity/html2react": "^1.6.1",

Do you have any idea to solve it ?
Thanks :slight_smile:

19

@sebastien: I forked it, updated the packages and it works fine.

This is the fork: Frontity - Two sites (multilingual) (forked) - CodeSandbox

Could you please check it out and it still fails let me know? :slightly_smiling_face: