Some Monetate actions, such as Insert HTML actions, may not always perform as expected in a single-page React application. React may produce warnings and revert content, depending on the application and the use of these actions.
For this example, your site has a single-page React application on which you want to insert HTML to override the product description on a product page.
There are a few ways to get around the issues that React may cause.
Using CSS Actions to Hide/Show Content
You can use an action that inserts CSS.
- Render a content block (whether it is a
<div>or some other HTML element) for each description option. - Create an experience with CSS actions that toggles the visibility of this content.
Using JavaScript Actions to Trigger a Callback Function
You can use an action that inserts JavaScript.
- Expose a function that makes the changes you want.
- The code example uses events.
- If you have jQuery on your site, then you could also use jQuery triggers in this instance.
- Create an experience with JavaScript actions that trigger the defined event(s).
Insert JavaScript Action Code Sample
const productDesc = '<p>My product description alternate</p>';
// Using initCustomEvent is deprecated but is the
// IE compatible way so using for this example.
// Could use JQuery's triggers or similar http://api.jquery.com/trigger/
const pdpDescEvent = document.createEvent('CustomEvent');
pdpDescEvent.initCustomEvent('pdp-desc', true, true, productDesc);
document.dispatchEvent(pdpDescEvent);Event Listener on Your Site Code Sample
document.addEventListener('pdp-desc', e => {
// e.detail is your new content
// do whatever you need to with this
// eventually render using dangerouslySetInnerHTML attribute
}, false);