Text only | Text with Images

VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: nicola10 on September 21, 2013, 11:42:06 AM

Title: Divide custom fields into different tabs on product page
Post by: nicola10 on September 21, 2013, 11:42:06 AM
I'm using Joomla 2.5.14 and Virtuemart 2.0.22.c

In this file templates\testtemplate\html\com_virtuemart\productdetails\default.php

I change the code to insert three tab on the product page like as is described in this topic:

http://forum.virtuemart.net/index.php?topic=105563.0 (http://forum.virtuemart.net/index.php?topic=105563.0)

In backend I created 9 custom field and assigned the same position every 3 fields

The result in frontend was that all the fields appear in each tab except that in the second tab where I insert the code of product description. The tabs works fine

Code Select
<?php // Add To Cart Button
 if (!VmConfig::get('use_as_catalog',0)) { ?>
<div id="tabContainer">
<ul>
<li><a class="active" href="#tab1">First Tab</a></li>
<li><a href="#tab2">Second Tab</a></li>
                    <li><a href="#tab3">Third Products</a></li>
</ul><!-- //Tab buttons -->
<div class="product-fields">
<div class="addtocart-area">

<form method="post" class="product js-recalculate" action="index.php" >
<?php // Product custom_fields

  /* Product custom Childs
  * to display a simple link use $field->virtuemart_product_id as link to child product_id
  * custom_value is relation value to child
  */
 // Inizio modifica
 if (!empty($this->product->customsChilds)) {  ?>

<?php foreach ($this->product->customsChilds as $field) {  ?>
<div style="display:inline-block;" class="product-field product-field-type-<?php echo $field->field->field_type ?>">
<span class="product-fields-title" ><b><?php echo JText::_($field->field->custom_title) ?></b></span>
<span class="product-field-desc"><?php echo JText::_($field->field->custom_value) ?></span>
<span class="product-field-display"><?php echo $field->display ?></span>
</div>
<br />
<?php
 } ?>
</div>

<?php } // Product Custom ontop begin?>
First Tab:

Code Select
        <div class="tabDetails">
       
            <div id="tab1" class="tabContents">
<?php if (!empty($this->product->customfieldsSorted['ontop'])) { 
       $this->position='ontop'; 
                          echo $this->loadTemplate('customfields'); ?>
   <div class="product-fields">
   <?php
    $custom_title = null ;
    foreach ($this->product->customfieldsSorted['ontop'] as $field){
   if ($field->display) {
  ?><div class="product-field product-field-type-<?php echo $field->field_type ?>">
<?php if ($field->custom_title != $custom_title) { ?>
<span class="product-fields-title" ><?php echo JText::_($field->custom_title); ?></span>
<?php if ($field->custom_tip) echo JHTML::tooltip($field->custom_tip,  JText::_($field->custom_title), 'tooltip.png');
  } ?>
<span class="product-field-display"><?php echo $field->display ?></span>
<!--<span class="product-field-desc"><?php echo jText::_($field->custom_field_desc) ?></span>-->
</div>
<?php
  $custom_title = $field->custom_title;
   }
    } ?>
   </div>

   
<?php } //Fine modifica
 if (!empty($this->product->customfieldsCart)) {  ?>
<div class="product-fields">
<?php foreach ($this->product->customfieldsCart as $field)
 { ?><div class="product-field clearfix product-field-type-<?php echo $field->field_type ?>">
<span class="product-fields-title" ><!--<b><?php echo  JText::_($field->custom_title) ?></b>--> <?php if($field->custom_field_desc) echo '<span class="product-field-desc">'.$field->custom_field_desc.'</span>:'; ?></span>
<?php if ($field->custom_tip) echo JHTML::tooltip($field->custom_tip,  JText::_($field->custom_title), 'tooltip.png'); ?>
<span class="product-field-display"><?php echo $field->display ?></span>

</div>
<?php
 }
 ?>
</div>
<?php } ?>
    </div><!-- //tab1 -->
Second Tab:
Code Select
            <div id="tab2" class="tabContents">
<?php // Product Description
 if (!empty($this->product->product_desc)) { ?>
<div class="product-description">
<?php /** @todo Test if content plugins modify the product description */ ?>
<h2 class="title"><?php echo JText::_('COM_VIRTUEMART_PRODUCT_DESC_TITLE') ?></h2>
<?php echo $this->product->product_desc; ?>
</div>
<?php } ?>
            </div><!-- //tab2 -->
Third Tab:
Code Select
<div id="tab3" class="tabContents">
<?php if (!empty($this->product->customfieldsSorted['legenda'])) { 
       $this->position='legenda'; 
                          echo $this->loadTemplate('customfields'); ?>
   <div class="product-fields">
   <?php
    $custom_title = null ;
    foreach ($this->product->customfieldsSorted['legenda'] as $field){
   if ($field->display) {
  ?><div class="product-field product-field-type-<?php echo $field->field_type ?>">
<?php if ($field->custom_title != $custom_title) { ?>
<span class="product-fields-title" ><?php echo JText::_($field->custom_title); ?></span>
<?php if ($field->custom_tip) echo JHTML::tooltip($field->custom_tip,  JText::_($field->custom_title), 'tooltip.png');
  } ?>
<span class="product-field-display"><?php echo $field->display ?></span>
<!--<span class="product-field-desc"><?php echo jText::_($field->custom_field_desc) ?></span>-->
</div>
<?php
  $custom_title = $field->custom_title;
   }
    } ?>
   </div>

   
<?php } //Fine modifica
 if (!empty($this->product->customfieldsCart)) {  ?>
<div class="product-fields">
<?php foreach ($this->product->customfieldsCart as $field)
 { ?><div class="product-field clearfix product-field-type-<?php echo $field->field_type ?>">
<span class="product-fields-title" ><!--<b><?php echo  JText::_($field->custom_title) ?></b>--> <?php if($field->custom_field_desc) echo '<span class="product-field-desc">'.$field->custom_field_desc.'</span>:'; ?></span>
<?php if ($field->custom_tip) echo JHTML::tooltip($field->custom_tip,  JText::_($field->custom_title), 'tooltip.png'); ?>
<span class="product-field-display"><?php echo $field->display ?></span>

</div>
<?php
 }
 ?>
</div>
<?php } ?>
            </div><!-- //tab3 -->
           
        </div><!-- //tab Details -->
       
    </div></div><!-- //Tab Container -->
<script type="text/javascript">
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();
});

});
    </script>

Thanks for any help
Title: Re: Divide custom fields into different tabs on product page
Post by: Maxim Pishnyak on September 21, 2013, 13:09:59 PM
What is your issue? Some words, picture or maybe you have an url?
Title: Re: Divide custom fields into different tabs on product page
Post by: nicola10 on September 23, 2013, 08:55:55 AM
Some field are input boxes and drop boxes, other fields are image selection with radio button like a color selection

This fields are cart attribute
Title: Re: Divide custom fields into different tabs on product page
Post by: nicola10 on September 24, 2013, 10:55:54 AM
I change the layout custom field ( no cart attribute) as the follow, It works fine with tabs and table  for example:

Code Select

if (!empty($this->product->customsChilds)) {  ?>
<div class="product-fields">
<?php foreach ($this->product->customsChilds as $field) {  ?>
<div style="display:inline-block;" class="product-field product-field-type-<?php echo $field->field->field_type ?>">
<span class="product-fields-title" ><b><?php echo JText::_($field->field->custom_title) ?></b></span>
<span class="product-field-desc"><?php echo JText::_($field->field->custom_value) ?></span>
<span class="product-field-display"><?php echo $field->display ?></span>
</div>
<br />
<?php
 } ?>
</div>

<?php } // Product Custom ontop begin?>
<table><tr><td>

<?php if (!empty($this->product->customfieldsSorted['serie'])) { 
       $this->position='serie'; 
                          echo $this->loadTemplate('customfields'); ?>
<?php } //Fine modifica ?>
</td>
<td>
<?php if (!empty($this->product->customfieldsSorted['tipo'])) { 
       $this->position='tipo'; 
                          echo $this->loadTemplate('customfields'); ?>
<?php } //Fine modifica ?>
</td>
<td>
<?php if (!empty($this->product->customfieldsSorted['trattamento'])) { 
       $this->position='trattamento'; 
                          echo $this->loadTemplate('customfields'); ?>
<?php } //Fine modifica ?>
</td>
</tr>
</table>

<?php if (!empty($this->product->customfieldsCart)) {  ?>

But It doesn't works with the cart attribute:
Code Select

<?php if (!empty($this->product->customfieldsCart)) {  ?>
<div class="product-fields">
<?php foreach ($this->product->customfieldsCart as $field)
 { ?><div class="product-field clearfix product-field-type-<?php echo $field->field_type ?>">
<span class="product-fields-title" ><!--<b><?php echo  JText::_($field->custom_title) ?></b>--> <?php if($field->custom_field_desc) echo '<span class="product-field-desc">'.$field->custom_field_desc.'</span>:'; ?></span>
<?php if ($field->custom_tip) echo JHTML::tooltip($field->custom_tip,  JText::_($field->custom_title), 'tooltip.png'); ?>
<span class="product-field-display"><?php echo $field->display ?></span>
</div>
<?php } ?>
</div>
<?php } ?>
<div class="clear"></div>


Is It possible to use the function loadTemplate for cart attributes?
Title: Re: Divide custom fields into different tabs on product page
Post by: Maxim Pishnyak on September 26, 2013, 15:18:07 PM
Did you search where cart attributes layout is constructed before displaying?
Text only | Text with Images