Streaming live at 10am (PST)

Here is how to add cookies to a custom modal

Thanks for the reply Jeandcc! I figured out! :wink:

1 Like

Quick correction to your list @PixelGeek- dashes are not replaced on publish and can be safely used as in class-name.

2 Likes

thanks for the correction :slight_smile:

how to save something-of-productlist shown in a div-block that i like on a website to a page with all products-i-like into a may-be-i-will-buy-list? for a-not-ecommerce site possible? for example I-like-old-buildings-site …

Hi Nelson,

Thanks for this super useful!

if I want the cookie to expire after 6 hours do I change the following
Cookies.set(cookieName, ‘ok’, { expires: 7 });
to
Cookies.set(cookieName, ‘ok’, { expires: .25 }); ?

Cheers
Grant

Check the link above that teaches how to provide something different than days for the expire section of the code

1 Like

Thanks!

So I’m going with:

var inSixHours = 0.25;
Cookies.set(cookieName, ‘ok’, { expires: inSixHours });

Cheers
Grant

1 Like

Thank you so much for sharing this! I have tried doing it and I am failing somewhere … probably the class names. Would you mind taking a look in my project:

https://preview.webflow.com/preview/newbaseline?utm_medium=preview_link&utm_source=designer&utm_content=newbaseline&preview=ff98f440853dfa7245da97d426477d31&pageId=5e763a90d25345df4594d593&mode=preview

The page with the modal (and the cookies) is called Blog. Thanks!

1 Like

Hey - this is working great. But is there a way i can hide the cookie box in the design mode, and have it display on the live site if there are no cookies accepted?

Hope that makes sense?
K

Kieran, you can use something like this:

<script>
var cookieName = 'modalClosed';

if(typeof Cookies.get(cookieName) !== 'undefined') {
    $('.modal').remove();
} else {
    $('.modal').fadeIn();
}

$('.close-modal-bg, .close-modal').on('click', function(){
    Cookies.set(cookieName, 'ok', { expires: 7 });
})
</script>
1 Like

Great thanks Jean! Will try it out : ) My clients going to edit some of the content in the designer so this is ideal.

K

1 Like

Worked a treat : )

https://preview.webflow.com/preview/hopeyard?utm_medium=preview_link&utm_source=designer&utm_content=hopeyard&preview=34cdba4c345602a29b78d62d185002ee&mode=preview

1 Like

live site - hopeyard.webflow.io

1 Like

Can someone please help me as well?

I have tried doing it and I am failing somewhere … probably the class names. Would you mind taking a look in my project:

https://preview.webflow.com/preview/newbaseline?utm_medium=preview_link&utm_source=designer&utm_content=newbaseline&preview=ff98f440853dfa7245da97d426477d31&pageId=5e763a90d25345df4594d593&mode=preview

The page with the modal (and the cookies) is called Blog. Thank you so much!

Things seem to be running fine on my end @micav. What else do you want to happen?

Thank you! Funny enough I just realised that it’s working … which wasn’t the case 4. days ago when I was first messaged in :slight_smile:
Thank you! and so happy :slight_smile:

1 Like

Hi there,
I followed the instructions here and made my classes lowercase, but I still can’t seem to get it to work… can someone see what I’m doing wrong? My site address is https://kac.webflow.io/ (the modal pops right up on the homepage.)

My read-only link is: https://preview.webflow.com/preview/kac?utm_medium=preview_link&utm_source=dashboard&utm_content=kac&preview=9c2a6abd76b6307ee23df8bfdf20c60f&mode=preview

Does anyone have any advice on this? Thanks!!

You need to import the script for the Cookies library. Add this above the script tag you have for the script
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>

2 Likes

YES!!! THANK YOU! The help is much appreciated. That worked.

1 Like