Multilingual - source url + match (WPML)

šŸ™‹Get Help
1

EDIT:

My original question was regarding setting the state source dynamically. I have since updated to use match (multiple domains).

Internal Vs External links when using match

ORIGINAL Question :

Hi

Wondering if thereā€™s a way to set @frontity/wp-source url dynamically based on state or get the router to add ā€œ/frā€ (language) to the url if a language is set.

Trying to use Heroku (single domain)

i.e. Iā€™m setting up a language toggle and would like to fetch from https://my-url (english) or https://my-url/fr (french)

 packages: [
      {
        name: "@frontity/wp-source",
        state: {
          source: {
            url: "https://my-url", // add fr to this as needed from theme state
            homepage: "/home",
          },
        },
      },

I see I can do something like this using match based on the domain / url

Was thinking I might be able to do something with match but not sure how I can add setup the router to use /fr/my-page when I want to use my french rest endpoint

2

Multilingual Frontity sites are not really supported and I havenā€™t seen a working solution yet.

I did some testing (see: Multilanguage with WPML - #2 by Johan), including changing the URL or parameters (most plugins support ?lang=xx) but without any result.

The only (sort of) working solution I found is to make 2 different sites within a single Frontity setup which changes based on the URL, however switching languages will not work properly with this.

3

Thanks Johan

Iā€™ll probably end up going down the multiple domains + match setup

4

Hmm

When I use match

match: [".*https?:\/\/localhost:4000"],

my urls end up linking to my ā€œremoteā€ rest api (the one I set for source) - this breaks the links as they link out - to the actual WP website.

name: "@frontity/wp-source",
        state: {
          source: {
            url: "https://my-url.com/fr",
            homepage: "/home-fr",
          },
        },

Screen Shot 2021-07-08 at 5.49.30 PM
Screen Shot 2021-07-08 at 5.49.30 PM820Ɨ768 35.1 KB

When I donā€™t use match things are working fine for the links - the links go to the right pages in french.

Screen Shot 2021-07-08 at 5.49.51 PM
Screen Shot 2021-07-08 at 5.49.51 PM518Ɨ666 19.6 KB

5

Hi @Johan and @tim.arney,

There is actually a working example:

https://www.texasmattressmakers.com/

Thee only problem is that they donā€™t have a public repo. From what I can gather, it looks like they are using embedded mode, since the /wp-json is accessible directly on the main domain:

https://www.texasmattressmakers.com/wp-json/

I also canā€™t see a namespace for any multi language pluginsā€¦ Maybe they are doing translations on the react side, with some kind of npm package. Because even when I have the language set to spanish, the rest api language is english.

Screenshot 2021-07-09 at 00.55.40
Screenshot 2021-07-09 at 00.55.401919Ɨ976 840 KB

7

Maybe this is related to:

Looks like the issue is related to

if (match && !match.some((regexp) => new RegExp(regexp).test(link))) {
    return link;
}

Summary so far:
With no match set - my sidebar links load the correct pages and content i.e. internal links :heavy_check_mark: ā€” but of course this doesnā€™t work for multilingual
With match set - my sidebar links end up as external links :x:

I opened up the repo Iā€™m playing around with

8

@David

I was looking at

And wondering if Iā€™ve found a bug or misconfigured something

When I try to use match all links end up being external

If I comment out this code the pages load correctly

if (match && !match.some((regexp) => new RegExp(regexp).test(link))) {
    return link;
}

Currently testing using match + localhost

9

Thinking this comes down to hosting the front-end on a domain that doesnā€™t match the WP REST endpoints

regexp .*https?://my-site.herokuapp.com

The REST endpoint
link https://my-wp-install.com/fr/my-page/

if (match && !match.some((regexp) => new RegExp(regexp).test(link))) {
    return link;
}
10

For now I patched the package on my end which solves the issue given my use case