Why doesn't this container collapse?

Ask the community
, , ,
1

Hey, so I’m having some issues with collapsing containers. When clicking the X as a first-time visitor, it works just as it should and collapses the container. However, when refreshing the page, the container should remain hidden, but it doesn’t. Any ideas why? I also tried logging the hideUntil constant, but it didn’t work. The container is set in the properties panel has collapsed to avoid a flash before hiding when the code is loading. See the code below (www.cmmba.org). TIA.

import { local } from 'wix-storage-frontend';

$w.onReady(async function () {
    // Check if the container should be hidden
    const hideUntil = local.getItem('hideTrailforksOfferUntil');
    console.log(hideUntil);
    if (hideUntil && new Date(hideUntil) > new Date()) {
        $w('#trailforksBanner').collapse();
    } else {
        $w('#trailforksBanner').expand();
    }

    // Set up the button click event
    $w('#trailforksBannerCloseButton').onClick(async () => {
        // Hide the container
        $w('#trailforksBanner').collapse();

        // Set the flag to hide the container for 2 weeks
        const twoWeeksFromNow = new Date();
        twoWeeksFromNow.setDate(twoWeeksFromNow.getDate() + 14);
        local.setItem('hideTrailforksOfferUntil', twoWeeksFromNow.toISOString());
    });
});
2

Hi, @Koen_Stewart !!

I tried your code, and the container was able to collapse properly. The log shows “2025-04-21T02:01:39.379Z”. I replaced local with session in the code, but I don’t think that fundamentally changed anything. :upside_down_face:

3

It’s possible that an error occurred earlier in the code before reaching the part that triggers the collapse, preventing it from executing properly. As a test, try doing the same thing on a fresh, blank page. :thinking:

4

Try following code. It stores the hidden state of your container. This will make sure that the banner stays hidden. To make it reappear, visitors will have to clear the website’s cookies. Right now, it is hidden for two weeks but you can set it to days, hours, or minutes as well. I haven’t tested it but it should work.

Hope It helps

:slight_smile:

import { local } from 'wix-storage-frontend';

$w.onReady(async function () {
    const hideUntil = local.getItem('hideTrailforksOfferUntil');
    console.log('hideUntil from storage:', hideUntil); 

    const currentDate = new Date();
    const hideUntilDate = hideUntil ? new Date(hideUntil) : null;
    console.log('Parsed hideUntilDate:', hideUntilDate); 
    console.log('Current date:', currentDate); 

    if (hideUntilDate && hideUntilDate > currentDate) {
        $w('#trailforksBanner').collapse();
    } else {
        $w('#trailforksBanner').expand();
        if (hideUntilDate && hideUntilDate <= currentDate) {
            local.removeItem('hideTrailforksOfferUntil');
            console.log('Expired hideUntil cleared from storage');
        }
    }

    $w('#trailforksBannerCloseButton').onClick(async () => {
        $w('#trailforksBanner').collapse();

        const twoWeeksFromNow = new Date();
        twoWeeksFromNow.setDate(twoWeeksFromNow.getDate() + 14);
        const hideUntilValue = twoWeeksFromNow.toISOString();
        local.setItem('hideTrailforksOfferUntil', hideUntilValue);
        console.log('Set hideUntil to:', hideUntilValue); 
    });
});