Ajax Collapsible panel within product description?

[Haak]

Hello,
It's been a while since my last post but I am now full force trying to get a live site out. My question is when I create a product from the admin section and fill in all the details... summary, detail, more details ECT. Can I add controls from the Ajax control toolkit within my description? Such as the collapsible panel?

What we want to accomplish is to be able to hide some of the product description within the text and have a clickable “more info” to expand the text in different areas. Our descriptions are long winded and this kind of ability to hide some of the details within the description is helpful.

I know I can add html and I have tried this functionality using a script from Adobes spry framework it worked until I added the product to the cart. Errors from the asp.net Ajax update panel were generated and the spry control stopped working. I figured its best not to mix Ajax frameworks and stick with the one included.
Any suggestions on how to accomplish this function would be helpful. I am open to ideas.

Thanks,
Hawk

[AbleMods]

My (limited) understanding of Ajax is that it's based on server-side .Net controls. While the resulting client-side code is Ajax/Javascript, the server must be told how to generate that code via the .Net controls.

Since you cannot embed .Net server-side controls in product descriptions, your best option would be to make a customized version of the ProductDescription.ascx user control located in the ~/ConLib/ folder. Second to that would be plain old Javascript, but with all the other Ajax stuff going on in the product page that will probably prove difficult.

You could create custom product fields and associate them with the product data class pretty easily. The idea would be to break up the product description into specific sections and populate some custom fields. Then build a new product description control that looks for these custom fields and uses server-side controls to display the resulting data, like a TreeView control perhaps. Then you could have a product description with collapsable (sp?) sub-sections.

[m_plugables]

Instead of using server side code try to use the JavaScript and CSS. For example create some Show and Hide CSS classes and then dynamically put these classes on the data you want to show or hide using javascript.

[Haak]

Ok guys I have tried the plain old JavaScript with css way. It works but it runs into errors when it interacts with the rest of the page. So this won’t work too much debugging involved. Joe I like your idea of modifying the .ascx file for the product description this will allow me to use the Asp.net Ajax Controls. I have given it a quick test to see if I could get the Ajax collapsible panel control to work. It did but once I opened panel the function stopped working? Today I will play with this method some more to see if I can fix that problem. I’ll keep you guys posted on my progress. Also if any other suggestions come up I am all ears.
I’ll try the custom product fields later if modifying the product description page does not held the results I am looking for.

Thanks,
Hawk

[Haak]

Ok, sorry for the delay in this post but here are my results. By coping and modifying the productDescription.ascx page I was able to use the collapsible panel extender from the Ajax control toolkit provided in the bin file. I was having problems with the extender only working once. What I did to solve this was to get rid of the update panel that was in the productDescription.ascx page. Now I have a custom page named after my product VikingPro.ascx that I use to hold all the product details in the format and with the Ajax controls I like. The only down fall is that this page is product specific and really cannot be reused for any other product and the product description is no longer in the database.
We only have a few products so this is not going to hurt us for now but if this feature is needed with bulk entry this way would not work.
I am still working with this to see if any other method comes up that would be better so any input is still welcome. I will also post an update later if something new comes up.
Thanks,
Hawk

[AbleMods]

Post a link when you get a chance, I'd like to see the result

[Haak]

Currently it is on my dev computer that is only accessible locally but when I go live in a few weeks I will certainly post a link.

Hawk

[rusackson]

Hello,

I have implemented some spry/javascript in my pages for product descriptions also. Everything works perfect until I go to choose the products options/variants, then the javascript tabbed panel holding all of my product information collapses the info into one of the tabbed panels, all other tabbed panels cannot be linked to. Once the page is refreshed then all is well again. Kind of frustrating and I don't know crap about ajax to pinpoint, the problem. What was the conclusion in this thread?

Thanks

[Haak]

Rusackson,
I switched over to using the asp.net Ajax controls. The .dll is in the bin file of your install of Able Commerce. Just add it to your tool panel and use the controls like you would any other. There is lots of info on how to use the asp.net Ajax toolkit @ http://www.asp.net/ajax

The Spry framework is nice but with the complexity of the able commerce site and the fact there is already an Ajax framework included "the one from Microsoft" there is a conflict of JavaScript interest so to speak and sticking to one is best.

Since I have switched over to using only the included Ajax Framework I have had no problems with javascript errors.

When my site is live I will post the page that use's the Ajax Control Toolkit.

Hawk

[Haak]

Rusackson,

To avoid confusion about the tool bar I mentioned in my previous post I was assuming that you are using Visual Studio to develop your site? If not you will have to add the reference to the .dll by hand before you can compile and view the controls without errors.

Hawk

[rusackson]

Can I see what you have accomplished with the ajax panel? I use Dreamweaver and to this point I have been able to accomplish all my design and layout strictly with css, and not having to learn anything about ajax, now I have hit the wall.

[rusackson]

When your site is live...

[Haak]

Site is up but we are still debugging gateway and waiting for more content to post. Should be ready for public by mid next week? I hope...

Just to give you an idea the Update Panel I believe this is what you where referring to in your last post is already in different sections of each page so I did not use another one on my .ascx page that is used for the product content where my Ajax tab control and collapsible panel is. The way these controls work it's not needed to have an update panel to keep the page from refreshing since it’s not hitting the server its client side code that is generated when the page is created.

If you have content inside the tab control or collapsible panel control that needs to get post back and get new info then you can add an update panel. If you are using the tab control the update panel should go inside the container. DO NOT put the tab control in the update panel. This will give you headaches later on.

"Link Removed"

There is the link to what you need to see. Please do not try to purchase I am still debugging. This page is not available through any think on the site.

Try out the tabs and the more buttons within the text on the second tab.

Let me know what you think?

Hawk

[rusackson]

Looks great, exactly what I have or am going for, I like the accordian effect on the second tab text too.

I might just have to live with the problem for now, frustrating. I wonder if there is some way to allow the ajax update panel for the options/variants to allow the whole page to refresh that it will solve the problem, that way the spry/javascript will be refreshed with each selection. Hmm, not sure, but I need to learn more ajax.

Thanks
Russ

[Haak]

I would suggest getting the free visual web developer 2008 http://www.microsoft.com/express/vwd this will allow you to see and use the asp.net Ajax toolkit with the WYSIWYG.

Dreamweaver is awesome and I have used it for years but to get your hands dirty in a complex web application like Able Commerce an IDE like Visual Studio is needed.

I did not take the time but you may be able to get the spry to integrate with the asp.net Ajax framework by using the script manager to register the scripts on the page. Or the script manager proxy if you are using an .ascx page.

Happy Coding

Hawk