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
1 Answer 1
A few different ways to add the content.
1) Simply insert your <div> content into the section of the CMS page under Page Information > Content. Insert your <div> content into the large text area, save CMS Page.
2) You can create a new Static Block, under CMS > Static Blocks. Insert <div> content in static block, save Static Block. In CMS page, on Page Information > Content click on Insert Widget and select Widget Type > CMS Static Block, choose CMS Static Block Default Template and then 'Select Block' choose block you just created, click 'Insert Widget', save CMS Page.
Hope that helps.
-
I already accepted your answer. I can't give points because I don't have 15points yet.Tiago– Tiago2014年04月19日 19:01:03 +00:00Commented Apr 19, 2014 at 19:01
Explore related questions
See similar questions with these tags.