This is a simple mod that allow us to have custom product tabs in BigCommerce system, there is no limit on how many tabs you can have. Our final result will be this.
Mod
This mod requires modification to only one file /Panels/ProductTabs.html
Step 1
Add current JavaScript to the existing script tag
/** * Overrides parts of /javascript/product.functions.js#GenerateProductTabs() function * as it does not support related products */ $(document).ready(function() { var id = 'RelatedProducts'; var TabName = 'Related Products'; var ProductTab = '<li id="'+id+'_Tab" ><a onclick="ActiveProductTab(\''+id+'_Tab\'); return false;" href="#">'+TabName+'</a></li>'; $('#ProductTabsList').append(ProductTab); }); |
Step 2
Here we actually add content of our tab.
<div id="RelatedProducts" class="Block Panel" style="display:none"> CONTENT TO DISPLAY IN TAB </div> |
One thing to not is that the div id ‘RelatedProducts’ relates to javascript id ‘RelatedProducts’ so if you change that you need to change the div id.
That is, if we wanted to add additional tabs we simply would use an array.
Thanks for the idea. However when I add all the code and everything in the proper places, when I refresh the product page, rather than adding a new tab, it just displays the code
Related Products.It doesn’t actually parse the code it seems to use that code and turn it into a tab. Any ideas?
It looks like my previous comment didn’t display the code correctly, I’ll try one more time, but basically I tried your mod, the page displayed the actual code itself, rather than interpreting it as HTML and outputting it as a new tab. Here’s the code again, assuming WordPress let’s me post it: Related Products
Did you actually wrap the code with script tag?
Hey Greg, nice stuff you are sharing, very useful. Can you show me exactly where to paste each piece of code you are giving us on this page? I seem to have the same issue as Mike and cannot get the additional tab going.
Thanks!
There was code formatting issue. Opening/Closing brackets have been replaced by < >
Make sure that the ‘var ProductTab’ line has all the < replaced with ‘<' and > with '>‘, this should fix the issues.
See updated post.
Hey Greg, that info was good as i needed to add a specs tab to all my items. Only where do i put the information for this section, as i haven’t got a new field in my product info to insert object specific data… any ideas? thanks 🙂
Hello
One way I know of would be to add custom field Bigcommerce Support :How do I add additional custom fields to my product page?
Then you can display the label/value in the tab like this:
Value = %%GLOBAL_CustomFieldValue%%
Label %%GLOBAL_CustomFieldName%%
Hi Greg, I am very interested in how to get it working. Would you please email me at hientule@gmail.com some more details. I need to add more product tabs to my product page for Bigecommerce, like Specifications, FAQ, Tip and Tricks, Manuals, Testimonies.
Thanks so much Greg. –Hien
I am very interested in having tabs instead of the scrolling description box to China I am ending up with for my tech products but I need an example to what you are actually instructing me here as I do not work for Bigcommerce. Wish they do this already…Volusion comes with this function built in.
I am wanting to add Features,Specifications
Show me please.
Here is the stock Panels/ProductsTabs.html
%%GLOBAL_ProductTabsControlScript%%
lang.Description = ‘%%LNG_JS_Description%%’;
lang.Warranty = ‘%%LNG_JS_Warranty%%’;
lang.OtherDetails = ‘%%LNG_JS_OtherDetails%%’;
lang.ProductTags = ‘%%LNG_JS_Tags%%’;
lang.SimilarProducts = ‘%%LNG_JS_SimilarProducts%%’;
lang.Reviews = ‘%%LNG_JS_Reviews%%’;
lang.OtherProducts = ‘%%LNG_JS_OtherProducts%%’;
lang.ProductVideos = ‘%%LNG_JS_ProductVideos%%’;
lang.SimilarProductsByCustomerViews = ‘%%LNG_JS_SimilarProductsByCustomerViews%%’;
/**
* Overrides parts of /javascript/product.functions.js#GenerateProductTabs() function
* as it does not support related products
*/
$(document).ready(function()
{
var id = ‘RelatedProducts’;
var TabName = ‘Related Products’;
var ProductTab = ‘‘+TabName+’‘;
$(‘#ProductTabsList’).append(ProductTab);
});
<!– Remove the code from here to create the no product tabs version of the product page
//
–>
CONTENT TO DISPLAY IN TAB
Need actual sample of where the code goes and how it would read to create Feature and Specifications tabs. Can’t paste the current Panel/ProductTabs.html in this message.
Please advise
Hi Greg, same request as Hien Le. I am very interested in how to get it working. Would you please email me at marcellolisi@gmail.com some more details. I need to add more product tabs to my product page for Bigecommerce, like Specifications, FAQ, Tip and Tricks, Manuals, Testimonies.
Thanks so much Greg. –Marcello
Hi Greg are you able to email me please it appears my code for product tabs is broken we are unable to get it fixed.
Thanks
Dee
glamourpromwear@gmail.com