I need to integrate a specific javascript in certain CMS pages, from what I've read here in stackexchange I can accomplish this by editing the Layout Update XML,
but I don't know how to actually do it since it has a js file, css file and html content to display on the pop-up.
This is the sample HTML for the script:
<!DOCTYPE html>
<html>
<head>
<title>OuiBounce Testing Page</title>
<!-- Example page base styling -->
<!-- Don't worry abou this -->
<style>
body {
background-color: #F0F1F2;
color: #2E4052;
min-height: 500px;
padding: 0;
-webkit-font-smoothing: antialiased;
font-family: sans-serif;
}
</style>
<!-- Add the OuiBounce CSS & Font -->
<link rel="stylesheet" href="ouibounce.min.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<!-- Load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Add OuiBounce JS -->
<script src="../build/ouibounce.js"></script>
</head>
<body>
<!-- Example page instructions -->
<h1>Try leaving this page to fire OuiBounce</h1>
<!-- OuiBounce Modal -->
<div id="ouibounce-modal">
<div class="underlay"></div>
<div class="modal">
<div class="modal-title">
<h3>This is a OuiBounce modal!</h3>
</div>
<div class="modal-body">
<p>A doge is an elected chief of state lordship, the ruler of the Republic in many of the Italian city states during the medieval and renaissance periods, in the Italian "crowned republics".</p>
<p>The word is from a Venetian word that descends from the Latin dux (as do the English duke and the standard Italian duce and duca), meaning "leader", especially in a military context. The wife of a doge is styled a dogaressa. <a href="https://en.wikipedia.org/wiki/Doge" target="blank">[1]</a></p>
<form>
<input type="text" placeholder="[email protected]">
<input type="submit" value="learn more »">
<p class="form-notice">*this is a fake form</p>
</form>
</div>
<div class="modal-footer">
<p>no thanks</p>
</div>
</div>
</div>
<!-- Example page JS -->
<!-- Used to fire the modal -->
<script>
// if you want to use the 'fire' or 'disable' fn,
// you need to save OuiBounce to an object
var _ouiBounce = ouiBounce(document.getElementById('ouibounce-modal'), {
aggressive: true,
timer: 0,
callback: function() { console.log('ouiBounce fired!'); }
});
$('body').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal-footer').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal').on('click', function(e) {
e.stopPropagation();
});
</script>
</body>
</html>
From what I've checked so far, the correct approach would be to add this:
<reference name="head">
<action method="addItem">
<type>skin_js</type><script>ouibounce.js</script>
</action>
<action method="addItem">
<type>skin_css</type><script>ouibounce.min.css</script>
</action>
</reference>
But what about the div content, where should I add that?
<div id="ouibounce-modal">
<div class="underlay"></div>
<div class="modal">
<div class="modal-title">
<h3>This is a OuiBounce modal!</h3>
</div>
<div class="modal-body">
<p>A doge is an elected chief of state lordship, the ruler of the Republic in many of the Italian city states during the medieval and renaissance periods, in the Italian "crowned republics".</p>
<p>The word is from a Venetian word that descends from the Latin dux (as do the English duke and the standard Italian duce and duca), meaning "leader", especially in a military context. The wife of a doge is styled a dogaressa. <a href="https://en.wikipedia.org/wiki/Doge" target="blank">[1]</a></p>
<form>
<input type="text" placeholder="[email protected]">
<input type="submit" value="learn more »">
<p class="form-notice">*this is a fake form</p>
</form>
</div>
<div class="modal-footer">
<p>no thanks</p>
</div>
</div>
</div>
Thank you, Tiago
