1

I am pulling the categories from Algolia. I want those categories to be identified by WPML. But WPML doesn't identify the dynamic content. Can anyone help me how can I proceed with this?

Please find the code below which I want to translate. This is the widget code from Algolia

templates: {
item: `<label class="ais-RefinementList-label"> 
    <input type="checkbox" class="ais-RefinementList-checkbox" value="{{label}}">
    <span class="ais-RefinementList-labelText">{{<?php echo __(esc_html('label'), 'wprig');?>}}</span>
    <span class="ais-RefinementList-count">1</span>
    </label>`,
},

I want to translate this part:

{{<?php echo __(esc_html('label'), 'wprig');?>}}

Any help with this?

Tasos K.
  • 7,979
  • 7
  • 39
  • 63
Hilario Goes
  • 433
  • 5
  • 15
  • Any update guys? – Hilario Goes Oct 14 '19 at 07:26
  • So, unfortunately, I am unsure of the details here. What I can say from a quick glance is `{{}}` is PHP code in something you're trying to echo. That probably won't work since you'd need to eval in PHP in order for that to work. And WordPress tends to shy against that since it's such a security implication. You might want to give more details if you want a more detailed response. ;) – Dovy Oct 16 '19 at 19:47
  • Why are you not using {{}} if you have registered the wprig text domain then it surely show up in po or mo file and can be translated. – Adeel Nazar Oct 18 '19 at 11:29

1 Answers1

3

First of all, let me try to clarify that your stack here is splitted in 3:

  • Back-end (Wordpress/PHP)
  • Front-end (Html, JS, CSS)
  • Algolia (External API)

So what happens is:

  1. Your back-end prints a html page requested by the client's browser.
  2. In this page, a javascript makes a query to Algolia's API.
  3. The same javascript updates the page content depending on Algolia's response without reloading the page.

This means that the back-end job here stops at step 1 and you can't use php on steps 2 and 3.

Ok, now there are a couple of ways to translate the dynamic content coming from algolia:

Solution 1

The best solution

If you can, you may use a different algolia index for each language when you init algolia's instantsearch.

For exemple:

...
const search = instantsearch({
  appId: 'YOUR_API_ID',
  apiKey: 'YOUR_API_KEY',
  indexName: 'movies_en' // or 'movies__fr' or 'movies__es'
  // Here you could make the indexName dynamic using a variable, like this:
  // indexName: 'movies_' + currentLanguage
});
...

Now you just need to print the right index for the right language.

Solution 2

More complicated, less maitanable solution

You can print a translation JSON somewhere on your page (with PHP if you wan't)

<script>
 window.algoliaTranslations: {
   "Guardians of the Galaxy": {
     "fr": "Gardiens de la Galaxie",
     "es": "Guardianes de la Galaxia",
   }
 }
</script>

and translate the label on the fly

const currentLanguage = 'es'
search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    hitsPerPage: 12,
    templates: {
      item: `
        <label class="ais-RefinementList-label"> 
          <input type="checkbox" class="ais-RefinementList-checkbox" value="{{label}}">
          <span class="ais-RefinementList-labelText">{{label}}</span>
          <span class="ais-RefinementList-count">{{count}}</span>
        </label>
      `,
    },
    transformData: hit => {
      hit.label = window.algoliaTranslations[hit.label][currentLanguage]
      return hit;
    },
  })
);

In solution 1 most of the work is done in Algolia while in solution 2 this work is done in php/javascript

Hope this will help.

Aldebaran Desombergh
  • 56
  • 2