Background:
I have a custom Shopify theme that uses CSS “animation: none !important “ when the user has prefers-reduced-motion on.
I know this is not recommended behavior, but it touches too many things for me to remove it completely.
I have modified the CSS and added JavaScript so that popup signup form will close properly using either the X or clicking outside the form..
I am now trying to make clicking on a teaser re-open the popup form.
Problem:
When prefers-reduced-motion is off, everything works fine. I can click on the teaser and close the popup form as many times as I want.
When prefers-reduced-motion is on, clicking on the teaser opens the popup form once. After the popup is closed it will not open again. I have added console.logs and I can see that the click event is firing the first time, but never again. I can see in dev tools that the event listener on the teaser button is still set. Even when I rebuild the event listener on the teaser when the popup is closed it still will not fire again.
The JavaScript to open the form is
window._klOnsite = window._klOnsite || [];
window._klOnsite.push(['openForm', formID]);
I have read that JavaScript triggers can be blocked by form settings that prevent showing the form after the user dismisses it. Is there a way around that for teasers? Clearly the Klaviyo native teaser code can ignore it.
