Перевод динамического контента, который извлекается с использованием Algolia в Javascript - PullRequest
Новая
       22

Перевод динамического контента, который извлекается с использованием Algolia в Javascript

1 голос
/ 13 октября 2019

Я тяну категории из Алголии. Я хочу, чтобы эти категории были определены в WPML. Но WPML не определяет динамический контент. Может ли кто-нибудь помочь мне, как я могу продолжить это?

Пожалуйста, найдите код ниже, который я хочу перевести. Это код виджета из Алголии 

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>`,
},

Я хочу перевести эту часть: 

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

Любая помощь с этим?

1 Ответ

3 голосов
/ 18 октября 2019

Прежде всего, позвольте мне пояснить, что ваш стек здесь разделен на 3:

  • Back-end (Wordpress / PHP)
  • Front-end (Html,JS, CSS)
  • Algolia (Внешний API)

Итак, что происходит:

  1. Ваш сервер печатает HTML-страницу, запрошенную клиентомбраузер.
  2. На этой странице javascript выполняет запрос к API Algolia.
  3. Этот же javascript обновляет содержимое страницы в зависимости от ответа Algolia без перезагрузки страницы.

Это означает, что фоновое задание здесь останавливается на шаге 1, и вы не можете использовать php на шагах 2 и 3.

Хорошо, теперь есть несколько способов перевести динамический контент, поступающий изalgolia:

Решение 1

Лучшее решение

Если вы можете, вы можете использовать разные индексы Алголии для каждого языка при запуске InstantSearch Algolia.

Например: 

...
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
});
...

Теперь вам просто нужно напечатать правильный индекс дляправильный язык.

Решение 2

Более сложное, менее подходящее решение

Вы можете напечатать перевод JSON где-нибудь на своей странице (с помощью PHP, еслиВы не хотите) 

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

и переводите метку на лету 

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;
    },
  })
);

В решении 1 большая часть работы выполняется в Алголии, в то время как в решение 2 эта работа выполняется в php / javascript

Надеюсь, это поможет.

...