How do I detect when a module instance has changed field values?

Developer Support CMS Development
1

I’m building a custom popup module, when the user closes the popup I store a cookie to supress it popping up on future loads of the page.

When our content editors change something about the popup I’d like to invalidate the currently stored cookie so that the popup appears with the new content.

The way I’m doing this right now is that the popup appears when a cookie doesn’t exist. If I can get a GUID for the current module instance that changes when updates are made to the module instance, I can check if that has changed to decide if I should show the popup.

I’ve tried doing this with {{ name }} but that seems to stay the same between edits to the module instance.

2

Hey, @ABroadbent3 :waving_hand: Thanks for your question. Can you share any additional details about your code with our community members? This may help in finding someone who has related experience.

Best,

Jaycee

3

Hi @ABroadbent3,

are you “hardcoding” the popup into a template or are you using the drag&drop editor?

If “hardcoding” the “name” of the module is defined like this:

{% module 'NAME' path="./../../module", label="Module" %}

If you’re using it it multiple times in one template it should be like this:

{% module 'NAME_1' path="./../../module", label="Module" %}
...
{% module 'NAME_2' path="./../../module", label="Module" %}
...
{% module 'NAME_3' path="./../../module", label="Module" %}
...

it has to be unique otherwise it won’t work (properly).

If you’re using the dnd editor, HubSpot should generate a unique name every time.

One thing you can try is applying something like an md5 filter to the name variable. This will transform the name into a unique md5-hash.

<div class="popup-{{ name|md5 }}">
...
</div>

also you should put the JavaScript (if you’re using it) into the module.html like this

{% require_js %}
<script>
$(".popup-{{name|md5 }}"){ {# Using jQuery for ease of demo #}
something something 
}
</script>
{% end_require_js %}

If you want to modify the CSS per instance put the CSS into the module.html as well

{% require_css %}
<style>
{% scope_css %}
.popup-{{ name|md5 }}{
 background: {{ module.styles.background_color.css}};
}
{% end_scope_css %}
</style>
{% end_require_css %}

best,

Anton

4

Hey @ABroadbent3

I’ve actually done just this before!

What you need to do is use the content as the cookie key. This way your JS will be triggering on the key and value, assuming it’s set as a boolean.

Borrowing from @Anton 's answer, you can use the md5 filter to ensure the content is represented as a string with a predictable length when generating the key, saving you a headache or ten.

// read the cookie
if ( !readCookie({{module.property|md5}}) ) {
 // Show popup
}

// set cookie
createCookie({{module.property|md5}}, true, 10)

I’m using these functions

Please don’t hesitate to reach out if you have any questions!

Finally a little unsolicited perspective:

Managing cookies via module property values is inherently not easily managed at scale. If you have access to HubDB I would recommend using it to set, change, and expire your cookie values.