How can I filter by different database fields depending on site language?

Ask the community
, , ,
1

Question:
How can I filter a database by specific ‘tags’ field depending on selected site language?

Product:
Wix Velo.

What are you trying to achieve:

Wix currently does not support multiple languages for collections. Hence one needs to write code to handle different languages based on the current language selection. What I need is code that can implement filtering via ‘tags’, but the specific tags field depends on the current language selection. So, for example, for language1, the filtering is based on tags1 field, and for language2, filtering is based on tags2.

What have you already tried:

I’ve written the following code based on code snippets and examples I found (I’m novice to Velo, although I have managed to write simple code to handle datasets based on language settings):

========

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

$w.onReady(function () {
	let language = wixWindow.multilingual.currentLanguage;
// top part of the page shows elements from a 'product collection' dataset
	$w('#productcollectionlistDataset').onReady( () => {
	let current_item = $w('#productcollectionlistDataset').getCurrentItem(); 

	if (language === 'en') {
		$w("#CollectionName").text = current_item.collectionName;
		$w("#CollectionDescription").text = current_item.collectionDescription;
    }
    else if (language === 'hu') {
		$w("#CollectionName").text = current_item.collectionNameHu;
		$w("#CollectionDescription").text = current_item.collectionDescriptionHu;
	}
} );
// bottom part of the page intends to show collection items based on specific category
// (top part) AND filtered by tags, which are dependent on the current language selection

$w('#collectionitemsDataset').onReady( () => {

// This is the part that I cannot get to work as I want
	$w('#checkboxGroup1').onChange((event) => {
		const selectedBox = $w('#checkboxGroup1').value;
		addItemstoRepeater(selectedBox, language);
	})

// This section already works if I leave out the filter by tags part (above)
$w('#collectionlistRepeater').forEachItem( ($w, itemData, index) => {
      if (language === 'en') {
		$w("#ProductDescription").text = itemData.description;
      }
      else if (language === 'hu') {
		$w("#ProductDescription").text = itemData.descriptionHu;
      }
  } );
} );  
} );

// This is part of the 'filter by tags' (see above)
function addItemstoRepeater(selectedOption = [], siteLanguage ) {
let dataQuery = wixData.query('Products');

if (selectedOption.length > 0) {

	if (siteLanguage === 'en') {
		dataQuery = dataQuery.hasSome('productTags', selectedOption);
	}
	else if (siteLanguage === 'hu') {
		dataQuery = dataQuery.hasSome('productTagsHu', selectedOption);
	}
}

  dataQuery
    .find()
    .then(results => {
      const filtereditemsReady = results.items;
      $w('#collectionlistRepeater').data = filtereditemsReady;
    })
}

=====

Additional information:
The above code works for one language (English), but fails to load the tags to be used for the other language (Hungarian). Instead, I still see the English language tags, plus I see some strange behavior if HU language is selected and I start using the tag filters. It seems something must be wrong about the way the filter checkbox is activated/used, but I’m kind of stuck with my current level of Velo/API knowledge. Hence this post.
I’ll appreciate any help/ideas.
Thanks a lot in advance.

2

Hello! It seems like a potential problem with the repeater lifecycle. Can you give any more information about the behavior of your current code and what’s showing up?

3

I looked through your code and tried to replicate it. Here’s what worked for me:


import wixWindow from 'wix-window';
import wixData from 'wix-data';
let language = wixWindow.multilingual.currentLanguage;

$w.onReady(function () {
    // Add your existing onReady code here
    // And then move your Dataset onReady function to $w.onReady

    $w('#dataset1').onReady(() => {

        // This is the part that I cannot get to work as I want

        // This section already works if I leave out the filter by tags part (above)
        $w('#checkboxGroup1').onChange((event) => {
            const selectedBox = $w('#checkboxGroup1').value;
            addItemstoRepeater(selectedBox, language);
        })
        $w('#collectionlistRepeater').onItemReady(($w, itemData, index) => {
            if (language === 'en') {
                $w("#ProductDesc").text = itemData.description;
            } else if (language === 'hu') {
                $w("#ProductDesc").text = itemData.descriptionHu;
            }
        });
    });
});

function addItemstoRepeater(selectedOption = [], siteLanguage) {
    let dataQuery = wixData.query('Products');

    if (selectedOption.length > 0) {

        if (siteLanguage === 'en') {
            dataQuery = dataQuery.hasSome('productTags', selectedOption);
        } else if (siteLanguage === 'hu') {
            dataQuery = dataQuery.hasSome('productTagsHu', selectedOption);
        }
    }

    dataQuery
        .find()
        .then(results => {
            const filtereditemsReady = results.items;
            console.log(filtereditemsReady)
// Reset the dataset so that onReady will run again
            $w('#collectionlistRepeater').data = []; 
            $w('#collectionlistRepeater').data = filtereditemsReady;
        })
}

I’m assuming that by default, you have your description in the repeater item connected to the english description. This worked for me when I disconnected that text from the dataset entirely (it will change based on the code).

Let me know if it works!