Pop up controlled by CMS

Design help Custom code
1

Hi,
I’m using the following code to show a pop up only if a cookie doesn’t exist. If it doesn’t, the pop-up shows and a cookie is added. This stops the pop showing again for the time stated (when the cookie expires).

src=“https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js”

const delay = 3; // pop-up delay in seconds
const popupId = “pop-up-wrapper”; // pop-up Id name

$(document).ready(function() {
if (!Cookies.get(‘alert’)) {
setTimeout(function() {
document.getElementById(popupId).style.display = “flex”;
Cookies.set(‘alert’, true, { expires: 1 });
}, delay*1000);
}
});

This works perfectly.

But…I’m now trying to link this to the CMS. I have created a switch in the CMS which is called Is Pop-Up. When the switch is on, this content is then shown in the pop-up. I’ve set the limit to 1, just encase someone sets more than one item on.

Ideally, I would like 2 things to happen, but would settle with just the first.

  1. If no items have the switch on, then the pop up will not show (at present the pop up shows with an empty collection list).
    2)To set the expiration date for the pop-up. I.e be able to set a number of days rather than the default.

I’ve tried all sorts of code, most commented out within the page settings, but I can’t seem to get it to work.

If anyone has any ideas or if this is possible that would be greatly apprecaited.

Here is my site Read-Only: Webflow - Freyja

2

Hi dab,

It would some time to unpack the details of what you’re doing but I can offer some suggestions that might help simplify your approach.

First, it sounds like each CMS item represents a single popup, and that you’d generally only want one popup. Instead of putting the CMS collection inside of the popup, put the popup inside of the CMS collection. That way, no collection items means no popups, and you can still limit it to 1.

Here’s a cloneable I built that shows the construction for CMS-linked popups using that approach;

You should be able to control your display parameters using standard filter & limit settings on your collection list, e.g.;

  • Popup active? switch must be on
  • Display until date must be < today
  • Limit to 1 item max

When I’m building a notification system, I usually use sort as well to prioritize popups. For alerts that might be the one with the latest Display from date. If it’s special offers, it might be the oldest Display until date.