Data Query Problem with site language

Ask the community
, ,
1

Hello there and all. Here is my problem and the code which I have tried to implement a solution for it.

Problem

The code was working well while query data with onChange() event on custom dropdown language menu but when I try to change all page content with this custom dropdown wixWindow . multilingual . currentLanguage = newLang ; caused a problem on data query.

I can change language, page reloads in that language and the query for the collection in that language doesn’t work anymore.

Code

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

$w.onReady(function () {
    let language = wixWindow.multilingual.currentLanguage; // "en"
    let languages = wixWindow.multilingual.siteLanguages; // get available languages
    //$w('#languageDropdown').value = language;
    console.log(language);
    getFlowers(language);
    wixLocation.onChange((location) => {
        getFlowers(language);
    });
    

    let newLanguages = languages.map((obj) => {
        return { label: obj.name, value: obj.languageCode };
    });
    //languages = languages.filter(obj => obj.languageCode !== language);
    $w('#languageDropdown').options = newLanguages;
    $w('#languageDropdown').value = language;

    $w("#languageDropdown").onChange((event) => {
        let newLang = event.target.value;
        console.log(newLang);
        console.log(event);
        getFlowers(newLang);
        wixWindow.multilingual.currentLanguage = newLang; // prevent loading the data in current language
    });

});

async function getFlowers(language) {
    // let browserLocale = wixWindow.browserLocale; // "en-US"
    $w('#listRepeater').data = [];
    await wixData.query('flowers')
        .ascending("orderNumber")
        //.limit(10)
        .find()
        .then((results) => {
            if (results.items.length > 0) {
                let resItems = results.items;
                //console.log(resItems);
                let url;
                let flowers = resItems.map(item => {
                    //console.log(item);
                    url = item.url.slice('/');
                    //console.log(url);
                    let localURL;
                    if (language === "de") {
                        name = item.flowerNameDe;
                        console.log(name);
                        //localURL
                    } else if (language === "es") {
                        name = item.flowerNameEs;
                        //localURL
                    } else {
                        name = item.flowerNameEn;
                        //localURL
                    }
                    return {
                        _id: item._id,
                        flowerNameEn: name,
                        url: localURL,
                        flowerImage: item.flowerImage
                    }
                })
                //console.log(flowers);
                $w('#listRepeater').data = flowers.slice(0, 10);
            } else {
                //$w('#loadingImage').hide();
                //$w('#noItemsText').show();
            }
        });
}

export function listRepeater_itemReady($item, itemData, index) {
    $item('#text1').text = itemData.flowerNameEn;
    $item('#image18').src = itemData.flowerImage;
    $item('#image18').link = itemData.url;
    $item('#image18').tooltip = itemData.flowerNameEn;
    $item('#button11').link = itemData.url;
    //$w('#loadingImage').hide();
    $w('#listRepeater').show();
}

How can I solve this?