BV Commerce Forum
»
BV Commerce Support
»
How Do I? Questions
»
Tabbed Content on Product Pages - Jquery solution has problems with product variants
Rank: Member
Joined: 2/7/2006(UTC) Posts: 66
|
Hi All, I've just re-registered for the forum but I've been using BV right since 2004. I've signed up for BV.NEXT licenses for my two stores but as yet have not upgraded my stores to the latest version although I'm sure that I'll have the same problem to solve (regarding this post) when I do upgrade so it's fair to say this would be useful information for those on BVC 5.8 or higher. I found a thread discussing this same subject but it's 4 years old and seems to relate to BVC2004 so I thought a fresh topic would be better. I would like to implement a tabbed area on my product pages which will allow visitors to tab between 'Product Description', 'How to Use', 'Questions', 'Specification', 'Datasheets' etc. on a product's page. I'm hijacking the reviews functionality for questions, some product attribute fields for the datasheets and then including most of the tabbed information (description, how to use etc.) in the product description. The obvious way (for me) to acheive the tabbed interface is using Javascript but I've tried using two different script sets (Jquery and a simpler version) and both implementations work perfectly until I select a different varient of the product from the drop-down list. I can tweak a bit of code here and there but I'm not a programmer and I'm struggling to find a fix for this. It must be something to do with a clash between the hyperlink/anchor and the way the varients are updating the page. Hopefuly for the more savvy board members the answer will be obvious. I've set up a single product on my store which attemps to use the tabbed content. As you'll see, it all works great until you change the pack size to any other pack size. Thereafter, the tabs don't function correctly. http://www.easycomposites.co.uk/products/resin-gel-silicone/fillers-and-additives/fumed-silica-thixotropic-powder.aspxThanks in advance for any input as I think this will make a good useability improvement to my store. Matt Statham Easy Composites Ltd |
|
|
|
|
Rank: Administration
Joined: 4/2/2004(UTC) Posts: 2,393 Location: Hummelstown, PA Thanks: 6 times Was thanked: 163 time(s) in 158 post(s)
|
Welcome back, Matt! Your old account should still be active on the forum. If you can tell me the username or email address that you used previously I can merge the accounts for you.
The issue that you're experiencing is happening because of the AJAX page updates that happen when you make a choice or modifier selection. When the page updates this replaces the previous HTML and breaks the JavaScript event binding that makes your tabs work.
The easiest way to solve this is to move your tab content outside of the "ProductControlsPanel" Anthem Panel. This may or may not be possible depending on how your template is put together. Also keep in mind that anything that you move outside of this panel will no longer update when you make a selection (e.g. if you are using choices and each choice combination product has a different product description, it will no longer change).
If the above solution doesn't work for you then you will need to reinitialize your tabs after the AJAX page update. You might be able to do this by adding the code to the CallBackFinished() function in your theme.js file (this function runs site-wide whenever an AJAX postback occurs, not just the product page, so your initialization code must fail gracefully if the tabcontent.js file isn't on the page). If that doesn't work you will need to edit each modifier and choice file by adding the PostCallBackFunction attribute to the appropriate Anthem control; the PostCallBackFunction attribute should call your re-initialization function. |
Aaron Sherrick BV Commerce Toll-free 888-665-8637 - Int'l +1 717-220-0012 |
|
|
|
Rank: Member
Joined: 2/7/2006(UTC) Posts: 66
|
Hi Aaron,
Thanks for your prompt reply; my username was "surfscience". The idea of moving the content outside of the Anthem panel seems like a straightforward solution and I don't ever have different content for the main descriptions between varients so it would not affect me if the callback to update this content (following a varient change) was lost.
So, following your advice (let me know if I've potentially jeopardised anything else in so doing) I've simply changed
<anthem:Label ID="lblDescription" runat="server" AutoUpdateAfterCallBack="true"></anthem:Label> to: <anthem:Label ID="lblDescription" runat="server" AutoUpdateAfterCallBack="false"></anthem:Label>
I've given this a try and it seems to work perfectly (as can be seen by trying my original link again).
Thank you for this simple fix. I'm looking forward to upgrading my stores and benefitting from the many fixes and performance improvements you've made.
Cheers, Matt
|
|
|
|
|
Rank: Administration
Joined: 4/2/2004(UTC) Posts: 2,393 Location: Hummelstown, PA Thanks: 6 times Was thanked: 163 time(s) in 158 post(s)
|
Originally Posted by: Surfscience Thanks for your prompt reply; my username was "surfscience". Your account has been merged. I sent you an email with your new password. If you have any issues please submit a support ticket. Originally Posted by: Surfscience The idea of moving the content outside of the Anthem panel seems like a straightforward solution and I don't ever have different content for the main descriptions between varients so it would not affect me if the callback to update this content (following a varient change) was lost.
So, following your advice (let me know if I've potentially jeopardised anything else in so doing) I've simply changed
<anthem:Label ID="lblDescription" runat="server" AutoUpdateAfterCallBack="true"></anthem:Label> to: <anthem:Label ID="lblDescription" runat="server" AutoUpdateAfterCallBack="false"></anthem:Label>
I've given this a try and it seems to work perfectly (as can be seen by trying my original link again). I'm glad to hear that it's working for you! If you moved the lblDescription control outside of the "ProductControlsPanel" control you might be able to keep the AutoUpdateAfterCallBack property set to "True". I'm not sure without testing it, though. |
Aaron Sherrick BV Commerce Toll-free 888-665-8637 - Int'l +1 717-220-0012 |
|
|
|
|
Message was deleted by a Moderator. | Reason: Not specified
|
|
|
|
Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.