3 min read

How to Show/Hide Elements Based on Language in Wix Multilingual

In the global marketplace, a multilingual website is essential for connecting with a diverse audience. Wix simplifies this with its multilingual feature. However, there are instances when you may need to show or hide specific elements based on the user's language selection. This approach is particularly effective for customizing content and enhancing the user experience.

In this blog post, we will walk you through how to use Velo by Wix to show or hide elements on your Wix site based on the selected language.

Step-by-Step Guide to Show/Hide Elements Based on Language

To achieve this, we'll use a simple piece of Velo code. Below is a step-by-step guide to help you implement this on your Wix site.

1. Access Your Site's Code Panel

First, log into your Wix account and open your website in the Wix Editor. To access the code panel, turn on Dev Mode by clicking the "Dev Mode" toggle at the top of the Wix Editor. This will open the Code Panel where you can write your custom Velo code.

2. Import Wix Window Module

In the Code Panel, start by importing the wixWindow module. This module will help us determine the current language of the website.

import wixWindow from 'wix-window';

3. Determine the Current Language

Next, get the current language using wixWindow.multilingual.currentLanguage. This will return the language code of the currently selected language (e.g., 'en' for English, 'fr' for French).

let myLang = wixWindow.multilingual.currentLanguage;

4. Write the OnReady Function

We will now write an onReady function to execute our code once the page is fully loaded. Inside this function, we will check the current language and show or hide the elements accordingly.

$w.onReady(function () {
    if (myLang === 'en') {
        $w('#element').show();
        $w('#element').expand();
    } else if (myLang === 'fr') {
        $w('#element').hide();
        $w('#element').collapse();
    }
});

Here’s a breakdown of what each line does:

$w.onReady(function () { ... }): This ensures the code runs only after the page is fully loaded.
if (myLang === 'en') { ... }: Checks if the current language is English.
$w('#element').show();: Shows the element with the ID element.
$w('#element').expand();: Expands the element, making it visible.
else if (myLang === 'fr') { ... }: Checks if the current language is French.
$w('#element').hide();: Hides the element with the ID element.
$w('#element').collapse();: Collapses the element, making it invisible.

5. Assign the Correct Element ID

Replace ♯element with the actual ID of the element you want to show or hide. You can find the element ID by clicking on the element in the Wix Editor and looking at the properties panel on the right side.

6. Publish Your Site

After you have added and adjusted the code, publish your site. The specified elements will now show or hide based on the language selected by the user.

Improved Velo Code Example

If you need to handle more languages or elements, you can expand the code like this:

import wixWindow from 'wix-window';

let myLang = wixWindow.multilingual.currentLanguage;

$w.onReady(function () {
    if (myLang === 'en') {
        $w('#englishElement').show();
        $w('#englishElement').expand();
    } else if (myLang === 'fr') {
        $w('#frenchElement').show();
        $w('#frenchElement').expand();
    } else {
        $w('#defaultElement').show();
        $w('#defaultElement').expand();
    }
});

In this improved version, you can specify different elements for different languages. Just replace ♯englishElement, ♯frenchElement, and ♯defaultElement with the IDs of the elements you want to control.

Conclusion

By using Velo by Wix, you can easily customize the visibility of elements on your multilingual Wix site. This can significantly enhance user experience by providing language-specific content and improving the overall usability of your website. Try it out and see how it can make your site more dynamic and engaging for your visitors!

For more tips and tutorials on Wix, stay tuned to our blog at www.wixcreate.com. Happy coding!