News:

You may pay someone to create your store, or you visit our seminar and become a professional yourself with the silver certification

Main Menu

Divide custom fields into different tabs on product page

Started by nicola10, September 21, 2013, 11:42:06 AM

Previous topic - Next topic

nicola10

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

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

<?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:

        <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:
            <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:
<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

Maxim Pishnyak

What is your issue? Some words, picture or maybe you have an url?
You can support Community by voting for Project on the JED
https://extensions.joomla.org/extension/virtuemart/#reviews
Join us at
https://twitter.com/virtuemart

nicola10

#2
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

nicola10

I change the layout custom field ( no cart attribute) as the follow, It works fine with tabs and table  for example:


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:

<?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?

Maxim Pishnyak

Did you search where cart attributes layout is constructed before displaying?
You can support Community by voting for Project on the JED
https://extensions.joomla.org/extension/virtuemart/#reviews
Join us at
https://twitter.com/virtuemart