More tabs on product details page

Hi there,

I read about adding new tabs into eSport template here https://www.gavick.com/forums/esport/ne ... abs#p92799

I would like to change Storebox similar way.
Can you please give me some tips how to do it?

It looks like your default.php file changed slightly and I cannot simply copy codes you provided on above forum post. Or maybe I am wrong?

Also, how will these tabs look at the Back End? Will there be more tabs on product page as well?
i.e. Product Information, Product Description, Tab1, Tab2, Tab3, Product Status, Product Dimensions and....
and Tab 1, etc will have just text editor?
Or maybe it will be done different way?

I'd like to add tabs like:
- How To Use
- Our Tips
- Video

I'll apprieciate your help. Thanks

Hi,

Sorry but this kind of modification is beyond of our support - I can only advise you how to create tabs in the product view - but linking new fields and content from VM is beyond our technical support.

Adding new tabs is easy. In the following fragment:

Code: Select all

<?php if(!empty($this->product->product_desc) || $this->allowRating || $this->showReview) : ?>
   <ul id="product-tabs">
      <?php if(!empty($this->product->product_desc)) : ?>
      <li data-toggle="product-description"><?php echo JText::_('COM_VIRTUEMART_PRODUCT_DESC_TITLE') ?></li>
      <?php endif; ?>
      
      <?php if($this->allowRating || $this->showReview) : ?>
      <li data-toggle="customer-reviews"><?php echo JText::_('COM_VIRTUEMART_REVIEWS') ?></li>
      <?php endif; ?>
   </ul>

you have to add new LI element with the data-toggle attribute - the value of this attribute should be used as a class name in the div element i.e.:

Code: Select all

   <div class="product-description gk-product-tab">
         <?php echo $this->product->product_desc; ?>
   </div>


as you can see the gk-product-tab class is necessary. Additionally your div should be placed in the container with id="product-tabs-content" (which exists in the product view).

And that's all - script will automatically detect new tab and container connected with it.

Hi thanks for posting this solution but I was wondering could you explain that in a little more detail please? I am just not understating how to get content into a new tab.

What do I add to the details.php file? And what do I add to my product description to show a new tab?

Thanks


Red

This is a simple JavaScript script which demands container with correct classes/id's as dziudek said. Please look at the code on his last post, this is a part of the tabs. All that you need to is to duplicate it. All changes should be made in virtuemart product view file.

Hello, thanks for this. i had stumbled on a solution when i saw the HTML output from product details page.

It was a matter of closing and opening a div tag. It makes it more difficult to edit descriptions as every time i enable an editor my code is changed and the tabs don't work. So i use no editor for product descriptions.

wrote a quick post about it.
https://www.gavick.com/forums/storebox- ... 28171.html

thanks again for getting back to me.


Red

Yes no editor is the best solution, the tinyMCE and JCE especially sometimes can add additional span's, div's etc., which cause validate errors.

Agreed, i even tried to play around with text filters for certain users but it didn't mater, once i had an open div without a closing one, JCE closed it for me once i saved the changes.

Have tabs working perfectly now so i am happy with that.

Red

Thanks a lot for all prior spoken guys but i still got a problems....
I am not a programmer but i try to follow you as much as i can....

thats my code before changes......

Code: Select all

<?php if(!empty($this->product->product_desc) || $this->allowRating || $this->showReview) : ?>
   <ul id="product-tabs">
      <?php if(!empty($this->product->product_desc)) : ?>
      <li data-toggle="product-description"><?php echo JText::_('COM_VIRTUEMART_PRODUCT_DESC_TITLE') ?></li>
      <?php endif; ?>
      
      <?php if($this->allowRating || $this->showReview) : ?>
      <li data-toggle="customer-reviews"><?php echo JText::_('COM_VIRTUEMART_REVIEWS') ?></li>
      <?php endif; ?>
   </ul>
   
   <div id="product-tabs-content">
   <?php endif; ?>
   

   <?php if (!empty($this->product->product_desc)) : ?>
   <div class="product-description gk-product-tab">
         <?php echo $this->product->product_desc; ?>
   </div>
   <?php endif; ?>

and thats my code with the new tab i made "Colors"

Code: Select all

<?php if(!empty($this->product->product_desc) || $this->allowRating || $this->showReview) : ?>
   <ul id="product-tabs">
      <?php if(!empty($this->product->product_desc)) : ?>
      <li data-toggle="product-description"><?php echo JText::_('COM_VIRTUEMART_PRODUCT_DESC_TITLE') ?></li>
      <?php endif; ?>
      <li data-toggle="product-colors_cxc"><?php echo JText::_('Colors') ?></li>~~~~[I ADD THIS LINE]~~~~
      <?php if($this->allowRating || $this->showReview) : ?>
      <li data-toggle="customer-reviews"><?php echo JText::_('COM_VIRTUEMART_REVIEWS') ?></li>
      <?php endif; ?>
   </ul>
   
   <div id="product-tabs-content">
   <?php endif; ?>
   
<div class="product-colors_cxc gk-product-tab">Specification content goes here</div>~~~~[I ADD THIS LINE]~~~~
   <?php if (!empty($this->product->product_desc)) : ?>
   <div class="product-description gk-product-tab">
         <?php echo $this->product->product_desc; ?>
   </div>
   <?php endif; ?>

So the status is ....

The layout havent change and thats good but i cant find a way to add content for this tab for the products. I looked in the virtuemart > products but i dont find a way to add content.

Please assist do i have make it correct i am not a programmer or developer i mention that above, if yes how em i going to use it????

Regards
Giannis M

The changes i have made have been marked with the

~~~~[I ADD THIS LINE]~~~~

in the end of each line.... and it is in two lines

Thats a screenshot of Tab

Untitled-1.jpg

@redkeane If you still have problems with editor filtering please look here >> How to disable HTML filters in Joomla and editors

If you still have problems with editor filtering please look here >> How to disable HTML filters in Joomla and editors

Sorry i didnt quite understand.... why this fix my problem? The problem i got now is hoe to add a new Tab in VirtueMart product page .....

Now i got two Tabs and i need to add one more so i did add it as the post above mention but i dont know how to insert content from each of my product to this new Tab i create

Can you explain how the editor filtering will help me solve my problem??

Thanks in advanced

You can't add content to custom tab via backend... If you add custom code to layout you also need to add the content or just move part of generated website to this new tab - that's all that you can do.