If you want to watch a step-by-step tutorial of me implementing this solution on a Wix website, check out my YouTube video: How to Translate Content Collections with Wix.

A Workaround for setting up multi-language websites with Dynamic Pages using Content Collections

In today’s interconnected world, where businesses strive to reach a global audience, the ability to communicate effectively in multiple languages is paramount. As the demand for multilingual websites grows, website builders like Wix have become indispensable tools for creating stunning online platforms. However, one key limitation has persisted, frustrating users who rely on content collections for dynamic pages, repeaters, and more – the inability to seamlessly integrate Wix Multilingual with these powerful features.

In response to this common pain point, I want to walk you through my solution for setting up multi-lingual content collections. This approach empowers website owners to fully unlock the potential of their multilingual sites, enabling the translation of content stored in dynamic pages, repeaters, and beyond. With this solution, language barriers will no longer hinder the reach and impact of your website, opening doors to a broader audience and fostering greater engagement.

What аre content collections and dynamic pages in Wix, and why is their translation an issue?

Before we move onto the step-by-step instructions for setting up this workaround, let’s quickly recap what content collections are and how they populate dynamic pages:

• Content collections lie at the heart of dynamically-built websites, enabling the organization and management of diverse sets of information. Think of them as virtual containers that hold your website’s content, in the form of a table or otherwise – a database for a collection of similar content such as news, your team structure, or a property database. By using content collections, website owners can store and update their data in a structured manner, ensuring easy access and dynamic presentation on their web pages – in the case of Wix, as simply as entering the data in a table, which will automatically create a page for this entry using the provided template.
• Dynamic pages provide a vibrant and personalized user experience by displaying content from content collections. Unlike static pages, which have fixed content, dynamic pages retrieve information from the content collections at runtime. They allow website owners to create templates that can be populated with data from their collections, resulting in dynamic and data-driven web pages. Dynamic pages are particularly useful for websites with frequently updated content or those that require personalized information based on user inputs.

Despite their immense value and versatility, content collections and dynamic pages face significant limitations when it comes to multilingual websites. Currently, the translation of content stored within these features is not supported by Wix Multilingual. This means that while static pages and basic elements can be translated effortlessly, content within dynamic pages, repeaters, and other dynamic elements remains inaccessible to the multilingual feature. This limitation hinders website owners from fully localizing their websites, limiting their reach and potential impact on an international scale.

Step 1: Organize your content collection to support multi-language setup

In this section, we will focus on organizing your content collection to support a multi-language setup for your website. Having a well-structured content collection is crucial for efficiently managing and displaying content in multiple languages. By implementing a solid organization system, you can ensure that your website’s content is easily translatable and maintainable.

There are two steps you need to take – translating your content collection to all the appropriate languages you support on your multi-lingual Wix website and organizing the field entires via a language picker within the content collection.

Duplicate your content in the new language

To duplicate your content collection in a new language, you can follow a two-step process. First, you can utilize Google Translate to generate initial translations of your content. However, it’s important to note that machine translations may not always be accurate or capture the nuances of the language. Therefore, the second step involves manually editing and refining the translations for better quality and accuracy. This allows you to tailor the content to the specific language and ensure it resonates with the target audience.

For more complex content systems or to achieve higher levels of language SEO localization, it is advisable to consult a language SEO localization expert. Their expertise can help you optimize your content for search engines and ensure it aligns with the cultural and linguistic nuances of the target language. By combining automated translation tools with manual editing and expert guidance, you can create a well-translated and culturally relevant content collection for your new language.

At the end of this step you should have identical entries in your content collection in different languages, as shown below.

Add a language column to your collection to differentiate the languages from one another

Add a new field to your content collection titled language. By including a dedicated language column in your collection, you can easily identify and categorize content based on the language it belongs to. This simple addition enables efficient language-based filtering and sorting, making it easier to manage and present multilingual content on your website. With this enhanced structure, you’ll have greater control over your multilingual content and provide a tailored experience for users based on their language preferences.

Step 2: Implement language filtering on dynamic pages, populated by content collections using Velo

In this section, we will explore how to implement language filtering on dynamic pages using Velo, Wix’s coding platform. By leveraging the power of Velo, we can efficiently populate dynamic pages with content collections and enable language-based filtering.

I will demonstrate how to match the content language selection to the content language filter in your collection, making your Wix website more accessible to a global audience. We will be using JavaScript and all of the necessary functionality of the code will be explained so you can adjust it to your needs.

Enable Velo on you Wix site

Velo is a coding platform by Wix that lets users add custom functionalities to their websites. With JavaScript-based development, it offers APIs and tools for creating interactive forms, dynamic pages, and integrating external services. It empowers users with coding skills to customize Wix websites alongside visual design tools.

You can enable Velo by turning on Dev mode from the top-level menu.

We will use Velo to insert custom JS code with filtering behavior for the different dynamic pages in your site’s languages, with the aim of displaying a different part of the content collection.

Insert the code in the Dynamic page that shows your entire content collection

The next step is to navigate to the page that displays your entire content collection and open the Velo panel to paste a custom code snippet, which will be shown below.

Below is the code I have used on my website. Please read the explanation of what it does and adapt as needed to your website’s needs:

• The code imports the wixWindow module from the ‘wix-window’ library and the wixData module from the ‘wix-data’ library.
• The onReady function is called when the page is loaded and ready.
• The code retrieves the current language selected by the user using wixWindow.multilingual.currentLanguage. (or otherwise – the language selected from the language selector on your website)
  • If the language is “en” (English), it sets a filter on the “teamDataset” to retrieve data where the “language” field is equal to “EN”.
  • If the language is “bg” (Bulgarian), it sets a filter on the “teamDataset” to retrieve data where the “language” field is equal to “BG”.
• The newsRepeater_itemReady function is triggered when an item in the news repeater is ready to be rendered.
• Inside the newsRepeater_itemReady function, it checks the language again and applies the same filters to the “teamDataset” based on the selected language. However, there is no definition of the language variable within the scope of this function, so it might result in an error or undefined behavior.

import wixWindow from 'wix-window';
import wixData from 'wix-data';

$w.onReady(function () {
	let language =  wixWindow.multilingual.currentLanguage; 
	if ( language === "en") {
    $w("#newsDataset").setFilter(wixData.filter().eq("language", "EN"));
  } else if (language === "bg") {
    $w("#newsDataset").setFilter(wixData.filter().eq("language", "BG"));
  }
});

export function newsRepeater_itemReady($item) {
	if (language === "en") {
    $w("#newsDataset").setFilter(wixData.filter().eq("language", "EN"));
  } else if (language === "bg") {
    $w("#newsDataset").setFilter(wixData.filter().eq("language", "BG"));
  }
}

Before you apply this code make sure you check the following:

• How many languages and checks are there in your dataset? – As you can see, in my example there are two languages and two checks – you might have more. Make sure you adjust this to your website’s localization strategy.
• What is your dataset name? – in my example, my content collection is titled #newsDataset, but in your case, it will be different. To get the exact name, hover over the dataset element in velo.

• What is the name of your dataset element repeater? – In my example it’s newsRepeater, but in your case, it will be different. To get the exact name, hover over the repeater element in velo.

Shoutout to Pawel Schwindt, whose reply in the Wix Forum is what I based this code on – thank you Pawel!

Test the implementation so far and Troubleshooting

Before you upload the code, click on Run to test the implementation on the team page, which should filter your content collection with the appropriate language selected from the language picker.

Test 1: You should see that the code filters the content from your collection based on the language selected in the language picker, and when clicked on the item takes you to the appropriate localized URL.

When you click through to the individual item page (which corresponds to a row in your collection) you will likely be taken to the version that corresponds with the URL structure that you are on, or otherwise (as shown in the image below):

1. Your language picker on the dynamic page, matches the content displayed
2. When clicked the link takes you to the appropriate localized version. of the content from your content collection

So far, so good. Stopping here would be a mistake, though.

Test 2: Test what happens if you switch languages on the individual page

Continuing the screenshot from above, we are on the localized version of the individual page, where. we need to test the behavior of the language picker. The ideal behaviour is that flicking the language picker would lead to the language of the page changing. However, this is not the case as it just changes the URL. This happens as it still connects with the same item in your content collection.

The appropriate URL that should be showing here instead is the URL in English, which corresponds with the item in our content collection that’s written in English (shown below), which we can only navigate to if we go back to our dynamic (all) page (which is already filtered by our Velo code, inserted in the previous step) and navigate to this item.

The workaround for this issue is setting up redirects to the appropriate URL.

Step 3: Set up redirects to avoid content duplication

Map out the URLs you need to redirect

As shown in the example above, we need to redirect the URLs with only the slug localised to the fully localised page (which would have a translated URL, content, and everything). This should be repeated for all the languages you have.

In my collection, I only have two languages, and for this example, I only have two items in my collection (in the video tutorial on YouTube, you can see how I mapped out the URLs for a bigger content collection), so I need to redirect URLs in the following way:

• From /bg/news/stoyan-stoyanov%2C-founder-of-dot.won-group-discusses-property-market to the localised version /bg/news/стоян-стоянов%2C-основател-на-dot.won-group-разказва-за-пазара-на-имоти-пред-скат
• From /news/стоян-стоянов%2C-основател-на-dot.won-group-разказва-за-пазара-на-имоти-пред-скат to the English version /news/stoyan-stoyanov%2C-founder-of-dot.won-group-discusses-property-market

This needs to be repeated for each item in your collection (and each language).

Set up the redirects via the Wix URL Redirect Manager

Navigate to the Wix URL Redirect Manager and download the URL redirects template.

Enter your mapped-out combinations, and reupload. You should now see your redirected URLs.

Test that the behavior is as intended on the website once again but you should now see that everything works as expected.

Key Takeaways

The key takeaway here is – where there’s a will, there’s a way. I surely hope that content collections are added soon for translation natively in the Wix Multilingual App but in the meantime, that’s the next best thing for websites with a small international presence and small content collections.

To summarise the key steps you need are:

• translate your content collection and enter it with a defining dimension of language which you can use as a filter to control which items you display
• enable Velo by Wix and enter code to enable dynamic content collection filtering logic based on the language in the language picker
• set-up redirects to ensure users don’t land on a non-translated page