WCS Tip: Content carousel in any spot.

In this post we will show the power of E-Marketing spots. With a small knowledge in JS coding, we can produce a carousel in any spot, to rotate your contents, and obtain results like this:

carrousselTo do this, we must follow 3 basic steps:

  1. Enable cross-site scripting in spots
  2. Upload the jQuery lib to an accessible path in your domain.
  3. Create the content carousel and associate it to the spot.

1 – Enable Cross-Site scripting is spots.

By default, cross-site scripting is disabled in WCS. To enable this, we just have to change a property in the wc-server.xml file. This change allows uscreating advanced HTML and JS code inside spots. If you are in a production environment, ask your System Administrator to follow the steps from Infocenter:

http://pic.dhe.ibm.com/infocenter/wchelp/v7r0m0/topic/com.ibm.commerce.admin.doc/tasks/tsecsssp.htm

If you are in your local environment, just change a wc-server.xml line:

<PasswordProtectedCmds display="false" enabled="true" retries="3"/>

to:

<PasswordProtectedCmds display="false" enabled="false" retries="3"/>

Restart the server and you will be able to start coding inside the spots.

 

2 – Upload the jQuery lib to an accessible path in your domain.

To use the code template I provided below, we need to load the jQuery lib.

You can download it from here:

http://jquery.com/download/

After downloading it, just use the asset tool to upload your jQuery lib to any valid path. This jQuery must be in a valid URL, accessible from your browser.

3 – Create the content carousel and associate it to the spot.

To make this simple carousel, I created the following (sample) code:

Content switcher code  (quoted at the end of the post)

Where:

  • <script type=”text/javascript” src=”http://localhost/webapp/wcs/preview/Aurora/jquery-1.9.1.min.js”></script>

Must be replaced for the full qualified path for the jQuery lib.

  • prefix_spot : ‘ContentAreaESpotImg_MenRow1_Content_’, //spot prefix

Must be replaced by the ID of the spot that you want the carousel in.

But how do I get my spot’s id?

That’s very simple. With Google Chrome Inspector opened, just look for the spot you want, and copy the ID. Don’t forget to “delete” the Content_X, this way, you can put as many contents as you want in the carousel.

spotidAfter competing the code changes with your jQuery Lib and your Spot’s ID, create a new content, and paste the code inside it. Don’t forget to mark it as HTML code.

carrousselcontentOnce your content is saved, just drag and drop it to the Web Activity’s “Recommend Content” action, in the last position.

draganddropscriptPut as many contents as you want, and the script will automatically make the carroussel.

multipleNote that you can also change the position and time between frame displays by editing the following values:

  • PlayerHome.container.setAttribute(‘style’, ‘position:relative;width:710px;height:351px;’);
  • container.setAttribute(‘style’, ‘position:absolute;right:6px;top:320px;’);
  • player_interval : 5, //in seconds 

If you have any questions or doubts, please, feel free to contact me or leave a comment.

Following the code quoted: (by facebook.com//terravilor)

WCS

<script type="text/javascript" src="http://localhost/webapp/wcs/preview/Aurora/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var PlayerHome = {
prefix_spot : 'ContentAreaESpotImg_MenRow1_Content_', //spot prefix
player_interval : 5, //in seconds
contents : Array(),
curr_spot : 0,
container : null,
interval : 0,
initPlayer : function() {
PlayerHome.getInstances();
},
getInstances : function() {
var i = 1;
while (LibUtils.isInDocument(document.getElementById(PlayerHome.prefix_spot + i))) {
PlayerHome.contents.push(document.getElementById(PlayerHome.prefix_spot + i));
i++;
}

PlayerHome.createNavPlayer();
},
initNav : function() {
for (var i = 0; i < PlayerHome.contents.length; i++) {
var el = PlayerHome.contents[i];
el.style.position = 'absolute';
el.style.top = '0';
el.style.left = '0';
el.style.display = 'none';

var nav = document.getElementById('button_player_' + i);
if (i == PlayerHome.curr_spot) {
LibUtils.addClass(el, 'active');
LibUtils.addClass(nav, 'active');
nav.style.background = '#4a6580';
} else {
LibUtils.removeClass(el, 'active');
LibUtils.removeClass(nav, 'active');
nav.style.background = '#b2b2b2';
}
}

PlayerHome.hideOthers();
},
createNavPlayer : function() {
var item = PlayerHome.contents[0];
var par = item.parentNode;
PlayerHome.container = par.parentNode;
PlayerHome.container.setAttribute('style', 'position:relative;width:710px;height:351px;');

//cria o player
if (PlayerHome.contents.length > 1) {
//eventos do timer
LibUtils.addEventListener(PlayerHome.container, 'mouseover', PlayerHome.onOverContainer);
LibUtils.addEventListener(PlayerHome.container, 'mouseout', PlayerHome.onOutContainer);
window.onfocus = function (event){ PlayerHome.handleFocus(event) };
window.onblur = function (event){ PlayerHome.handleFocus(event) };

var container = document.createElement('div');
container.setAttribute('style', 'position:absolute;right:6px;top:320px;');
PlayerHome.container.appendChild(container);
for(var i = 0; i < PlayerHome.contents.length; i++) {
var link = document.createElement('a');
link.setAttribute('id', 'button_player_' + i);
link.setAttribute('href', i);
link.setAttribute('style', 'border-radius:50%;width:13px;height:13px;background:#b2b2b2;display:block;float:left;margin-right:5px;');
LibUtils.addEventListener(link, 'click', PlayerHome.handleClick);
LibUtils.addEventListener(link, 'mouseover', PlayerHome.onOverPlayer);
LibUtils.addEventListener(link, 'mouseout', PlayerHome.onOutPlayer);
container.appendChild(link);
}

PlayerHome.initNav();
PlayerHome.interval = setInterval(PlayerHome.handleInterval, PlayerHome.player_interval * 1000);
}
},
hideOthers : function() {
for (var i = 0; i < PlayerHome.contents.length; i++) {
var el = PlayerHome.contents[i];
LibUtils.fade(el);
}
},
handleClick : function(e) {
LibUtils.cancelDefaultEvent(evt);

var evt = e || window.event;
var el = (evt.currentTarget) ? evt.currentTarget : evt.srcElement;
var activate = el.getAttribute('href');

PlayerHome.curr_spot = activate;
PlayerHome.initNav();
},
onOverPlayer : function(e) {
LibUtils.cancelDefaultEvent(evt);

var evt = e || window.event;
var el = (evt.currentTarget) ? evt.currentTarget : evt.srcElement;
el.style.background = '#4a6580';
},
onOutPlayer : function(e) {
LibUtils.cancelDefaultEvent(evt);

var evt = e || window.event;
var el = (evt.currentTarget) ? evt.currentTarget : evt.srcElement;
if (!LibUtils.hasClass(el, 'active')) el.style.background = '#b2b2b2';
},
handleInterval : function() {
PlayerHome.curr_spot++;
if (PlayerHome.curr_spot > PlayerHome.contents.length - 1) PlayerHome.curr_spot = 0;

PlayerHome.initNav()
},
onOverContainer : function(evt) {
clearInterval(PlayerHome.interval);
},
onOutContainer : function(evt) {
PlayerHome.interval = setInterval(PlayerHome.handleInterval, PlayerHome.player_interval * 1000);
},
handleFocus : function(evt) {
if (evt.type == 'blur') {
clearInterval(PlayerHome.interval);
} else {
if (PlayerHome.contents.length > 1) PlayerHome.interval = setInterval(PlayerHome.handleInterval, PlayerHome.player_interval * 1000);
}
}
};

var LibUtils = {
isInDocument : function(el) {
var html = document.body.parentNode;

while (el) {
if (el === html) {
return true;
}
el = el.parentNode;
}

return false;
},
hasClass : function(el, name) {
return new RegExp('(\\s|^)' + name + '(\\s|$)').test(el.className);
},
addClass : function(el, name) {
if (!LibUtils.hasClass(el, name)) { el.className += (el.className ? ' ' : '') +name; }
},
removeClass : function(el, name) {
if (LibUtils.hasClass(el, name)) {
el.className = el.className.replace(new RegExp('(\\s|^)' + name + '(\\s|$)'),' ').replace(/^\s+|\s+$/g, '');
}
},
addEventListener : function (html_element, event_name, event_function) {
if(html_element.attachEvent) { //IE
html_element.attachEvent("on" + event_name, function() {event_function.call(html_element);});
} else if(html_element.addEventListener) { //outros
html_element.addEventListener(event_name, event_function, false);
}
},
cancelDefaultEvent : function(e) {
var evt = e || window.event;

if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.cancelBubble = true;
evt.returnValue = false;
}
},
fade : function(el) {
var op = 1;

if (!LibUtils.hasClass(el, 'active')) {
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
el.style.display = 'none';
}
el.style.opacity = op;
el.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
}, 10);
} else if (LibUtils.hasClass(el, 'active')) {
el.style.display = 'block';

var op = 0.1;
var timer = setInterval(function () {
if (op >= 1.0){
clearInterval(timer);
}
el.style.opacity = op;
el.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
}, 5);
}
}
};

PlayerHome.initPlayer();
</script>