Has anyone seen a way to create a direct link to a product block tab? For example, to have a link called “Features” on the page and when someone clicks it the features tab is shown, possibly the visitor is even taken directly to the tab. Thsi would be similar to setting up an anchor link, I just can’t figure out how to make the tab switch with a link.
As several posts have requested how to create links that point to or control the product page information tabs, but no answers have been given I have come up with a workable solution.
This workaround is comparable to what the fn_show_section function did in CS-Cart versions prior to 2.0.10 before the developers removed it.
I will try to make this post as simple and informative as possible to help whoever is trying to do the same thing. [COLOR=“Red”]Please keep in mind I am not a JavaScript professional so use this at your own risk and never on a live running store until you have tested it.[/COLOR]
If there are any JavaScript coders reading this, please contribute by cleaning up my long winded solution. I know some repeating functions and arrays could significantly reduce my if else stataments, but those are beyond my skills and would have added a few hours of troubleshooting.
Background information:
The tabs are controlled/created by the tabs.js file found in the main store directory’s /js folder. The code the cart uses is based on the idTabs javsacript created by [url]http://www.sunsean.com/idTabs/[/url] .
Essentially the tab javascript adds or removes classes to the css DIV of each tab section to create the effect of tabs changing. This works in two parts, the tabs themselves and their matching content block. So for each tab you have two css sections to deal with, here are their element ID’s:
ID’s For the tabs:
block_features
block_send_to_friend
block_tags
block_description
ID’s for each tabs respective content area:
content_block_features
content_block_send_to_friend
content_block_tags
content_block_description
To set any tag active you have to:
Apply a class of cm-active to its TAB ID
Apply a display=“block” style to its Coontent ID’s DIV tag.
Our Javascript script creates a series of functions to do this and be triggered by a text link like this:
Link Text
Here’s how the link format works, the #block_description creates an anchor link. This serves two purposes, triggering our JavaScript function and also scrolling the visitor down to the chosen tab [if scrolling is needed]
The onclick="showThisTab(‘block_description’) changes to that tab. Basically just substitute block_description with the ID for the tab you want from the list I gave above.
On to the actual script. I’ve commented everything, so hopefully anyone can easily follow it. If not, don’t worry just add it to your product page (in whatever template you like and then add your links where desired, using the format I described above. [COLOR=“Red”]NOTE: when you place the script you must make sure to keep the {literal}{/literal} tags at the beginning and end of the script. Otherwise you will receive errors, as the SMARTY template language used by the cart will think everything that uses brackets { } is supposed to be a template tag. The literal tags tell it to just read the script as normal.[/COLOR]
Here’s the script:
```php
{literal}
{/literal}
```
I hope you find this useful, thanks are always appreciated, Lastly, I’d like to say that as a potential CS-Cart customer (I’m evaluating the trial) I really believe this shouldn’t have been necessary. Several people have requested this functionality in the forums. In adition, it was a feature that was pre-existant in versions below 2.0.10 so it’s safe to assume customers depended on the fn_show_section. If the developer chose to change its tab setup, so be it, but they should have provided a new function to save those customers who used it and were not told it would be lost when upgrading. Generally upgrades should always add more features, not remove them.