Customizing a variant using JavaScript, HTML, or CSS
You can add custom JavaScript, HTML, or CSS to a variant in an A/B or multivariate test. This is useful when you want to test changes to your site that are more complex than simple visual changes, or you want to completely redesign a part of your website. Custom variant code only runs for visitors who are generated into that variant. If you want to add JavaScript, which is run for all visitors in the campaign, see adding custom JavaScript to all campaign visitors (all variants).
In this example, we want to apply JavaScript code. We can turn the prices green for any product that costs less than $50.00 by using the following code:
- With a non-default variant selected, open the code editor.
- Enter the desired CSS, JavaScript, or HTML code, then click Save.
- This code runs on your page when your campaign's rendering script calls the
renderer.runVariantJs()method,dom.addCss()method, or by referencing the CSS and HTML variables within your variant code (http://docs.oracle.com/cloud/latest/marketingcs_gs/OMCGB).
<script>
var prices = document.querySelectorAll('.special-price');
for(var i = 0; i < prices.length; i++) {
var price = prices[i].innerHTML.replace(/\D/g, '') / 100;
if ((price) <= 50) {
prices[i].style.color = 'green';
}
}
</script>