====== Displaying the Long Product Description Using Tabs ======

===== Tabbed Layout Leveraging Spry =====

As you might have read elsewhere in the ProductCart documentation, our shopping cart software uses Adobe®'s Spry framework for a variety of useful things. Using a good framework like Spry allows you and us to quickly introduce features into ProductCart without reinventing the wheel, when applicable.

Among other things, Spry includes good support for "tabbed panels", as they call them. See this [[http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample.htm|demo page on the Spry Web site]] for several examples.

===== Leveraging Tabbed Panels in ProductCart =====

We use the Spry Tabbed Panels in a few places already in ProductCart. For example, the Add and Modify Product pages in the Control Panel take advantage of these tools in version 3.5 and above. Technical users can take a look at a page like "modifyProduct.asp" in the "pcadmin" folder to see how tabs were implemented on that page.

==== Recommendations ====

The JavaScript that is used by Tabbed Panels will be the same for all uses of it in ProductCart. However, the CSS that styles the panels, switching between vertical and horizontal navigation for the tabs for instance, can change from page to page. Therefore, we recommend using a page-specific CSS document.

For example, the Add/Modify Product pages in the Control Panel use a modified version of the default CSS document for Tabbed Panels called "SpryTabbedPanels-PP.css", where "PP" stands for "Product Pages". We will use this recommendation when taking advantage of this feature in the product description.

==== Using Tabbed Panels in the Product Description ====

Let's see how we can take advantage of Spry's Tabbed Panels to organize the long product description for any products in tabs.

=== Copy and Rename the CSS File ===

First, let's implement the recommendation mentioned above.

  * Go into the "includes/spry" folder
  * Find the file "SpryTabbedPanels.css"
  * Copy it and rename it "SpryTabbedPanels-PD.css", where "PD" stands of Product Description

=== A Small Edit Source Code Edit ===

We need to perform a small edit to the source code to introduce the Spry files that we will leverage for this feature.

  * Download the file viewPrd.asp from the pc folder to your desktop
  * Open the file and locate the following line of code: <code><!--#include file="header.asp"--></code>
  * Replace it with the following (we added two ASP comments so you can easily identify what the code is for later):<code><!--#include file="header.asp"-->
<% ' START - Spry files for Tabbed Navigation %>
<link href="../includes/spry/SpryTabbedPanels-PD.css" rel="stylesheet" type="text/css" />
<script src="../includes/spry/SpryTabbedPanels.js" type="text/javascript"></script>
<% ' END - Spry files Tabbed Navigation %></code>

=== Editing the Product Description ===

Now we just need to know what to put in the product description to take advantage of this feature. In this example, let's assume that we want to have 3 tabs:

  * Details
  * Features
  * Gift Ideas

Go to the Control Panel, locate a product, and go to the Long Description field (Do **NOT** use the HTML editor when creating or editing tabbed descriptions). Here is the code that you will need to use:

<code>
<div class="TabbedPanels" id="TabbedPanels1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab">Details</li> 
<li class="TabbedPanelsTab">Features</li>
<li class="TabbedPanelsTab">Gift Ideas</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">These are the product details</div>
<div class="TabbedPanelsContent">This is a list of features included in this product</div>
<div class="TabbedPanelsContent">Here are some ideas of what a wonderful gift this product can be</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</code>

Here is a brief description (see the next section for detailed instructions):

  * "TabbedPanels1" is the "ID" of the tabbed layout. It must match the one used in the "script" code at the bottom. Otherwise the tabs will not work.
  * The DIV "TabbedPanelsTabGroup" includes the navigation
  * The DIV "TabbedPanelsContentGroup" includes the content that you want to show in each tab

Here is an example.

{{:how_to:pctabbed_layout_example.gif|An example of tabbed layout applied to the product description}}

==== Detailed Instructions on Tabbed Panels ====

Remember that we are leveraging a feature in the Spry framework. So you can take advantage of all the flexibility that is built into it, without doing much work at all. See the following articles for more information:

  * [[http://labs.adobe.com/technologies/spry/articles/tabbed_panel/|Detailed user guide for Tabbed Panels]]
  * [[http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample.htm|Examples of different tab styles]]

Please note that Early Impact does not provide assistance or support related to a customer's decision to incorporate Tabbed Panels into their own storefront.