Thread: Tabbed XML

Hi,

http://manual.aspdotnetstorefront.co...l-package.aspx The screen shot shown at this link has the tabbed template but when I use the product.tabbedui.xml.config, it shows them like ordered list. How can I make it look like tabs? Let me know. Thanks.

Ram

Please make sure that you have TabbedUI style elements defined on the {root}/skins/Skin_#/style.css. I believe your site is an upgraded one, extract the installer somewhere, then open the above mentioned CSS file, then copy the TabbedUI prototypes and paste them on the current skin you're using.

I copied the TabbedUI prototypes to the .css file but still no change. What else should I do to make it work?

In the tabbedUI XML package, there is a line <ul id="productTabs" class="shadetabs">, but I don't see 'productTabs' and 'shadetabs' in the css file.

This is not present out of the box. The CSS elements that are defined on the default copy of product.tabbedUI.xml.config are pagetabs and tabcontent only. Maybe your copy of such file was modified and someone might have added those IDs.

I was using the old TabbedUI.xml.config file. It works now! Thanks.

One more question, I need to modify the code for Related Products and Upsell Products. Where can I find the code? Thanks.

You should be able to find it under {root}/XmlPackages folder. Each has their own xmlpackage: relatedproducts.xml.config and upsellproducts.xml.config

Thank you.

What is the difference between Upsell Products and Related Products?

Upsell products somewhat poses a strategy of convincing the customer to purchase another product that is higher in value and quality to the product that the customer is trying to purchase for the time being, while related products are those which are, in some way has a similarity like for instance you have a bike product, its related products could be motorcycle peripherals, stuff related to it; however, both give store admins the ability to cross-sell or recommend additional products to their customers.

Thank you.

Which XML package does the shopping cart use? Thanks.

It doesn't use an xmlpackage, but a web form (shoppingcart.aspx page) and a code-behind file.

I have customized the tabbed XML package and it works quite nicely in Firefox but when I open it in IE it completely mangles the whole layout. How can I make it compatible to IE as well? Could anyone help me with this? Thanks.

Could you please attach a screen shot of what you see?

I have attached both Firefox and IE screen shots. The issues I'm having in IE are

1. The table border (bottom) is missing in IE.
2. I'm using Red color for Active tab and blue color for non-active tab but when i change the tab from one active tab to another, the color doesn't change.

Any update?

Please check the following prototypes on style.css:
#pagetabs a
#pagetabs a:hover
#pagetabs a.activetab

specifically on background element. These mainly affects tab strip's display.

I know these prototypes cause the error but could you give me a solution?

I believe you modified it on your side. Could you please post your element's definition for each prototype?

#pagetabs a
{
background: white url(images/tab_out.gif) top left repeat-x;
background-color: #DDDDDD;
border-left: solid 1px black;
border-top: solid 1px black;
border-right: solid 1px black;
color: #FFFFCC;
padding: 5px 5px 0px 5px;
position:relative;
margin-right:3px;
text-decoration: none;
vertical-align:middle;

}

#pagetabs a:hover
{
text-decoration: underline;
color: #ffffff;
background: white url(images/tab_over1.png) top left repeat-x;
}

#pagetabs a.activetab
{
padding: 5px 5px 1px 5px;
position: relative;
top: 1px;
color: #ffffff;
background: red;
border-bottom-color: white;
}

Could you please reset back the background element of the #pagetabs a:hover prototype to its original state?

Code:

background: white url(images/tab_over.gif) top left repeat-x;

Everything works perfectly on my local end. This is worth a try.

Still NO. Not on IE. Did you try on IE? Try changing tabs in IE and you will see the color not changing. Also, there is no border (bottom).

Yes, I tried it on IE, FF and Chrome and all has similar results. What's the version of your IE?

Which version should I use? 8?

Please reply. Which version should I use?

I'm using version 7 and it works perfectly fine.

Can you post the code you are using? Thanks.

We can't post the entire codes for security reason; however, this is just a sort of snippet of prototypes for Tabbed UI:

Code:

#pagetabs
{
	width: 100%;	
}

#pagetabs a
{
	background: white url(images/tab_out.gif) top left repeat-x;
	background-color: #DDDDDD;
	border-left: solid 1px black;
	border-top: solid 1px black;
	border-right: solid 1px black;
	color: #696969;
	padding: 5px 5px 0px 5px;
	position:relative;
	margin-right:3px;
	text-decoration: none;
	vertical-align:middle;
}

#pagetabs a:hover
{
	text-decoration: underline;
	/*color: #ffffff;*/
	color:Black;
	font-weight:bold;
	background: white url(images/tab_over.gif) top left repeat-x;
}

#pagetabs a.activetab
{
	padding: 5px 5px 1px 5px;
	position: relative;
	top: 1px;
	color: #ffffff;
	/*background-image: url(images/tab_over.gif);*/
	background:red;
	border-bottom-color: white;
}

#pagetabs a.activetab:hover
{
	text-decoration: none;
}

#tabcontent
{
	border: solid 1px gray;
	margin:0px;	
	padding-top:0px;
	padding-bottom: 10px;
	width:100%;
}

#tabcontent div.hiddenTab
{
	display:none;
}

#tabcontent div.selectedTab
{
	display:block;
}

Thanks but for some reason it doesn't work on IE still. It's perfectly fine in FireFox and Chrome. Attached image is the result I'm getting on IE.

How have you called the two Javascript functions inside the TabbedUI.XML Package? I think that's where I'm having the error. Thanks.

This is not a CSS issue anymore. The tabbedui.js from the {root}/jscripts might have been inadvertently changed. Extract the installer and copy the stock javascript file and upload it to the mentioned file path and try again.

Still no. I think the error is somewhere here.

<script type="text/javascript" language="Javascript" >
TabbedUI.prototype.initialize();
</script>

Yes, the initialize method of the TabbedUI function lies on that javascript: tabbedui.js. That's why that line won't cause an issue if the tabbedui.js content is okay.

Okay, now I don't get that error. If you don't mind, would you be able to post a snapshot of your tabbed result (IE)?

Attached is my tabbed UI displays. a.active color= red, a.hover color = lime:

Similar result for Chrome, Safari, FF, IE.

Thanks. Is there any way that I could see your Tabbed.XML Package code?

I'm getting the following erros:

Line: 185
Error: Object expected
Line 185 is ComponentArt_Menu_InitKeyboard(PageMenu);

Line: 188
Error: Object doesn't support this property or method
Line 188 is ComponentArt_Init_PageMenu();

I'm afraid we can't provide you the entire code you need; however, it seems that you have problem loading the component art. The least you can do is revert back the {root}/skins/Skin_#/componentart_webui_client folder from a newly extracted installer.

Okay, I will try that and let you know. Thanks for all your help.

I checked the newly extracted installer, the componentart_webui_client folder is under skins folder but your path shows it under skins/Skin_#. Let me know which one is correct. Also, should I also include the 2007_1_1590 folder?

My sincere apologies. It should be {root}/skins folder and yes, 2007_1_1590 should also be included

Can you give some code at least, if not, the entire code?

There are other ways to make tabbed XmlPackages too which don't involve javascript libraries. If you would like a custom Tabbed XmlPackage done, contact Jan at jsimacek@compunix.us.

Some samples:
- http://www.hcibooks.com/p-3809-i-don...-be-happy.aspx
- http://www.ecommercecartmods.com/p-1...torefront.aspx

I can't find the style for tabbed ui for product pages. Can you please guide me on where i can find the style for tabbed ui.?