While using the powerful rich text attribute to insert CTA’s into rich text, we recently had a interaction with the CTA’s interaction trigger button break.
Our dev team can’t figure out the reason because it was working the morning of Dec. 2 and broke after we republished the site a few hours later, despite making no changes to the code or page.
The script below triggers a pop-up modal to appear after a user clicks a CTA button. The CTA blocks were placed into our rich text as expected, but the button trigger for the pop-up no longer worked.
<script>
$(document).ready(function() {
setTimeout(() => {
$('.cta-dropdown_link, .button.is-device-trigger, .swiper-box').on('click', function() {
const phoneId = $(this).data('phone-id');
$('#deal-modal').find('.details-modal--widget-wrap>div').remove();
$('#deal-modal').find('.details-modal--widget-wrap').append('<div id="navi-phone-onboarding-widget-3-'+phoneId+'"></div>');
createWidget(
'#navi-phone-onboarding-widget-3-'+phoneId,
'prod',
phoneId,
{
getUtms: true,
contentId: 'post-cta_{{wf {"path":"slug","type":"PlainText"\} }}',
style: 'min-height: 625px'
}
);
$('#deal-modal').show();
})
$('.details-modal--background-overlay').on('click', function() {
$('#deal-modal').hide();
closeModal();
});
$('.close-modal').on('click', function() {
$('#deal-modal').hide();
closeModal();
});
function closeModal() {
$('#deal-modal').find('.details-modal--widget-wrap>div').remove();
}
}, 0)
});
</script>
This same type of button->pop up script is used on another page on our site, and that stayed working, and the difference is it isn’t placed inside rich text using attributes. So we suspect there’s some problem with the mechanics of the attribute.
We can’t figure out what changed to make it break, as our site activity logs show no changes made between publishes. We’ve ruled out a lot of culprits and are wondering if anything was updated on Finsweet’s side to cause a change.
Finsweet’s attributes update log shows some changes to Powerful Rich Text, but Finsweet curiously offers no dates, so we can’t determine the relevancy.
One of our developers was able to find a hot fix that gets the pop-up working again using the script below. Below I’m also placing links to a page where the pop-up works on our live site, and a page from a duplicate project I created where it doesn’t work.
In addition to this fix, we’d like to understand why it broke to prevent/troubleshoot in the future.
<!-- POPUP INSIDE RTE -->
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push(['richtext', () => {
window.Webflow?.destroy();
window.Webflow?.ready();
window.Webflow?.require('ix2').init();
initSidebarWidget();
document.dispatchEvent(new Event('readystatechange'));
}]);
function initSidebarWidget() {
$('.deals-eligibility--dark').on('click', function() {
const phoneId = $(this).data('phone-id');
$('#deal-modal').find('.details-modal--widget-wrap>div').remove();
$('#deal-modal').find('.details-modal--widget-wrap').append('<div id="navi-phone-onboarding-widget-3-'+phoneId+'"></div>');
createWidget(
'#navi-phone-onboarding-widget-3-'+phoneId,
'prod',
phoneId,
{
getUtms: true,
contentId: 'carrier-phones-deal }}',
style: 'min-height: 625px'
}
);
$('#deal-modal').show();
})
$('.details-modal--background-overlay').on('click', function() {
$('#deal-modal').hide();
closeModal();
});
$('.close-modal').on('click', function() {
$('#deal-modal').hide();
closeModal();
});
function closeModal() {
$('#deal-modal').find('.details-modal--widget-wrap>div').remove();
}
};
</script>
Project read-only link: https://preview.webflow.com/preview/navi-t?utm_medium=preview_link&utm_source=designer[…]bf1cfecba2&pageId=66bf9b740b99953252f78f79&workflow=preview
Page with buttons working: iPhone Text Effects: A How-to Guide
Page with buttons not working: iPhone Text Effects: A How-to Guide
