Display Ajax Tabs on Product.aspx Page

[vn2479]

Hello there,

I'm trying to figure out what is the best method to integrate JQuery or Asp.Net Ajax tabs into the product.aspx page. Would it be easiest just to use the Componentart ui?

I have 4 tabs total (Description, Video Demos, Accessories, and Manuals) that I want to display on my product page. In order to create the Video Demo, Accessories, and Manuals tabs (Description field is already created) I would need to create the other three custom fields in Admin and create custom conlibs such as [[ConLib:ProductVDemos]], [[ConLib:ProductAccessories]], and [[ConLib:ProductManuals]]. Do I follow the the code for [[ConLib:ProductDescription]] to create the other tabs? How do I put everything together? As a designer, I'm having a hard time visualizing how all these files fit together to make the tabs run smoothly i.e. only the tabs that have content in the custom fields will display on the page.

I know how to integrate JQuery into a regular website, but have never done this with a shopping cart software. Also, I'm not a strong ASP.Net coder I just don't know where to start and how to plug everything together. Thank you in advance and any help is much appreciated!

[jmestep]

We have used the component art tabs and they work well unless you want to style something that they can't handle.
Here is a site that uses them.
http://www.accucuteducation.com/Baseball-Cap-P494.aspx

[vn2479]

Thanks, Judy!

So in a nutshell, build custom fields in the editproduct.aspx and .cs files then link them up to the AJAX tabs coded in product.aspx by the id attribute. I would then want to use Componentart Ui Multipage. Am I on the right track? But how do I disable tabs with no content?

[jmestep]

You are on the right track. You would just have to code your page to check for a null value, then not show the tab.
I didn't work on the ones I posted previously,but I did work on the tabs for this site a long time ago and if you browse thru the site, you will see products with different tabs showing.
http://www.wavewerks.com/

[vn2479]

That is exactly what I was looking for - dynamic tabs! I have three questions if you don't mind. First, are you using AJAX to pull data into the tabs from a database? Secondly, where do I place the code to check for a null value and where do I assign a null value to disabled tabs? Would it be in product.aspx and .cs files? Finally, do I use javascript to accomplish this? Could you give me a simple code example? I have not done any asp.net/javascript coding but if I can see an example I think I can muddle through this. Thank you!

[jmestep]

It's really too complicated to explain here, but this is one path I took.
Created the tabs on the product page.
Put content I wanted to display into a private webpage in the Able admin.
Made a conlib to pull that content based on the webpage id and called it to pass the webpage id (webpage id="xx")

There are so many other ways it can be approached, depending on what you want to do.

[vn2479]

Judy,

Quick question. Why would I put the content in a private webpage when I could create custom fields similar to 'description?' This way I could place content into the custom fields as I would for description, price, etc (in admin -> category -> product details). Content for description field would go under the description tab, content for manuals field under manuals tab and so on. My only problem is I don't know how to connect the custom fields to the tabs in product.aspx (by the id I assume) and also how to disable tabs without content.

Thanks for your patience and insights.

[jmestep]

You wouldn't need to create a custom web page - that was just an example of what I have done because the client wanted some particular text to show for products in a particular category and didn't want to put the text into every product edit page.
Yes, if you want it product specific, you can use custom fields.