How To Guide: Spry Tabbed Content Panels-Dynamic

[DaveW]

I am going to try to summarize this while it is fresh in my mind. I do have an IT background, but am not a programmer, so I am not claiming to be an end all of information. Also, selfishly, if I write this down, I can reference it in the future.

It goes without saying that step 1 is to make a backup of your product listing template. You can have as many as you like, so I copied mine and make "listing_5" which shows up as listing 6 in the product advanced tab. I also tested on a not for sale product so I wasn't messing with live stuff that someone might be trying to purchase.

If you get this to work, you will have dynamic tabbed panels based. Tab 1 is the information in your current description field. The rest are based on your extra fields in the product listing, field 1-5 being the tab titles, fields 6-10 being the content for those tabs (e.g. field 1 title, 6 content for tab) If there is no information in the title or the content, the tab will not show up.

My plan for today is to move the review information to the last tab statically.

I generally cut and paste my code into Dreamweaver and back to the template. You could use any notepad or whatever to do this. There might be a way to do it using the wsywig tools in DW, but I don't know it and am more comfortable working in code.

Any little snippet of wrong code can cause all kinds of errors and problems. Check for these very carefully.

Step One: Get the SpryWidgets code and files. I got mine from DW. Upload the Spry Assets to the /web (root) directory of your 3d server. This folder has the SpryTabbedPanels.js and SpryTabbedPanels.css files.

2) Download the listings.js file from /web/assets/templates/common/js/

To be continued....

[DaveW]

3) Add the following text to the bottom of the listing.js file.

// SpryTabbedPanels.js - version 0.6 - Spry Pre-Release 1.6.1
//
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.

var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};

Spry.Widget.TabbedPanels = function(element, opts)
{
	this.element = this.getElement(element);
	this.defaultTab = 0; // Show the first panel by default.
	this.tabSelectedClass = "TabbedPanelsTabSelected";
	this.tabHoverClass = "TabbedPanelsTabHover";
	this.tabFocusedClass = "TabbedPanelsTabFocused";
	this.panelVisibleClass = "TabbedPanelsContentVisible";
	this.focusElement = null;
	this.hasFocus = false;
	this.currentTabIndex = 0;
	this.enableKeyboardNavigation = true;
	this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
	this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;

	Spry.Widget.TabbedPanels.setOptions(this, opts);

	// If the defaultTab is expressed as a number/index, convert
	// it to an element.

	if (typeof (this.defaultTab) == "number")
	{
		if (this.defaultTab < 0)
			this.defaultTab = 0;
		else
		{
			var count = this.getTabbedPanelCount();
			if (this.defaultTab >= count)
				this.defaultTab = (count > 1) ? (count - 1) : 0;
		}

		this.defaultTab = this.getTabs()[this.defaultTab];
	}

	// The defaultTab property is supposed to be the tab element for the tab content
	// to show by default. The caller is allowed to pass in the element itself or the
	// element's id, so we need to convert the current value to an element if necessary.

	if (this.defaultTab)
		this.defaultTab = this.getElement(this.defaultTab);

	this.attachBehaviors();
};

Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
{
	if (ele && typeof ele == "string")
		return document.getElementById(ele);
	return ele;
};

Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
{
	var children = [];
	var child = element.firstChild;
	while (child)
	{
		if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
			children.push(child);
		child = child.nextSibling;
	}
	return children;
};

Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
{
	if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
		return;
	ele.className += (ele.className ? " " : "") + className;
};

Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
{
	if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
		return;
	ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};

Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
	if (!optionsObj)
		return;
	for (var optionName in optionsObj)
	{
		if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
			continue;
		obj[optionName] = optionsObj[optionName];
	}
};

Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
{
	if (this.element)
	{
		var children = this.getElementChildren(this.element);
		if (children.length)
			return children[0];
	}
	return null;
};

Spry.Widget.TabbedPanels.prototype.getTabs = function()
{
	var tabs = [];
	var tg = this.getTabGroup();
	if (tg)
		tabs = this.getElementChildren(tg);
	return tabs;
};

Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
{
	if (this.element)
	{
		var children = this.getElementChildren(this.element);
		if (children.length > 1)
			return children[1];
	}
	return null;
};

Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
{
	var panels = [];
	var pg = this.getContentPanelGroup();
	if (pg)
		panels = this.getElementChildren(pg);
	return panels;
};

Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
{
	ele = this.getElement(ele);
	if (ele && arr && arr.length)
	{
		for (var i = 0; i < arr.length; i++)
		{
			if (ele == arr[i])
				return i;
		}
	}
	return -1;
};

Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
{
	var i = this.getIndex(ele, this.getTabs());
	if (i < 0)
		i = this.getIndex(ele, this.getContentPanels());
	return i;
};

Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
{
	return this.currentTabIndex;
};

Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
{
	return Math.min(this.getTabs().length, this.getContentPanels().length);
};

Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
{
	try
	{
		if (element.addEventListener)
			element.addEventListener(eventType, handler, capture);
		else if (element.attachEvent)
			element.attachEvent("on" + eventType, handler);
	}
	catch (e) {}
};

Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
{
	if (e.preventDefault) e.preventDefault();
	else e.returnValue = false;
	if (e.stopPropagation) e.stopPropagation();
	else e.cancelBubble = true;

	return false;
};

Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
{
	this.showPanel(tab);
	return this.cancelEvent(e);
};

Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
{
	this.addClassName(tab, this.tabHoverClass);
	return false;
};

Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
{
	this.removeClassName(tab, this.tabHoverClass);
	return false;
};

Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
{
	this.hasFocus = true;
	this.addClassName(tab, this.tabFocusedClass);
	return false;
};

Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
{
	this.hasFocus = false;
	this.removeClassName(tab, this.tabFocusedClass);
	return false;
};

Spry.Widget.TabbedPanels.KEY_UP = 38;
Spry.Widget.TabbedPanels.KEY_DOWN = 40;
Spry.Widget.TabbedPanels.KEY_LEFT = 37;
Spry.Widget.TabbedPanels.KEY_RIGHT = 39;

I had to break this code block up to fit in the posting character limit. Append the next one to this one.

To be continued....

[DaveW]

Append this code to the above

Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
{
	var key = e.keyCode;
	if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
		return true;

	var tabs = this.getTabs();
	for (var i =0; i < tabs.length; i++)
		if (tabs[i] == tab)
		{
			var el = false;
			if (key == this.previousPanelKeyCode && i > 0)
				el = tabs[i-1];
			else if (key == this.nextPanelKeyCode && i < tabs.length-1)
				el = tabs[i+1];

			if (el)
			{
				this.showPanel(el);
				el.focus();
				break;
			}
		}

	return this.cancelEvent(e);
};

Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
{
	var stopTraversal = false;
	if (root)
	{
		stopTraversal = func(root);
		if (root.hasChildNodes())
		{
			var child = root.firstChild;
			while (!stopTraversal && child)
			{
				stopTraversal = this.preorderTraversal(child, func);
				try { child = child.nextSibling; } catch (e) { child = null; }
			}
		}
	}
	return stopTraversal;
};

Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
{
	var self = this;
	Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);
	Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
	Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);

	if (this.enableKeyboardNavigation)
	{
		// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
		// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
		// by default.

		// Find the first element within the tab container that has a tabindex or the first
		// anchor tag.
		
		var tabIndexEle = null;
		var tabAnchorEle = null;

		this.preorderTraversal(tab, function(node) {
			if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
			{
				var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
				if (tabIndexAttr)
				{
					tabIndexEle = node;
					return true;
				}
				if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
					tabAnchorEle = node;
			}
			return false;
		});

		if (tabIndexEle)
			this.focusElement = tabIndexEle;
		else if (tabAnchorEle)
			this.focusElement = tabAnchorEle;

		if (this.focusElement)
		{
			Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
			Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
			Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
		}
	}
};

Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
{
	var tpIndex = -1;
	
	if (typeof elementOrIndex == "number")
		tpIndex = elementOrIndex;
	else // Must be the element for the tab or content panel.
		tpIndex = this.getTabIndex(elementOrIndex);
	
	if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
		return;

	var tabs = this.getTabs();
	var panels = this.getContentPanels();

	var numTabbedPanels = Math.max(tabs.length, panels.length);

	for (var i = 0; i < numTabbedPanels; i++)
	{
		if (i != tpIndex)
		{
			if (tabs[i])
				this.removeClassName(tabs[i], this.tabSelectedClass);
			if (panels[i])
			{
				this.removeClassName(panels[i], this.panelVisibleClass);
				panels[i].style.display = "none";
			}
		}
	}

	this.addClassName(tabs[tpIndex], this.tabSelectedClass);
	this.addClassName(panels[tpIndex], this.panelVisibleClass);
	panels[tpIndex].style.display = "block";

	this.currentTabIndex = tpIndex;
};

Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
{
	var tabs = this.getTabs();
	var panels = this.getContentPanels();
	var panelCount = this.getTabbedPanelCount();

	for (var i = 0; i < panelCount; i++)
		this.addPanelEventListeners(tabs[i], panels[i]);

	this.showPanel(this.defaultTab);
};

4) Upload this modified file to another location. We do not have rights to modifiy the file in the stock location and you want to put it somewhere it will not get overwritten. I put mine in /web/assets/templates/layout1/

5) Open your listing_x.html file

6) Insert the following code at the very beginning of the file. NOTE: The directory in the first line must match where you put the modified listing.js file. The directory in the other two lines must also match where you put the SpryAssets files if you put them in an alternate location from where I did.

<script language="JavaScript" src="assets/templates/layout1/listing.js" type="text/JavaScript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">

7) Find the <!--START: extrafields--> section.

8) Erase EVERYTHING between <!--START: extrafields--> and <!--END: extrafields-->

9) Insert the following code in that space.

<!--Create the Tabbed Panel widget and assign classes to each element-->
	<div class="TabbedPanels" id="tp1">
	<ul class="TabbedPanelsTabGroup">
		<li class="TabbedPanelsTab" tabindex="0">Description</li>
		<!--START: extra_field_1--><li class="TabbedPanelsTab" tabindex="0">[extra_field_1]</li><!--END: extra_field_1-->
		<!--START: extra_field_2--><li class="TabbedPanelsTab" tabindex="0">[extra_field_2]</li><!--END: extra_field_2-->
        <!--START: extra_field_3--><li class="TabbedPanelsTab" tabindex="0">[extra_field_3]</li><!--END: extra_field_3-->
        <!--START: extra_field_4--><li class="TabbedPanelsTab" tabindex="0">[extra_field_4]</li><!--END: extra_field_4-->
        <!--START: extra_field_5--><li class="TabbedPanelsTab" tabindex="0">[extra_field_5]</li><!--END: extra_field_5-->
        	</ul>
	<div class="TabbedPanelsContentGroup">
		<div class="TabbedPanelsContent"><span class="item">[extended_description]<br><br><strong></div>
		<!--START: extra_field_6--><div class="TabbedPanelsContent">[extra_field_6]</div><!--END: extra_field_6-->
        <!--START: extra_field_7--><div class="TabbedPanelsContent">[extra_field_7]</div><!--END: extra_field_7-->
        <!--START: extra_field_8--><div class="TabbedPanelsContent">[extra_field_8]</div><!--END: extra_field_8-->
        <!--START: extra_field_9--><div class="TabbedPanelsContent">[extra_field_9]</div><!--END: extra_field_9-->
        <!--START: extra_field_10--><div class="TabbedPanelsContent">[extra_field_10]</div><!--END: extra_field_10-->
	</div>
</div>
<script language="JavaScript" type="text/javascript"> 
var tp1 = new Spry.Widget.TabbedPanels("tp1", { defaultTab: 0 });
</script>

10) Save your changes and upload or copy/paste you code to the site.

11) Test. Make sure that everything works on the page, including add to cart (ask me how I know this :))

Troubleshooting:

1) Tables in tabs break page: On my setup, there was a snippet of code in the <!--START: extrafields--> section that said something like this: <table width="95%" cellpadding="4" cellspacing="0">

I think it was left over from the original code or I accidentily copied it from whoever I stole the code from :) in one of the Tabbed Content Threads here.

Anyway, this code basically starts a table without closing it. So, if you do not have a table in your tab, it works fine, but as soon as you put a table, it closes it and puts the content after the phantom table breaking the page.

You want to check very carefully that the only code between the <--START and <--END extrafields is what I put in there.

2) Items don't dynamically update when you put info in the extra fields on the product listing:

Your Extra Field tag is incorrect. Make sure that any reference to ExtraFields in the code is extra_field_1. Not extrafield1, or extra_field1 or extrafield_1.

This goes if you use any other dymanic tag in this area. Make sure it matches the field name EXACTLY from the KB article showing the tags available on a product page.

3) Can't add items to cart, get "Errors on page" notice in IE.

You have an extra snippet of code on your page. Review line by line and remove. In my case, there was a random "<--" with nothing else right in the middle. It might be a Dreamweaver thing or whatever, but it breaks the page.

Content Change on Tabs

You can change the content on the various tabs to be static or dynamic or whatever buy changing the information in the code where it says "[extra_field_x]"

Replace "[extra_field_1]" (and nothing else) with either HTML code or another database tag.

The database tags that work on a product page are listed in this KB article: https://support.3dcart.com/index.php...eid=80&nav=0,7

I hope this helps future people wanting to do this relatively simple mod to thier cart. If you notice errors, or you did things differently, please respond so this thread can become a resource for future users.

DaveW

[Evolution]

Thanks for the tips Dave.

Do you have a link to a site with them working as an example??

[DaveW]

Yes, we at least the one product we have enabled it on so far. :)

http://www.soloperformance.com/Solot...er_p_1234.html

I added reviews today.

I would probably recommend staying away from Dreamweaver for doing your code edits. It seems to leave odd code snippets, or something I am doing to it is causing it to leave odd code snippets. :)

I seem to not get those when I use Notepad.

DaveW

[piaf]

.... Step One: Get the SpryWidgets code and files. I got mine from DW. Upload the Spry Assets to the /web (root) directory of your 3d server. This folder has the SpryTabbedPanels.js and SpryTabbedPanels.css files.

2) Download the listings.js file from /web/assets/templates/common/js/

To be continued....

I don't have or use Dreamweaver (I just use notepad for coding), so can you tell me where to find the specific files you used to accomplish this? Is it just the one .js file and the one .css file? Or are there more? You mentioned Spry Assets... is that a folder of files or what? Can you be more specific about the files and their names for those of us who don't have DreamWeaver? Also, if there's any version numbers, that would be helpful too. Thanks :)

[DaveW]

Looks like you can get it here: http://labs.adobe.com/technologies/spry/

HTH,

DaveW

[concession-supply.com]

We used a very similar implementation.
We wanted dynamic tabs to incorporate product videos dynamically.
Work pretty well. Been using it about 6-8 months, I think.
Sample here: http://www.concession-supply.com/Gol...ine_p_689.html

[BackyardPoolSuperstore]

Hopefully you guys can help me out here.

I am trying to implement the Spry Tabbed Content into my product listing page.

I am having two problems:

1. The tabbed box is ontop of the product listing page instead of underneath, I followed the guide exactly and even tried it again fresh, and it continues to place it up top.

2. The tab defaults to the middle tab, instead of the description. Any idea on why this would be?

http://backyardpoolsuperstore.3dcart...utton_p_7.html

Thanks for the help!

[DaveW]

Trust me, I am no expert, but I will try :)

The default tab is set in this code: (taken from your source)

<script language="JavaScript" type="text/javascript">
var tp1 = new Spry.Widget.TabbedPanels("tp1", { defaultTab: 2 });
</script>

I also think that you *might* have your code misplaced. There is review and product features between the main tab code and the above section. This might be an issue with the placement, though I am not sure.

DaveW

EDIT: PS If you still can't get it, email me your page code, it is easier to review that way. dave (at) wcsllc (dot) net

[BackyardPoolSuperstore]

Thanks Dave!

I fixed the default tab, not sure how that got changed.

I am working on the placement, will let you know when I find out.

Another question, for the dynamic tabs using the extra fields. They work out correctly in IE and Chrome, but get all mixed up in firefox. Any idea?

[DaveW]

No idea on FF, but mine also blows up there. :(

DaveW

[aikencolon]

I am not sure about the javascript used in this, looks like an adobe product of some sort, but jquery and mooflow have fixes for firefox. The new Firefox just came out this morning, you might want to download it to see if it fixes it. If not try to find the fix for the app with a simple google search of the script name and mozilla/firefox.

If you want to tackle another project like this you might want to try it in jquery. There is a huge community of jquery developers out there, so there are a ton of jquery scripts available, most for free.

Here is one I am horsing with right now: http://www.aikencolon.com/Test_ep_35.html

If you are comfortable with reading HTML & CSS, as far as figuring out what is going on, javascript is not too much tougher.

Here are some sites for jquery tab'd navigation/menus/etc.

http://www.hongkiat.com/blog/50-nice...ation-scripts/

http://designm.ag/resources/jquery-navigation-plugins/

http://designm.ag/resources/jquery-navigation-plugins/ - check out number 5, 8 and 25. I am horsing with those currently.

[widgets]

Seriously, the tabs feature should already be included without all this fooling around. Its 2011 in a week for goodness, people are moving on to more advanced features already. But thanks Dave for the tips.

[crasher64]

Hello Dave...Your site is looking great. You were kind enough to respond to me a few weeks ago and I am just getting back to the "tab" issue. I have successfully implemented tabs on one of my listing pages and now I am on to content. I am trying to insert my "related" products in one of my tabs but can't figure it out. Per your instructions I tried just inserting the start related 0 and stop related 0 in place of extra field 7...but it won't work...I also tried following your link to the db tags but the link is dead...Am I totally whacked on thinking I should be able to do this? Here is the link to my sample product with the unedited code you provided on the forum...Sorry for the long wind...