bshiluk / vue-wordpress

Use Vue.js and the WP REST API to build WordPress themes as SPAs with dynamic routing, HMR for development, SEO enabled, and SSR capable. Demo:
http://vue-wordpress-demo.bshiluk.com
491 stars 112 forks source link

Issue using polylang and vue-js #13

Open pedrofmiguel opened 4 years ago

pedrofmiguel commented 4 years ago

Hello i recently submited an issue , and tought it was resolved, but i was wrong!

So, I'm using polylang and vue js , i need to translate articles and pages from Portuguese to English. At first i thought there was a problem with my routes.js and i added:

{
    path: '/:slugs+',
    component: loaderPage('Page'),
    name: 'Page',
    props: route => ({ slug: route.params.slugs.split('/').filter(s => s).pop() })
  },
  {
    path: '/en/:slugs+',
    component: loaderPage('Page'),
    name: 'PageEn',
    props: route => ({ slug: route.params.slugs.split('/').filter(s => s).pop() })
  },

But i'm finding tons of bugs that i can get through, for example when switching to an english page, the vue program loads the "Single.vue" instead of the "Page.vue" ...The navbar does not change :(

But if i refresh the page or if i enter through an url the page and the navbar loads fine The bugs usually ocurr while i browse in the program. Furthermore the vue program also loads all of the articles , both the portuguese and the english :/ The poly lang plug in usually takes care of all the logic behind the language switch, but when used with vue it has lots of bugs!

This is more of a question than an issue! HOpe you could give me some help! thanks in advance !

pedrofmiguel commented 4 years ago

I also changed the post structure to this image So that the Single.vue wouldn't load instead of the Page.vue

DevJulia commented 4 years ago

Hey,

I'm also struggling with Polylang and this starter theme. Did you manage to fix these issues?

pedrofmiguel commented 4 years ago

Nope , apparently it doesn't support Polylang very well... i will keep looking into it... will post a solution as soon as i can

DevJulia commented 4 years ago

I did a workaround for one of the issues (navbar not updating). I know it's not the prettiest but it's better than nothing.

  1. In WP admin, check "Force link to front page" in Polylang's language switcher
  2. In NavMenu.vue add :class="{ 'no-router' : isPolylang(item.id) }" to the link item where the function isPolylang is isPolylang(menuId) { return (typeof menuId == "string") } This will force the window to refresh when the user click on the switch language links.

Now I'm trying to fix the blog page so that it only shows articles for the current language.

bolus150 commented 4 years ago

Hey, how about adding the parameter ?slug=example&lang=LOCALE

spokospace commented 4 years ago

Hello, has anyone managed to implement with success vue.wordpress in a two-language blog?

karolpiekarski commented 4 years ago

@CNK001 Yes, but the site must reload. Personally, I use Polylang + Loco

spokospace commented 4 years ago

How can I add a lang switcher (widgets are disabled with VueWordpress), is it possible to link to a post in another language (e.g. from NavMenu)?

karolpiekarski commented 4 years ago

@CNK001

See screen. Here I have a page in Polish. You can add a language switch normally and it works.

image

spokospace commented 4 years ago

@CNK001

See screen. Here I have a page in Polish. You can add a language switch normally and it works.

image

Ok, great! I tried to do it in widgets before. I had to enable this option in "Screen options" according to https://polylang.pro/doc/i-cant-add-the-language-switcher-in-the-menus/

https://polylang.pro/doc/create-menus/ (number 3 and 4)

Dzięki! ;-)

karolpiekarski commented 4 years ago

@CNK001 If you still have any questions, you can write. I combined it with ACF PRO.

Cieszę się, że pomogłem! :)

spokospace commented 4 years ago

Do you resolved a problem with posts from all languages when you go to the homepage first time?

karolpiekarski commented 4 years ago

Yes, I added language information in the header and pass it in the parameters, and added it to

functions.php `add_action( 'pre_get_posts', 'include_language' );

function include_language( $query ) { if (isset($_GET['lang']) ) { $lang = $_GET['lang']; }

if($lang) { $query->set( 'lang', $lang ); } }`

spokospace commented 4 years ago

hmmm, it almost works, unfortunately sometimes the posts on the main page don't load at all, there is an error in the console:

Failed to load resource: the server responded with a status of 404 ()

/pl/wp-json/wp/v2/posts/?per_page=10&page=1:1

Uncaught (in promise) Error: Request failed with status code 404

    at createError (createError.js:16)

    at settle (settle.js:18)

    at XMLHttpRequest.handleLoad (xhr.js:59)    
createError.js:16 ```

error happens sporadically, not every time
karolpiekarski commented 4 years ago

I'm displaying posts on the /blog subpage. This is how my request looks like - wherever I download anything I added lang parameter

request: { type: "posts", params: { per_page: this.$store.state.site.posts_per_page, lang: baseTemplate.lang, page: this.page }, showLoading: true }, totalPages: 0

in header.php:

<script> var baseTemplate = { lang: '<?= pll_current_language('slug') ?>', } </script>

spokospace commented 4 years ago

Hmm, i think my main problem is that when I'm on the "sitename/en" page then the request is sent to the wrong address:

sitename /en/ wp-json/wp/v2/posts/?per_page=10&lang=en&page=1

but in source page the url to wp-json is correct: sitename/wp-json/... without lang directory before wp-json

so I hardcoded my domain in baseURL (in wp-content/themes/vue-wordpress/src/api/index.js)

karolpiekarski commented 4 years ago

How do you switch between languages, the page refreshes?

spokospace commented 4 years ago

it was when I entered the post, then changed the language and clicked on the logo to go to the home page (posts listing).

Currently trying to fix the link to the second language in the Single Post view (the first time the link is bad, only after refreshing is correct) and make other components also render after the first visit.

I installed facebook comments (https://github.com/malicoo/vue-facebook) and put them in Single view, but they also appear only after second refresh the post.