WPML Integration for Algolia

Good day @tonyp83

For what it’s worth, Algolia themselves abandoned their own WordPress plugin and what we have with “WP Search with Algolia” is a forked and still maintained copy, that has also since evolved.

That said, you should look into our updated documentation which is on our GitHub Wiki for the plugin. Most specifically for your questions above, check out https://github.com/WebDevStudios/wp-search-with-algolia/wiki/WPML#filter-search-results-page-based-on-current-locale

I have linked to the specific section about template editing, and there you’ll see versions for both before WPSwA 1.8.x, but also for after version 2.0.0 where we updated the templates to be more modern. We have sections for both Autocomplete and Instantsearch with version 2.0.x+. You’ll want to use the changes there.

Let us know if you have any questions after looking those over, we’ll answer as best we can.

Thanks Michael, I can see now where I need to follow.

I’ve added those two lines to my versions of autocomplete.php and instantsearch.php (with the line from WP Search with Algolia version 2.0.x and later) as well as updating my functions.php file.

I’ve re-indexed content and pushed those changes, and for the English versions everything is working as fine – but for the German pages I have the Autocomplete is picking up the translated page and any English pages and posts too with similar words, so it’s not just looking at the /de/ locale, but both.

Just to check, if I’d implemented this correctly it would show only German pages when I was searching?

Thanks,
Tony

If the filters are properly in place and properly filtering the results, yes.

Do you have a live link where we could see things in action at?

Are you using the “All Posts” option for the Autocomplete? Or do you have individual post types selected for that? If “All Posts”, then it will be sharing the “wp_searchable_posts” index with the Instantsearch. However if individual post types, then each post type chosen has its own index and the content in each also needs to have the language attributes assigned. Each row in that Autocomplete settings page has it’s own “re-index” button that you can use for those individual indexes.

I sadly don’t, as I only have WPML running on my localhost of the site, as the Staging site we have is being used to review and add pages and content, so I’ll only be adding WPML to Staging when that’s done the client’s end.

I do have Pages, Posts and two Custom Post Types showing in the autocomplete menu. You can see what I describe here.

I can see it’s registering my German pages when I look via Algolia’s Dashboard, so it all looks fine that side (screenshot of what I can see in my Dashboard).

Just to check, here are my updates to instantsearch.php

                /* Stats widget */
                instantsearch.widgets.stats({
                    container: '#algolia-stats'
                }),

                instantsearch.widgets.configure({
                    facetingAfterDistinct: true,
                    highlightPreTag: '__ais-highlight__',
                    highlightPostTag: '__/ais-highlight__',
                    filters: 'wpml.locale:' + current_locale // This is the line we added.
                }),

My autocomplete.php

            source: algoliaHitsSource( client.initIndex( config[ 'index_name' ] ), {
                hitsPerPage: config['max_suggestions'],
                attributesToSnippet: [
                    'content:10'
                ],

                highlightPreTag: '__ais-highlight__',
                highlightPostTag: '__/ais-highlight__',
                filters: 'wpml.locale:"' + current_locale + '"', // This is the added line.
            }),

And functions.php

/**
 * @param WPML Algolia function
 * ref: https://github.com/WebDevStudios/wp-search-with-algolia/wiki/WPML
 *
 * @return array
 */

// Add the locale of every post to every record of every post type indexed.
function add_locales_to_records( array $attrs, WP_Post $post ) {
    // Here we make sure we push the post's language data to Algolia.
    $attrs['wpml'] = apply_filters( 'wpml_post_language_details', null,  $post->ID );
    return $attrs;
}

add_filter( 'algolia_post_shared_attributes', 'add_locales_to_records', 10, 2 );
add_filter( 'algolia_searchable_post_shared_attributes', 'add_locales_to_records', 10, 2 );

// Register the locale attribute as an Algolia facet which will allow us to filter on the current displayed locale.
function add_locale_to_facets( array $settings ) {
    $settings['attributesForFaceting'][] = 'wpml.locale';

    return $settings;
}

add_filter( 'algolia_searchable_posts_index_settings', 'add_locale_to_facets' );
add_filter( 'algolia_posts_index_settings', 'add_locale_to_facets' );

// Expose the current locale of the displayed page in JavaScript.
function enqueue_locale() {
    wp_add_inline_script( 'algolia-search', sprintf('var current_locale = "%s";', get_locale()), 'before' );
}

add_action( 'wp_enqueue_scripts', 'enqueue_locale', 99 );

I was wondering if within my functions file I needed to update any references..

Best I can think of at this point would be double checking say the wp_posts_post , wp_posts_page etc indexes to make sure all of those records have the same wpml attributes, since based on your screenshot, you do have separate indexes per content type for the autocomplete.

Ever get things figured out @tonyp83 ?

Hi Michael,

I’ve received the translation and am started to flow that into the website now. My German content is searchable, but it’s also showing any results in English too, so the filtering of the locale doesn’t seem to have worked..

Addition to my functions.php

// Add the locale of every post to every record of every post type indexed.
function add_locales_to_records( array $attrs, WP_Post $post ) {
    // Here we make sure we push the post's language data to Algolia.
    $attrs['wpml'] = apply_filters( 'wpml_post_language_details', null,  $post->ID );
    return $attrs;
}

add_filter( 'algolia_post_shared_attributes', 'add_locales_to_records', 10, 2 );
add_filter( 'algolia_searchable_post_shared_attributes', 'add_locales_to_records', 10, 2 );

// Register the locale attribute as an Algolia facet which will allow us to filter on the current displayed locale.
function add_locale_to_facets( array $settings ) {
    $settings['attributesForFaceting'][] = 'wpml.locale';

    return $settings;
}

add_filter( 'algolia_searchable_posts_index_settings', 'add_locale_to_facets' );
add_filter( 'algolia_posts_index_settings', 'add_locale_to_facets' );

// Expose the current locale of the displayed page in JavaScript.
function enqueue_locale() {
    wp_add_inline_script( 'algolia-search', sprintf('var current_locale = "%s";', get_locale()), 'before' );
}

add_action( 'wp_enqueue_scripts', 'enqueue_locale', 99 );

// Add the filtering
function algolia_filter_backend_search_params( $params ) {
	$current_lang = apply_filters('wpml_current_language', NULL);

	if ( ! $current_lang ) {
		return $params;
	}

	$params['filters'][] = 'language:' . $current_lang;
	return $params;
}
add_filter( 'algolia_search_params', 'algolia_filter_backend_search_params' );

Additions to instantsearch.php and autocomplete.php files,

  filters: 'wpml.locale:"' + current_locale + '"', // This is the added line.

But even after pushing all indexes the search still finds content in English pages. I’m not sure if I’ve missed something or it’s me using Advanced Custom Fields that’s causing issues.

Any ideas?

Thanks,

Have you made sure to re-index all of your content so that each indexed item has its intended language associated with it?

Yeah, I can see when I view on Algolia two entries for my test page I have in English and German, both as seperate entries.

Where can we see the attempts in action, if anywhere somewhat public?

Hi @tw2113 – I’ve tried deleting and re-uploading all files I’m updating (functions and the algolia files) and I can see it is now working, and just checking the Search on the german page it’s only going through the content on there.

So all seems good now! Thanks for your support on this ??

Awesome to hear. Let us know if you need anything else.

Hey guys,

I’ve tried to follow this thread as we have the same problem but no luck. Do you think there’s any chance of the core Algolia wordpress plugin being updated to handle WPML which so many of us use?

We only have an EN-US and an EN-GB version of our site but it’s frustrating to see both pages come up in our results which confuses users.

Not really an issue that would somehow be solved from an update to WP Search with Algolia.

What code examples have you tried? Did you make sure to make the language code an attribute that’s being indexed as well as made it an attribute for faceting/filtering?

I had an interesting day solving this on one of our websites, the crux of the problem was we are using the WPML setting of “show translation or show the default language as a fallback” option.

If you have everything set to “translate only”, things are pretty simple, you can index the locale of each post and then set your filter to (locale:en-GB).

With the fallback mode things were a bit tricky as the conditions were too complex for Algolia’s filters. Which would require something like locale:en-gb OR (available_languages !== en-gb AND is_original_translation) (psuedo code).

To get around this and move all of the processing to the PHP side pre-indexing I’ve essentially got an attribute called “languages_to_show_on” being added to my index, and my filter is now simply:

	$current_language = wpml_get_current_language();
	$filters[]        = "languages_to_show_on:$current_language";

This allows for, if you’re viewing the French site.

• Show French item (no other languages)
• Show French item (also available in English / Spanish but these are not shown)
• Show English item (also available in Spanish but not French, so the original item in English is shown).

This is the whole function I have, thats also indexing some other language meta that I’ve found useful:

/**
 * Prepare WPML data for indexing.
 *
 * @param array $attributes Algolia attributes array.
 * @param WP_Post $post The post being indexed.
 *
 * @return void
 */
function algolia_index_wpml_meta( &$attributes, $post ) {
$language_info = wpml_get_language_information( '', $post->ID );

if ( ! empty( $language_info ) && ! $language_info instanceof WP_Error ) {
$attributes['language_code'] = $language_info['language_code'];
$attributes['language'] = $language_info['display_name'];
$attributes['language_native'] = $language_info['native_name'];

// Reading direction.
$dir = 'ltr';

if ( isset( $language_info['text_direction'] ) && ! empty( $language_info['text_direction'] ) ) {
$dir = 'rtl';
}

$attributes['dir'] = $dir;

// Process an array of language codes the content is NOT available in.
$translations = get_content_translations( $post->ID );
$languages_with_translation = array();

if ( ! empty( $translations ) ) {
$languages_with_translation = array_keys( $translations );
}

// Get WPML languages.
$all_languages = apply_filters( 'wpml_active_languages', null, 'orderby=id&order=desc' );
$all_language_codes = array_keys( $all_languages );
$attributes['unavailable_languages'] = array();

foreach ( $all_language_codes as $language_code ) {
if ( ! in_array( $language_code, $languages_with_translation, true ) ) {
$attributes['unavailable_languages'] [] = $language_code;
}
}

// Add the original language.
if ( ! empty( $translations[ $language_info['language_code'] ]->source_language_code ) ) {
$original_language = $translations[ $language_info['language_code'] ]->source_language_code;
} else {
$original_language = $language_info['language_code'];
}

$attributes['source_language_code'] = $original_language;

// Add an array of which languages this can be shown on.
// - Show in the current language
// - Show on other languages if not available in the current language and is the original.
$attributes['languages_to_show_on'] = array();

foreach ( $all_language_codes as $language_to_show_on ) {
// This item is in this language, show it for this language.
if ( $language_info['language_code'] === $language_to_show_on ) {
$attributes['languages_to_show_on'][] = $language_to_show_on;

continue;
}

// 1. If this language doesn't have a translation available.
// 2. This is the original language item.
if (
! in_array( $language_to_show_on, $languages_with_translation, true )
&& $language_info['language_code'] === $original_language
) {
$attributes['languages_to_show_on'][] = $language_to_show_on;
}
}
}
}

function get_content_translations( $post_id = '' ) {
	global $sitepress;

	if ( empty( $post_id ) ) {
		$post_id = get_the_ID();
	}

	$wpml_post_type = 'post_' . get_post_type( $post_id );

	$t_post_id               = $sitepress->get_element_trid( $post_id, $wpml_post_type );
	$translations            = $sitepress->get_element_translations( $t_post_id, $wpml_post_type, false, true );
	$translations_that_exist = array();

	foreach ( $translations as $key => $translation ) {
		if ( ! empty( $translation->post_status ) && $translation->post_status === 'publish' ) {
			$translations_that_exist[ $key ] = $translation;
		}
	}

	if ( ! empty( $translations_that_exist ) ) {
		return $translations_that_exist;
	}

	return array();
}