Author Topic: adding tabs to VM Product Page  (Read 31396 times)

liquid.ideas

  • Jr. Member
  • **
  • Posts: 90
Re: adding tabs to VM Product Page
« Reply #30 on: August 18, 2013, 16:26:06 pm »
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]
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

  • Beginner
  • *
  • Posts: 3
Re: adding tabs to VM Product Page
« Reply #31 on: September 12, 2014, 04:21:56 am »
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

  • Jr. Member
  • **
  • Posts: 132
    • CRASHDÏET Official Website
Re: adding tabs to VM Product Page
« Reply #32 on: January 19, 2016, 19:23:23 pm »
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]
....['product_name'], array('rel'=>'prev', 'class' => 'previous-page','data-dynamic-update' => '1'));To :
Code: [Select]
...['product_name'], array('rel'=>'prev', 'class' => 'previous-page','data-dynamic-update' => '0'));
And

From :
Code: [Select]
...['product_name'], array('rel'=>'next','class' => 'next-page','data-dynamic-update' => '1'));To :
Code: [Select]
...['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 :P.

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

Cheers

Peter

kaizendeep

  • Beginner
  • *
  • Posts: 14
Re: adding tabs to VM Product Page
« Reply #33 on: January 08, 2017, 13:23:52 pm »
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

  • VirtueMart Developer Team
  • Global Moderator
  • Full Member
  • *
  • Posts: 838
  • VirtueMart Version: VM3 on J3
Re: adding tabs to VM Product Page
« Reply #34 on: January 08, 2017, 14:47:59 pm »
Code: [Select]
<?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

  • Beginner
  • *
  • Posts: 14
Re: adding tabs to VM Product Page
« Reply #35 on: January 08, 2017, 17:12:16 pm »
Tried that but got a 500 server error. But i think we're close..

Here's the code now:

Code: [Select]
<?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

  • Beginner
  • *
  • Posts: 14
Re: adding tabs to VM Product Page
« Reply #36 on: January 09, 2017, 16:43:41 pm »
Code: [Select]
<?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]
<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

  • VirtueMart Developer Team
  • Global Moderator
  • Full Member
  • *
  • Posts: 838
  • VirtueMart Version: VM3 on J3
Re: adding tabs to VM Product Page
« Reply #37 on: January 09, 2017, 17:24:51 pm »
please look in your error log for the reason