adding tabs to VM Product Page

[liquid.ideas]

OK, if anyone else wants to know I solved my problem, not the greatest fix but it works. It definitely had something to do with jquery easy that stripped out the code, so my little plaster fix I made for it is:

make a js file with the following code

Code Select Expand

jQuery(function ($){

$(".tabContents").hide();
$(".tabContents:first").show();

$("#tabContainer ul li a").click(function(e){
e.preventDefault();
var activeTab = $(this).attr("href");
$("#tabContainer ul li a").removeClass("active");
$(this).addClass("active");
$(".tabContents").hide();
$(activeTab).fadeIn();
});

});

save it to somewhere you will remember, I put it with my sites template, and then in jquery easy tell it to load that js file when it is loading the page. note that if you dont use the ABSOLUTE FULL path to anything in jquery easy, it wont work.

[Studio47WebDesign]

I would also like to create product tabs for a Real Estate website (To Top, Price, Amenities, Details, Map, Video, etc...) that show specific content from <div> sections within VM2 product description. What would I wrap the <div> text in within the product description and on the php doc to pull that div?

I there, im trying to use this tab system, i insert the code and is all good but where do i put de description text for the second tab???

First tab- product description from virtuemart product
Second tab - i wont to make another description with dimensions of the product and maybe a image, where to i put this text???
Third tab - maybe some additional info, but same problem where do i put the info???

http://www.mobiliariocomluz.pt/index.php/mobiliario-de-interior/sofas-e-cadeiras-sem-leds/natural-zebra_details.html

Thanks

[loppan]

I used the solution posted by ivus to create tabs but ran into an interesting issue :

When enabling "product navigation" in configuration / shopfront / "show the product navigation" the tabs where not updated after navigating to a new product - the content of the tabs remained the same even when navigating through different products.

To fix this I had to change two lines in my product details default.php :

From :

Code Select Expand

....['product_name'], array('rel'=>'prev', 'class' => 'previous-page','data-dynamic-update' => '1'));
To :

Code Select Expand

...['product_name'], array('rel'=>'prev', 'class' => 'previous-page','data-dynamic-update' => '0'));

And

From :

Code Select Expand

...['product_name'], array('rel'=>'next','class' => 'next-page','data-dynamic-update' => '1'));
To :

Code Select Expand

...['product_name'], array('rel'=>'next','class' => 'next-page','data-dynamic-update' => '0'));

This forces a full refresh on every new product page load - but I liked the dynamic update thingie better .

Wonder if anyone knows a way to make dynamic update work with my tabs?

Cheers

Peter

[kaizendeep]

Okay, trying this in VM3, and i've managed to replicate the Description tab to now add Itinerary, location, terms and photos tabs.

So far so good.

I've created a custom field type "Editor" with the position 'itinerary' but how do i map this to the "ITINERARY" tab?

Here's my code:

<?php
         // event onContentBeforeDisplay
         echo $this->product->event->beforeDisplayContent; ?>

         <div class="products-desc-tab">
            <ul id="myTab" class="nav nav-tabs" role="tablist">
               <?php if (!empty($this->product->product_desc)) { ?>
                   
               <li role="presentation" class="active">
                  <a href="#desc" aria-controls="desc" role="tab" data-toggle="tab">
                     <i class="pe pe-7s-note"></i><?php echo vmText::_('VM_PRODUCT_DESC_TITLE') ?>
                   </a>
               </li>
                <?php } ?>
                    <?php if (!empty($this->product->product_desc)) { ?>
                   
               <li role="presentation">
                  <a href="#itinerary" aria-controls="desc" role="tab" data-toggle="tab">
                     <i class="pe pe-7s-note2"></i><?php echo vmText::_('VM_PRODUCT_ITINERARY_TITLE') ?>
                   </a>
               </li>
                <?php } ?>
                    <?php if (!empty($this->product->product_desc)) { ?>
                   
               <li role="presentation">
                  <a href="#location" aria-controls="desc" role="tab" data-toggle="tab">
                     <i class="pe pe-7s-map-marker"></i><?php echo vmText::_('VM_PRODUCT_LOCATION_TITLE') ?>
                   </a>
               </li>
                <?php } ?>
                    <?php if (!empty($this->product->product_desc)) { ?>
                   
               <li role="presentation">
                  <a href="#desc" aria-controls="desc" role="tab" data-toggle="tab">
                     <i class="pe pe-7s-attention"></i><?php echo vmText::_('VM_PRODUCT_TERMS_TITLE') ?>
                   </a>
               </li>
                <?php } ?>
                    <?php if (!empty($this->product->product_desc)) { ?>
                   
               <li role="presentation">
                  <a href="#desc" aria-controls="desc" role="tab" data-toggle="tab">
                     <i class="pe pe-7s-photo"></i><?php echo vmText::_('VM_PRODUCT_PHOTOS_TITLE') ?>
                   </a>
               </li>
                <?php } // Product Description END ?>
                <li role="presentation">
                    <a href="#review" data-toggle="tab" aria-controls="review" role="tab">
                     <i class="pe pe-7s-like2"></i><?php echo JText::_('VM_PRODUCT_REVIEWS');?>
                 </a>
               </li>
            </ul>
         
            <div class="tab-content">

               <?php if (!empty($this->product->product_desc)) { ?>
                   <div role="tabpanel" class="tab-pane desc fade active in" id="desc">
                      <div class="product-description">
                        <?php /** @todo Test if content plugins modify the product description */ ?>
                        <?php echo $this->product->product_desc; ?>
                      </div>
                   </div>
                <?php } // Product Description END ?>
                <div role="tabpanel" class="tab-pane review" id="review">
                   <?php echo $this->loadTemplate('reviews'); ?>
                       
                 </div>
            </div>
                <div class="clear"></div>
               
         </div> <!--/. products-desc-tab-->
   

And here's the page (demo) : http://www.crunchyfrogpro.com/test/adaevents/index.php/shop/cameras/nikon-d80-detail

Sorry but i'm a bit of a noob when it comes to this

K

[K&K media production]

Code Select Expand

<?php if (!empty($this->product->customfieldsSorted['itinerary'])) { ?>
<div role="tabpanel" class="tab-pane itinerary" id="itinerary">
<?php 
$this->position='itinerary';
echo $this->loadTemplate('customfields');
?>
</div>
<?php } ?>

[kaizendeep]

Tried that but got a 500 server error. But i think we're close..

Here's the code now:

Code Select Expand

<?php
// event onContentBeforeDisplay
echo $this->product->event->beforeDisplayContent; ?>

<div class="products-desc-tab">
<ul id="myTab" class="nav nav-tabs" role="tablist">
<?php if (!empty($this->product->product_desc)) { ?>
                   
<li role="presentation" class="active">
<a href="#desc" aria-controls="desc" role="tab" data-toggle="tab">
<i class="pe pe-7s-note"></i><?php echo vmText::_('VM_PRODUCT_DESC_TITLE') ?>
</a>
</li>
    <?php } ?>
                    <?php if (!empty($this->product->product_desc)) { ?>
                   
<li role="presentation">
<a href="#itinerary" aria-controls="itinerary" role="tab" data-toggle="tab">
<i class="pe pe-7s-note2"></i><?php echo vmText::_('VM_PRODUCT_ITINERARY_TITLE') ?>
</a>
</li>
    <?php } ?>
                    <?php if (!empty($this->product->product_desc)) { ?>
                   
<li role="presentation">
<a href="#location" aria-controls="desc" role="tab" data-toggle="tab">
<i class="pe pe-7s-map-marker"></i><?php echo vmText::_('VM_PRODUCT_LOCATION_TITLE') ?>
</a>
</li>
    <?php } ?>
                    <?php if (!empty($this->product->product_desc)) { ?>
                   
<li role="presentation">
<a href="#desc" aria-controls="desc" role="tab" data-toggle="tab">
<i class="pe pe-7s-attention"></i><?php echo vmText::_('VM_PRODUCT_TERMS_TITLE') ?>
</a>
</li>
    <?php } ?>
                    <?php if (!empty($this->product->product_desc)) { ?>
                   
<li role="presentation">
<a href="#desc" aria-controls="desc" role="tab" data-toggle="tab">
<i class="pe pe-7s-photo"></i><?php echo vmText::_('VM_PRODUCT_PHOTOS_TITLE') ?>
</a>
</li>
    <?php } // Product Description END ?>
<li role="presentation">
  <a href="#review" data-toggle="tab" aria-controls="review" role="tab">
   <i class="pe pe-7s-like2"></i><?php echo JText::_('VM_PRODUCT_REVIEWS');?>
  </a>
</li>
</ul>

<div class="tab-content">

<?php if (!empty($this->product->product_desc)) { ?>
    <div role="tabpanel" class="tab-pane desc fade active in" id="desc">
    <div class="product-description">
<?php /** @todo Test if content plugins modify the product description */ ?>
<?php echo $this->product->product_desc; ?>
    </div>
    </div>
    <?php } // Product Description END ?>
                    <?php if (!empty($this->product->customfieldsSorted['itinerary'])) { ?>
    <div role="tabpanel" class="tab-pane itinerary" id="itinerary">
<?php 
$this->position='itinerary';
echo $this->loadTemplate('customfields'); ?>
    </div>
    <?php } ?>
    <div role="tabpanel" class="tab-pane review" id="review">
    <?php echo $this->loadTemplate('reviews'); ?>
                       
</div>
</div>
                <div class="clear"></div>
               
</div> <!--/. products-desc-tab-->
   


I just need the 'itinerary' field to map, and i should be able to sort out the rest by myself..

K

[kaizendeep]

Code Select Expand

<?php if (!empty($this->product->customfieldsSorted['itinerary'])) { ?>
<div role="tabpanel" class="tab-pane itinerary" id="itinerary">
<?php 
$this->position='itinerary';
echo $this->loadTemplate('customfields');
?>
</div>
<?php } ?>

I keep getting a 500 Server error with this. Have i done this insert correctly?

Code Select Expand

<div class="tab-content">

<?php if (!empty($this->product->product_desc)) { ?>
    <div role="tabpanel" class="tab-pane desc fade active in" id="desc">
    <div class="product-description">
<?php /** @todo Test if content plugins modify the product description */ ?>
<?php echo $this->product->product_desc; ?>
    </div>
    </div>
    <?php } // Product Description END ?>
                    <?php if (!empty($this->product->customfieldsSorted['itinerary'])) { ?>
    <div role="tabpanel" class="tab-pane itinerary" id="itinerary">
<?php 
$this->position='itinerary';
echo $this->loadTemplate('customfields'); ?>
    </div>
    <?php } ?>
    <div role="tabpanel" class="tab-pane review" id="review">
    <?php echo $this->loadTemplate('reviews'); ?>
                       
</div>
</div>
                <div class="clear"></div>
               
</div> <!--/. products-desc-tab-->

[K&K media production]

please look in your error log for the reason

[John Lee]

Hi friends,

I am new here and know very few about code, currely I am using Joomla! 3.9.12 + VirtueMart 3.6.2 10159.

I would like to add a "Specification" tab to the page, and hope the tab content can be edited freely like the "Specification" tab (texts, tables, images, etc.), I tried the ways posted before, but failed. Anyone can help me with the code? Thank you.

Below is the original code:

Code Select Expand



<!-- Nav tabs -->         
<ul id="vm-product-tab" class="nav nav-tabs vm-product-details-tab" role="tablist">
<?php if (!empty($this->product->product_desc)) {  // Product Description title ?>
<li role="vm-tab" class="active">
<a href="#vm-product-description" aria-controls="vm-product-description" role="tab" data-toggle="tab">
<?php echo vmText::_('COM_VIRTUEMART_PRODUCT_DESC_TITLE') ?>
</a>
</li>
<?php } // Product Description END ?>
                                                                       
<li role="vm-tab">
<a href="#vm-product-review" aria-controls="vm-product-review" role="tab" data-toggle="tab">
<?php echo vmText::_('COM_VIRTUEMART_PRODUCT_REVIEW_TITLE') ?>
</a>
</li>                     
                     
<?php // Product Packaging
    $product_packaging = '';
    if ($this->product->product_box) { 
?>
<li role="vm-tab">
<a href="#vm-product-box" aria-controls="vm-product-box" role="tab" data-toggle="tab">
<?php echo vmText::_('COM_VIRTUEMART_PRODUCT_BOX_TITLE') ?>
</a>
</li>
<?php } ?>
                                   
<?php if(isset($this->product->customfields) && $this->product->customfields){ ?>
<li role="vm-tab">
<a href="#vm-product-custom-field" aria-controls="vm-product-custom-field" role="tab" data-toggle="tab">
<?php echo vmText::_('COM_VIRTUEMART_PRODUCT_ADDITIONAL_TITLE') ?>
</a>
</li>
<?php } ?>
             
</ul>

<!-- Tab panes -->
<div class="tab-content">
<?php if (!empty($this->product->product_desc)) {  // Product Description title ?>
<div id="vm-product-description" class="tab-pane active" role="tabpanel">
<?php echo $this->product->product_desc; ?>
</div>
<?php } // Product Description END ?>
                                                       
<div id="vm-product-review" class="tab-pane" role="tabpanel" >
<?php echo $this->loadTemplate('reviews'); ?>
</div>

<?php if ($this->product->product_box) { ?>
<div id="vm-product-box" class="tab-pane product-box" role="tabpanel">
<?php echo vmText::_('COM_VIRTUEMART_PRODUCT_UNITS_IN_BOX') .$this->product->product_box; ?>
</div>
<?php } // Product Packaging END ?>

<?php if(isset($this->product->customfields) && $this->product->customfields){ ?>
<div id="vm-product-custom-field" class="tab-pane" role="tabpanel">
<?php
echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'normal'));
echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'onbot'));
?>
</div>
<?php } ?>
</div> <!-- /. tab-content -->