Trouble with Reference Fields in Code

[Samantha_Julien]

I’m sure there is a simple answer, I’m just not versed enough in code to get it. I am trying to make multiple artist pages via dynamic pages. I have the artist contact and social in a separate database (called “Artist Contact”).

Using Wix Studio. I am trying to make the elements that do not have a value in them hide/collapse. I had the code working until I added a second item into the Artist Contact collection. Items are in flexboxes so that it still looks nice when things are removed (aka no gaps.)

Screenshot attached. The code I’ve been using is basically the following copy and pasted for each item.

$w("#artistcontact").onReady( () => { 
       let item = $w("#artistcontact").getCurrentItem(); 
       if (item.facebook) {
          $w("#fbbox").show();
       } else {
          $w("#wfbbox").collapse();
          $w("#fbbox").hide();
       }
    } );

[Rob]

I think my video might help as it goes into conditional visibility (and it links to my site which has the example code though I’ll include it here as well).

Conditional Visibility | Hide Content when a CMS field is Empty | Wix Studio Tutorial

I’m trying to discern the code and I can see that it looks like if the facebook field has content then the item #fbbox shows and if not, it collapses and also hides #fbbox. I think you would want to combine the code together as

$w("#artistcontact").onReady( () => { 
.....
    } );

is running the code once #artistcontact is ready - which I assume is the dataset.
By having

$w("#artistcontact").onReady( () => { 
.....
    } );

and then another instance of

$w("#artistcontact").onReady( () => { 
.....
    } );

you’re telling the system when it’s ready and then when it’s ready again but it’s already been loaded.

I tried checking on my end and I was getting a different error as I wanted to combine them in a more sustainable way so I’ll update the thread when I get that working but I’d say to start there for now.

[thewixwiz]

Hi there,
You mentioned this is a dynamic page and I’m going to assume that the dynamic pages are generated from a collection called “Artists” where each item references an item from the “Artist Contact” collection.

What seems to be happening here is that you have not filtered the Artist Contact dataset based on the current dynamic item aka. “#dynamicDataset” (default name given by Wix).

You can filter directly from the dataset or via code - see this example image:

If you are still struggling I would recommend following up with:

1. Link to page in question.
2. Screenshot of your CMS collections.
3. Screenshot of your dataset setups.

Hope that helps.
Eitan

[Rob]

I managed to fix my code and used some arrays so you can see it working here:

Luna Hart | My Site 66

(You can go through the dynamic pages to see that only relevant boxes show up)

Here’s the code and I used arrays so that you can more easily manage it to match your fields and containers.

$w.onReady(() => {
    $w("#artistcontact").onReady(() => {
        console.log('ready')
        const item = $w("#artistcontact").getCurrentItem();
        console.log(item)
        // Update to match your keys and boxes accordingly
        const fields = [
            { key: 'facebook', box: '#fbbox' },
            { key: 'instagram', box: '#instbox' },
            { key: 'personalWebsite', box: '#webbox' },
            { key: 'tiktok', box: '#ttbox' },
            { key: 'phoneNumber', box: '#phbox' },
            { key: 'email', box: '#emailText' }
        ];
        fields.forEach(({ key, box }) => {
            if (!item[key]) {
                $w(box).collapse();
            } else {
                $w(box).expand();
            }
        });
    });
});