Selection tags to repeater to google maps

Ask the community
, , ,
1

I’m having trouble with
I have a CMS with a list of places, their addresses, and a tag field with the country they’re in.
I can’t seem to filter the repeater when a tag is selected from a “Selection Tags” element.
AND
I can’t seem to have a link that shows the address in a google maps element.

Working in
Wix Editor, Dev Mode, and CMS (it’s an older site so it was made with the regular editor not Studio)

Site link
Can’t currently share (I can do snapshots and snippets)

What I’m trying to do
I am trying to have a few buttons at the top with country names on it. When the country is clicked it shows a list of place names with the address all from that specific country. And with the list, a button or the address as a link will scroll to the top of a google maps element (the list may still be long), and focus the map element onto the address clicked.

What I’ve tried so far
I’m using a Selected Tags element and hooking them up to Country tags in a CMS database. The database also has the place name and address (along with other info). I’ve made it so that only one tag can be selected at a time. But nothing works from there on.

I’ve been relying on the built in Ai Code Generator so far

Extra context

// Velo API Reference: https://www.wix.com/velo/reference/api-overview/introduction

import wixData from 'wix-data';

$w.onReady(async function () {
    // Query the "Import 1" collection for all items
    let results = await wixData.query("Import1").find();
    let items = results.items;
    let selectedValue = '';

    // select one tag button at a time
    $w('#selectionTags1').onChange(({ target }) => {
        const values = target.value;
        const numOfValues = values.length;
        if (!numOfValues) {
            selectedValue = '';
        } else {
            selectedValue = values.find(e => e !== selectedValue);
            target.value = [selectedValue];
        }
    })

    // Collect all countryTag1 values (which are arrays) into a single array
    let allTags = [];
    items.forEach(item => {
        if (Array.isArray(item.countryTag1)) {
            allTags.push(...item.countryTag1);
        }
    });

    // Get unique tags
    let uniqueTags = [...new Set(allTags)].filter(tag => tag && tag.trim() !== "");

    // Format for selection tags: array of {label, value}
    let tagOptions = uniqueTags.map(tag => ({ label: tag, value: tag }));

    // Set the options for the selection tag element
    $w('#selectionTags1').options = tagOptions;
});

$w('#selectionTags1').onChange(async (event) => {

    // Get the selected tag(s) from the selection tags element
    const selectedTags = event.target.value;
    // If no tag is selected, clear the repeater
    if (!selectedTags || selectedTags.length === 0) {
        $w('#repeater1').data = [];
        return;
    }
    // Query the 'Import 1' collection for items where 'Country Tag' matches the selected tag
    try {
        const results = await wixData.query('Import 1')
            .eq('Country Tag', selectedTags[0])
            .find();
        // Set the repeater data to the query results

        $w('#repeater1').onItemReady(($item, itemData, index) => {
            $item('#nameText').text = itemData.siteRecruitmentStatus;
            $item('#addressText').text = itemData.Address;
        });
    } catch (error) {
        // If there's an error, clear the repeater
        $w('#repeater1').data = [];
    }
});


// Connect the repeater's items to the Name and Address fields
$w('#repeater1').onItemReady(($item, itemData, index) => {
    $item('#nameText').text = itemData.siteRecruitmentStatus;
    $item('#addressText').text = itemData.Address;
});
2

I might be missing it, but the only time you’re setting the repeater data is:

$w('#repeater1').data = [];

Which is an empty array - so won’t display anything. The times you are loading data, you’re not applying it to the repeater.

You also mention “connecting” to the CMS, which makes me suspect you might be combining this with datasets?

Generally, I’d encourage either all code, or all datasets as it’s usually easier to maintain long term

3

Oopsie,
I figured it out. mainly… don’t relay too much on the ai to do things. Documentation and past posts on this community forum are far better.