tabular layout customisation

  • Posts: 107
  • Thank you received: 1
10 years 1 month ago #151064

Hi,

I enabled the tabular layout on my site, but I'm not sure what should appear in the Specification tab or how to populate it and I added 2 custom tabs that I'm not sure how to populate neither. I read some existing threads and your FAQs, but can't get it working.
What I did so far was I added 2 custom fields to the "show_tabular" file as per below code (1) and I added two divs to the product page description with the same ID with text: "custom" for the first tab and "custom2" for the second tab.
All the tabs are showing in the front end, but Tech details (originally specifications), Delivery info & Compatible products info is not showing (see screen grab). Could you please help me to solve the issue?

Any help much appreciated!

Thanks,
Kashka

Code 1:
<li id="hikashop_show_tabular_custom_li" class="hikashop_tabs_li ui-corner-top">
<a onclick="displayTab('hikashop_show_tabular_custom');" href="javascript:void(0);">
<?php echo JText::_('Delivery Info');?>
</a>
</li>

<li id="hikashop_show_tabular_custom2_li" class="hikashop_tabs_li ui-corner-top">
<a onclick="displayTab('hikashop_show_tabular_custom2');" href="javascript:void(0);">
<?php echo JText::_('Compatible products');?>
</a>
</li>

Code 2

<div id="hikashop_show_tabular_custom" class="hikashop_tabs_content">custom</div>
<div id="hikashop_show_tabular_custom2" class="hikashop_tabs_content">custom2</div>

-- url of the page with the problem -- : hammocks.ie/hammocksUAT/

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 13201
  • Thank you received: 2322
10 years 1 month ago #151160

Hi,

You have put the new tabs in the description tab div, that's why nothing is displayed when clicking on the desired tab.

Please Log in or Create an account to join the conversation.

  • Posts: 107
  • Thank you received: 1
10 years 1 month ago #151172

Xavier, where will I put the divs then? What's the right way to do it?

Please Log in or Create an account to join the conversation.

  • Posts: 107
  • Thank you received: 1
10 years 1 month ago #151251

I would really appreciate some more directions, the only info I found on your FAQ and other post was as per below to add the div class "hikashop_tabs_content", it looks like you instruct to add it to the tabular view but then it doesn't make sense as it will be the same div content for each product! What am I missing? Plus the specification tab is not populated even though it is your standard tab?
Any ideas?

Then add a div with content after the "ul" thanks to:

<div class="hikashop_tabs_content" id="hikashop_show_tabular_custom">
<!-- Your div content -->
</div>

Please Log in or Create an account to join the conversation.

  • Posts: 12953
  • Thank you received: 1778
10 years 1 month ago #151176

Hello Kashka,

1.

but I'm not sure what should appear in the Specification tab or how to populate it

The "Specification tab" will be populated by :
- Adding dimmensions/weight to your product
- Adding custom fields values to your product
- ...

2. To add a new tab (delivery Info for example) through your product page the solution will be to
- Edit the code of the "show_tabular" file of the "product" view of your front-end template through "Hikashop->Display->Views"
- Add that kind of code :
            <li id="hikashop_show_tabular_deliveryinfo_li" class="hikashop_tabs_li ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_deliveryinfo');" href="javascript:void(0);"><?php echo JText::_('PRODUCT_DELIVERY');?></a></li>
Just after :
      <li id="hikashop_show_tabular_description_li" class="hikashop_tabs_li ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_description');" href="javascript:void(0);"><?php echo JText::_('PRODUCT_DESCRIPTION');?></a></li>

And that kind of code :
    <div class="hikashop_tabs_content" id="hikashop_show_tabular_deliveryinfo">
      <div id="hikashop_product_description_main" class="hikashop_product_deliveryinfo_main">
        YOUR DELIVERY INFO
        </div>
   </div>
Just after :
    <div class="hikashop_tabs_content" id="hikashop_show_tabular_description">
      <div id="hikashop_product_description_main" class="hikashop_product_description_main">
        <?php
        echo JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description));
        ?>
      </div>
      <span id="hikashop_product_url_main" class="hikashop_product_url_main">
        <?php
        if (!empty ($this->element->product_url)) {
          //DISPLAY the manufacturer
          echo JText :: sprintf('MANUFACTURER_URL', '<a href="' . $this->element->product_url . '" target="_blank">' . $this->element->product_url . '</a>');
        }
        ?>
      </span>
    </div>

Please Log in or Create an account to join the conversation.

  • Posts: 107
  • Thank you received: 1
10 years 4 weeks ago #151427

Hi Mohamed,

Thanks for your reply, after making suggested amend in the tabular view, could you tell me where do I insert the actual content for the custom tabs for each individual product and what's the format?

Thanks,
Kashka

Please Log in or Create an account to join the conversation.

  • Posts: 13201
  • Thank you received: 2322
10 years 4 weeks ago #151465

Hi,

To have a different content in the custom tab for each products, you have to use the custom fields.
Create a new custom field in the table "product", with the type "Wysiwyg", then fill the content for each products via the product edition page.
And finally in the tab use this kind of code:

<?php echo $this->elements->CUSTOMFIELDNAME; ?>

Please Log in or Create an account to join the conversation.

  • Posts: 107
  • Thank you received: 1
10 years 3 weeks ago #151746

Hi Xavier, Mohamed,

Thank you so much for your help, I'm nearly there but still missing something,
I added 3 custom fields, which represents 3 custom tabs: I see them in the product page, all of them were showing under specification, but I want each of them to display in separate tab so I commented the specification related code in the tabular view and I followed your advice and added suggested code in tabular view (file attached):
I added 3 new li and divs as per below, but the tabs are not populated, I didn't define JText variables, does that make difference?
It's very annoying, I know it's very simple but I'm not PHP savvy at all, so not sure what I'm missing, please help!
Thanks,
Kashka

<li id="hikashop_show_tabular_techdetails_li" class="hikashop_tabs_li ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_techdetails');" href="javascript:void(0);"><?php echo JText::_('TECH_DETAILS');?></a></li>

<li id="hikashop_show_tabular_deliveryinfo_li" class="hikashop_tabs_li ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_deliveryinfo');" href="javascript:void(0);"><?php echo JText::_('DELIVERY_INFO');?></a></li>

<li id="hikashop_show_tabular_compatibleproducts_li" class="hikashop_tabs_li ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_compatibleproducts');" href="javascript:void(0);"><?php echo JText::_('COMPATIBLE_PRODUCTS');?></a></li>

/////////////////////////////////////////////////////////////////

<div class="hikashop_tabs_content" id="hikashop_show_tabular_techdetails">
<div id="hikashop_product_description_main" class="hikashop_product_techdetails_main">
<?php echo $this->elements->techdetails; ?>
</div>
</div>


<div class="hikashop_tabs_content" id="hikashop_show_tabular_deliveryinfo">
<div id="hikashop_product_description_main" class="hikashop_product_deliveryinfo_main">
<?php echo $this->elements->deliveryinfo; ?>
</div>
</div>


<div class="hikashop_tabs_content" id="hikashop_show_tabular_compatibleproducts">
<div id="hikashop_product_description_main" class="hikashop_product_compatibleproducts_main">
<?php echo $this->elements->compatibleproducts; ?>
</div>
</div>

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 13201
  • Thank you received: 2322
10 years 3 weeks ago #151770

Hi,

Thanks to use that code:

<?php
/**
 * @package	HikaShop for Joomla!
 * @version	2.2.3
 * @author	hikashop.com
 * @copyright	(C) 2010-2013 HIKARI SOFTWARE. All rights reserved.
 * @license	GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
 */
defined('_JEXEC') or die('Restricted access');
?><?php


	hikashop_loadJslib('jquery');
	$js = '';
	$params = null;
	$this->params->set('vote_type','product');
	if(isset($this->element->main)){
		$product_id = $this->element->main->product_id;
	}else{
		$product_id = $this->element->product_id;
	}
	$this->params->set('vote_ref_id',$product_id);
	$this->params->set('productlayout','show_tabular');
	$layout_vote_mini = hikashop_getLayout('vote', 'mini', $this->params, $js);
	$layout_vote_listing = hikashop_getLayout('vote', 'listing', $this->params, $js);
	$layout_vote_form = hikashop_getLayout('vote', 'form', $this->params, $js);
	$config =& hikashop_config();
	$status_vote = $config->get('enable_status_vote');
	$hide_specs = 1;
	if($this->element->product_weight != 0 || $this->element->product_width != 0 || $this->element->product_height != 0 || $this->element->product_length != 0 || @$this->element->main->product_weight != 0 || @$this->element->main->product_width != 0 || @$this->element->main->product_height != 0 || @$this->element->main->product_length != 0)
		$hide_specs = 0;
	foreach ($this->fields as $fieldName => $oneExtraField) {
		$value = '';
		if(empty($this->element->$fieldName) && !empty($this->element->main->$fieldName))$this->element->$fieldName = $this->element->main->$fieldName;
		if(isset($this->element->$fieldName))
			$value = trim($this->element->$fieldName);
		if(!empty($value))
			$hide_specs = 0;
	}
?>
<div id="hikashop_product_top_part" class="hikashop_product_top_part">
<?php if(!empty($this->element->extraData->topBegin)) { echo implode("\r\n",$this->element->extraData->topBegin); } ?>
	<h1>
		<span id="hikashop_product_name_main" class="hikashop_product_name_main">
			<?php
			if (hikashop_getCID('product_id')!=$this->element->product_id && isset ($this->element->main->product_name))
				echo $this->element->main->product_name;
			else
				echo $this->element->product_name;
			?>
		</span>
		<?php if ($this->config->get('show_code')) { ?>
		<span id="hikashop_product_code_main" class="hikashop_product_code_main">
			<?php
			echo $this->element->product_code;
			?>
		</span><?php
/**
 * @package	HikaShop for Joomla!
 * @version	2.2.3
 * @author	hikashop.com
 * @copyright	(C) 2010-2013 HIKARI SOFTWARE. All rights reserved.
 * @license	GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
 */
defined('_JEXEC') or die('Restricted access');
?><?php


	hikashop_loadJslib('jquery');
	$js = '';
	$params = null;
	$this->params->set('vote_type','product');
	if(isset($this->element->main)){
		$product_id = $this->element->main->product_id;
	}else{
		$product_id = $this->element->product_id;
	}
	$this->params->set('vote_ref_id',$product_id);
	$this->params->set('productlayout','show_tabular');
	$layout_vote_mini = hikashop_getLayout('vote', 'mini', $this->params, $js);
	$layout_vote_listing = hikashop_getLayout('vote', 'listing', $this->params, $js);
	$layout_vote_form = hikashop_getLayout('vote', 'form', $this->params, $js);
	$config =& hikashop_config();
	$status_vote = $config->get('enable_status_vote');
	$hide_specs = 1;
	if($this->element->product_weight != 0 || $this->element->product_width != 0 || $this->element->product_height != 0 || $this->element->product_length != 0 || @$this->element->main->product_weight != 0 || @$this->element->main->product_width != 0 || @$this->element->main->product_height != 0 || @$this->element->main->product_length != 0)
		$hide_specs = 0;
	foreach ($this->fields as $fieldName => $oneExtraField) {
		$value = '';
		if(empty($this->element->$fieldName) && !empty($this->element->main->$fieldName))$this->element->$fieldName = $this->element->main->$fieldName;
		if(isset($this->element->$fieldName))
			$value = trim($this->element->$fieldName);
		if(!empty($value))
			$hide_specs = 0;
	}
?>
<div id="hikashop_product_top_part" class="hikashop_product_top_part">
<?php if(!empty($this->element->extraData->topBegin)) { echo implode("\r\n",$this->element->extraData->topBegin); } ?>
	<h1>
		<span id="hikashop_product_name_main" class="hikashop_product_name_main">
			<?php
			if (hikashop_getCID('product_id')!=$this->element->product_id && isset ($this->element->main->product_name))
				echo $this->element->main->product_name;
			else
				echo $this->element->product_name;
			?>
		</span>
		<?php if ($this->config->get('show_code')) { ?>
		<span id="hikashop_product_code_main" class="hikashop_product_code_main">
			<?php
			echo $this->element->product_code;
			?>
		</span>
		<?php } ?>
	</h1>
<?php if(!empty($this->element->extraData->topEnd)) { echo implode("\r\n",$this->element->extraData->topEnd); } ?>
	<?php
	$pluginsClass = hikashop_get('class.plugins');
	$plugin = $pluginsClass->getByName('content', 'hikashopsocial');
	if (@ $plugin->published || @ $plugin->enabled) {
		echo '{hikashop_social}';
	}
	?>
</div>
<?php if(HIKASHOP_RESPONSIVE){ ?>
	<div class="row-fluid">
<?php } ?>
<div id="hikashop_product_left_part" class="hikashop_product_left_part" style="width: 500px; ">
	<?php
	if(!empty($this->element->extraData->leftBegin)) { echo implode("\r\n",$this->element->extraData->leftBegin); }

	$this->row = & $this->element;
	$this->setLayout('show_block_img');
	echo $this->loadTemplate();
	?>
	<div id="hikashop_product_description_main_mini" class="hikashop_product_description_main_mini">
		<?php
		if(!empty($this->element->product_description)){
			$resume = substr(strip_tags(preg_replace('#<hr *id="system-readmore" */>.*#is','',$this->element->product_description)),0,300);
			if (!empty($this->element->product_description) && strlen($this->element->product_description)>300)
				$resume .= " ...<a href='#hikashop_show_tabular_description'>".JText::_('READ_MORE')."</a>";
			echo JHTML::_('content.prepare',$resume);
		}
		?>
	</div>
	<?php if(!empty($this->element->extraData->leftEnd)) { echo implode("\r\n",$this->element->extraData->leftEnd); } ?>
</div>
<div id="hikashop_product_right_part" class="hikashop_product_right_part">
	<?php
	if(!empty($this->element->extraData->rightBegin))
		echo implode("\r\n",$this->element->extraData->rightBegin);
	?>
	<span id="hikashop_product_price_main" class="hikashop_product_price_main">
		<?php
		if ($this->params->get('show_price')) {
			$this->row = & $this->element;
			$this->setLayout('listing_price');
			echo $this->loadTemplate();
		}
		?>
	</span><br />
	<div id="hikashop_product_vote_mini" class="hikashop_product_vote_mini">
		<?php
		if($this->params->get('show_vote_product') == '-1'){
			$this->params->set('show_vote_product',$config->get('show_vote_product'));
		}
		if($this->params->get('show_vote_product')){
			echo $layout_vote_mini;
		}
		?>
	</div>
	<?php
	if($this->params->get('characteristic_display')!='list'){
		$this->setLayout('show_block_characteristic');
		echo $this->loadTemplate();
		?>
		<br />
		<?php
	}
	$form = ',0';
	if (!$this->config->get('ajax_add_to_cart', 1)) {
		$form = ',\'hikashop_product_form\'';
	}
	if (hikashop_level(1) && !empty ($this->element->options)) {
	?>
		<div id="hikashop_product_options" class="hikashop_product_options">
			<?php
			$this->setLayout('option');
			echo $this->loadTemplate();
			?>
		</div>
		<br />
		<?php
		$form = ',\'hikashop_product_form\'';
		if ($this->config->get('redirect_url_after_add_cart', 'stay_if_cart') == 'ask_user') {
		?>
			<input type="hidden" name="popup" value="1"/>
		<?php
		}
	}
	if (!$this->params->get('catalogue') && ($this->config->get('display_add_to_cart_for_free_products') || !empty ($this->element->prices))) {
		if (!empty ($this->itemFields)) {
			$form = ',\'hikashop_product_form\'';
			if ($this->config->get('redirect_url_after_add_cart', 'stay_if_cart') == 'ask_user') {
			?>
				<input type="hidden" name="popup" value="1"/>
			<?php
			}
			$this->setLayout('show_block_custom_item');
			echo $this->loadTemplate();
		}
	}
	$this->formName = $form;
	if($this->params->get('show_price')){ ?>
		<span id="hikashop_product_price_with_options_main" class="hikashop_product_price_with_options_main">
		</span>
	<?php } ?>
	<?php $contact = $this->config->get('product_contact',0); ?>
	<div id="hikashop_product_contact_main" class="hikashop_product_contact_main">
		<?php
		if (hikashop_level(1) && ($contact == 2 || ($contact == 1 && !empty ($this->element->product_contact)))) {
			$empty = '';
			$params = new HikaParameter($empty);
			global $Itemid;
			$url_itemid='';
			if(!empty($Itemid)){
				$url_itemid='&Itemid='.$Itemid;
			}
			echo $this->cart->displayButton(JText :: _('CONTACT_US_FOR_INFO'), 'contact_us', $params, hikashop_completeLink('product&task=contact&cid=' . $this->element->product_id.$url_itemid), 'window.location=\'' . hikashop_completeLink('product&task=contact&cid=' . $this->element->product_id.$url_itemid) . '\';return false;');
		}
		?>
	</div>
	<?php
	if(!empty($this->element->extraData->rightMiddle))
		echo implode("\r\n",$this->element->extraData->rightMiddle);
	?>

	<span id="hikashop_product_id_main" class="hikashop_product_id_main">
		<input type="hidden" name="product_id" value="<?php echo $this->element->product_id; ?>" />
	</span>
	<br />
	<?php if(empty ($this->element->characteristics) || $this->params->get('characteristic_display')!='list'){ ?>
		<div id="hikashop_product_quantity_main" class="hikashop_product_quantity_main">
			<?php
			$this->row = & $this->element;
			$this->ajax = 'if(hikashopCheckChangeForm(\'item\',\'hikashop_product_form\')){ return hikashopModifyQuantity(\'' . $this->row->product_id . '\',field,1' . $form . ',\'cart\'); } else { return false; }';
			$this->setLayout('quantity');
			echo $this->loadTemplate();
			?>
		</div>
	<?php
	}
	$this->setLayout('show_block_product_files');
	echo $this->loadTemplate();
	?>
	<?php
	if(!empty($this->element->extraData->rightEnd))
		echo implode("\r\n",$this->element->extraData->rightEnd);
	?>
</div>
<?php if(HIKASHOP_RESPONSIVE){ ?>
	</div>
<?php } ?>
	<input type="hidden" name="cart_type" id="type" value="cart"/>
	<input type="hidden" name="add" value="1"/>
	<input type="hidden" name="ctrl" value="product"/>
	<input type="hidden" name="task" value="updatecart"/>
	<input type="hidden" name="return_url" value="<?php echo urlencode(base64_encode(urldecode($this->redirect_url)));?>"/>
</form>
<div id="hikashop_product_bottom_part" class="hikashop_product_bottom_part show_tabular">
	<div id="hikashop_tabs_div">
  
		<ul class="hikashop_tabs_ul">
        
        
        
			<li id="hikashop_show_tabular_description_li" class="hikashop_tabs_li ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_description');" href="javascript:void(0);"><?php echo JText::_('PRODUCT_DESCRIPTION');?></a></li>
            
            
<!--            
			<?php if($hide_specs == 0){ ?>
			<li id="hikashop_show_tabular_specification_li" class="hikashop_tabs_li ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_specification');" href="javascript:void(0);"><?php echo JText::_('Tech details');?></a></li>
			<?php }
			if($status_vote == "comment" || $status_vote == "two" || $status_vote == "both" ){
			?>-->
          
          <li id="hikashop_show_tabular_techdetails_li" class="hikashop_tabs_li ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_techdetails');" href="javascript:void(0);"><?php echo JText::_('TECH_DETAILS');?></a></li>
          
           <li id="hikashop_show_tabular_deliveryinfo_li" class="hikashop_tabs_li ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_deliveryinfo');" href="javascript:void(0);"><?php echo JText::_('DELIVERY_INFO');?></a></li>     
           
           <li id="hikashop_show_tabular_compatibleproducts_li" class="hikashop_tabs_li ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_compatibleproducts');" href="javascript:void(0);"><?php echo JText::_('COMPATIBLE_PRODUCTS');?></a></li>  
          
          
			<li id="hikashop_show_tabular_comment_li" class="hikashop_tabs_li ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_comment');" href="javascript:void(0);"><?php echo JText::_('PRODUCT_COMMENT');?></a></li>
			<li id="hikashop_show_tabular_new_comment_li" class="hikashop_tabs_li ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_new_comment');" href="javascript:void(0);"><?php echo JText::_('PRODUCT_NEW_COMMENT');?></a></li>
			<?php } ?>
		</ul>
		<?php
		if(!empty($this->element->extraData->bottomBegin))
			echo implode("\r\n",$this->element->extraData->bottomBegin);
		?>
		<div class="hikashop_tabs_content" id="hikashop_show_tabular_description">
			<div id="hikashop_product_description_main" class="hikashop_product_description_main">
				<?php
				echo JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description));
				?>
			</div>
			<span id="hikashop_product_url_main" class="hikashop_product_url_main">
				<?php
				if (!empty ($this->element->product_url)) {
					echo JText :: sprintf('MANUFACTURER_URL', '<a href="' . $this->element->product_url . '" target="_blank">' . $this->element->product_url . '</a>');
				}
				?>
			</span>
		</div>
        
        
  <div class="hikashop_tabs_content" id="hikashop_show_tabular_techdetails">
      <div id="hikashop_product_description_main" class="hikashop_product_techdetails_main">
        <?php echo $this->elements->techdetails; ?>
        </div>
   </div>
  
        
   <div class="hikashop_tabs_content" id="hikashop_show_tabular_deliveryinfo">
      <div id="hikashop_product_description_main" class="hikashop_product_deliveryinfo_main">
       <?php echo $this->elements->deliveryinfo; ?>
        </div>
   </div>
        

   <div class="hikashop_tabs_content" id="hikashop_show_tabular_compatibleproducts">
      <div id="hikashop_product_description_main" class="hikashop_product_compatibleproducts_main">
       <?php echo $this->elements->compatibleproducts; ?>
        </div>
   </div>
        
<!--        
		<?php if($hide_specs == 0){ ?>
		<div class="hikashop_tabs_content" id="hikashop_show_tabular_specification">
		<?php
			$this->setLayout('show_block_dimensions');
			echo $this->loadTemplate();
			if(!empty($this->fields)){
				$this->setLayout('show_block_custom_main');
				echo $this->loadTemplate();
			}
		?>
		</div>-->
        
		<?php }
if($status_vote == "comment" || $status_vote == "two" || $status_vote == "both" ){ ?>
<form action="<?php echo hikashop_currentURL() ?>" method="post" name="hikashop_comment_form" id="hikashop_comment_form">
		<?php
		if(!empty($this->element->extraData->bottomMiddle))
			echo implode("\r\n",$this->element->extraData->bottomMiddle);
		?>
			<div class="hikashop_tabs_content" id="hikashop_show_tabular_comment">
				<div id="hikashop_product_vote_listing" class="hikashop_product_vote_listing">
					<?php
						echo $layout_vote_listing;
					?>
				</div>
			</div>
			<div class="hikashop_tabs_content" id="hikashop_show_tabular_new_comment">
				<div id="hikashop_product_vote_form" class="hikashop_product_vote_form">
					<?php
						echo $layout_vote_form;
					?>
				</div>
			</div>
</form>
	<input type="hidden" name="selected_tab" id="selected_tab" value="hikashop_show_tabular_description"/>
<?php } ?>
		<?php
		if(!empty($this->element->extraData->bottomEnd))
			echo implode("\r\n",$this->element->extraData->bottomEnd);
		?>
	</div>
</div>
<script type="text/javascript">
if(!hkjQuery) window.hkjQuery = window.jQuery;
(function($) {
	var selectedTab = $( "#selected_tab" ).val();
	displayTab(selectedTab,1);
})(hkjQuery);

function displayTab(id, load){
	var oldTab = hkjQuery( "#selected_tab" ).val();
	if(id != oldTab || load !== undefined){
		hkjQuery( "#"+oldTab ).css('display','none');
		hkjQuery( "#"+id ).css('display','inherit');
		hkjQuery( "#"+oldTab+"_li" ).removeClass('hikashop_tabs_li_selected');
		hkjQuery( "#"+id+"_li" ).addClass('hikashop_tabs_li_selected');
		hkjQuery( "#selected_tab" ).val(id);
	}
}
</script>
		<?php } ?>
	</h1>
<?php if(!empty($this->element->extraData->topEnd)) { echo implode("\r\n",$this->element->extraData->topEnd); } ?>
	<?php
	$pluginsClass = hikashop_get('class.plugins');
	$plugin = $pluginsClass->getByName('content', 'hikashopsocial');
	if (@ $plugin->published || @ $plugin->enabled) {
		echo '{hikashop_social}';
	}
	?>
</div>
<?php if(HIKASHOP_RESPONSIVE){ ?>
	<div class="row-fluid">
<?php } ?>
<div id="hikashop_product_left_part" class="hikashop_product_left_part" style="width: 500px; ">
	<?php
	if(!empty($this->element->extraData->leftBegin)) { echo implode("\r\n",$this->element->extraData->leftBegin); }

	$this->row = & $this->element;
	$this->setLayout('show_block_img');
	echo $this->loadTemplate();
	?>
<!--	<div id="hikashop_product_description_main_mini" class="hikashop_product_description_main_mini">
		<?php
		if(!empty($this->element->product_description)){
			$resume = substr(strip_tags(preg_replace('#<hr *id="system-readmore" */>.*#is','',$this->element->product_description)),0,300);
			if (!empty($this->element->product_description) && strlen($this->element->product_description)>300)
				$resume .= " ...<a href='#hikashop_show_tabular_description'>".JText::_('READ_MORE')."</a>";
			echo JHTML::_('content.prepare',$resume);
		}
		?>
	</div>-->
	<?php if(!empty($this->element->extraData->leftEnd)) { echo implode("\r\n",$this->element->extraData->leftEnd); } ?>
</div>
<div id="hikashop_product_right_part" class="hikashop_product_right_part">
	<?php
	if(!empty($this->element->extraData->rightBegin))
		echo implode("\r\n",$this->element->extraData->rightBegin);
	?>
	<span id="hikashop_product_price_main" class="hikashop_product_price_main">
		<?php
		if ($this->params->get('show_price')) {
			$this->row = & $this->element;
			$this->setLayout('listing_price');
			echo $this->loadTemplate();
		}
		?>
	</span><br />
	<div id="hikashop_product_vote_mini" class="hikashop_product_vote_mini">
		<?php
		if($this->params->get('show_vote_product') == '-1'){
			$this->params->set('show_vote_product',$config->get('show_vote_product'));
		}
		if($this->params->get('show_vote_product')){
			echo $layout_vote_mini;
		}
		?>
	</div>
	<?php
	if($this->params->get('characteristic_display')!='list'){
		$this->setLayout('show_block_characteristic');
		echo $this->loadTemplate();
		?>
		<br />
		<?php
	}
	$form = ',0';
	if (!$this->config->get('ajax_add_to_cart', 1)) {
		$form = ',\'hikashop_product_form\'';
	}
	if (hikashop_level(1) && !empty ($this->element->options)) {
	?>
		<div id="hikashop_product_options" class="hikashop_product_options">
			<?php
			$this->setLayout('option');
			echo $this->loadTemplate();
			?>
		</div>
		<br />
		<?php
		$form = ',\'hikashop_product_form\'';
		if ($this->config->get('redirect_url_after_add_cart', 'stay_if_cart') == 'ask_user') {
		?>
			<input type="hidden" name="popup" value="1"/>
		<?php
		}
	}
	if (!$this->params->get('catalogue') && ($this->config->get('display_add_to_cart_for_free_products') || !empty ($this->element->prices))) {
		if (!empty ($this->itemFields)) {
			$form = ',\'hikashop_product_form\'';
			if ($this->config->get('redirect_url_after_add_cart', 'stay_if_cart') == 'ask_user') {
			?>
				<input type="hidden" name="popup" value="1"/>
			<?php
			}
			$this->setLayout('show_block_custom_item');
			echo $this->loadTemplate();
		}
	}
	$this->formName = $form;
	if($this->params->get('show_price')){ ?>
		<span id="hikashop_product_price_with_options_main" class="hikashop_product_price_with_options_main">
		</span>
	<?php } ?>
	<?php $contact = $this->config->get('product_contact',0); ?>
	<div id="hikashop_product_contact_main" class="hikashop_product_contact_main">
		<?php
		if (hikashop_level(1) && ($contact == 2 || ($contact == 1 && !empty ($this->element->product_contact)))) {
			$empty = '';
			$params = new HikaParameter($empty);
			global $Itemid;
			$url_itemid='';
			if(!empty($Itemid)){
				$url_itemid='&Itemid='.$Itemid;
			}
			echo $this->cart->displayButton(JText :: _('CONTACT_US_FOR_INFO'), 'contact_us', $params, hikashop_completeLink('product&task=contact&cid=' . $this->element->product_id.$url_itemid), 'window.location=\'' . hikashop_completeLink('product&task=contact&cid=' . $this->element->product_id.$url_itemid) . '\';return false;');
		}
		?>
	</div>
	<?php
	if(!empty($this->element->extraData->rightMiddle))
		echo implode("\r\n",$this->element->extraData->rightMiddle);
	?>

	<span id="hikashop_product_id_main" class="hikashop_product_id_main">
		<input type="hidden" name="product_id" value="<?php echo $this->element->product_id; ?>" />
	</span>
	<br />
	<?php if(empty ($this->element->characteristics) || $this->params->get('characteristic_display')!='list'){ ?>
		<div id="hikashop_product_quantity_main" class="hikashop_product_quantity_main">
			<?php
			$this->row = & $this->element;
			$this->ajax = 'if(hikashopCheckChangeForm(\'item\',\'hikashop_product_form\')){ return hikashopModifyQuantity(\'' . $this->row->product_id . '\',field,1' . $form . ',\'cart\'); } else { return false; }';
			$this->setLayout('quantity');
			echo $this->loadTemplate();
			?>
		</div>
	<?php
	}
	$this->setLayout('show_block_product_files');
	echo $this->loadTemplate();
	?>
	<?php
	if(!empty($this->element->extraData->rightEnd))
		echo implode("\r\n",$this->element->extraData->rightEnd);
	?>
</div>
<?php if(HIKASHOP_RESPONSIVE){ ?>
	</div>
<?php } ?>
	<input type="hidden" name="cart_type" id="type" value="cart"/>
	<input type="hidden" name="add" value="1"/>
	<input type="hidden" name="ctrl" value="product"/>
	<input type="hidden" name="task" value="updatecart"/>
	<input type="hidden" name="return_url" value="<?php echo urlencode(base64_encode(urldecode($this->redirect_url)));?>"/>
</form>
<div id="hikashop_product_bottom_part" class="hikashop_product_bottom_part show_tabular">
	<div id="hikashop_tabs_div">
  
		<ul class="hikashop_tabs_ul">
 
			<li id="hikashop_show_tabular_description_li" class="hikashop_tabs_li ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_description');" href="javascript:void(0);"><?php echo JText::_('PRODUCT_DESCRIPTION');?></a></li>
			<?php if($hide_specs == 0){ ?>
			<li id="hikashop_show_tabular_specification_li" class="hikashop_tabs_li ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_specification');" href="javascript:void(0);"><?php echo JText::_('Tech details');?></a></li>
			<?php }
			if($status_vote == "comment" || $status_vote == "two" || $status_vote == "both" ){
			?>
			<li id="hikashop_show_tabular_techdetails_li" class="hikashop_tabs_li ui-corner-top">
				<a onclick="displayTab('hikashop_show_tabular_techdetails');" href="javascript:void(0);">
					<?php echo JText::_('Delivery Info');?>
				</a>
			</li> 
			<li id="hikashop_show_tabular_deliveryinfo_li" class="hikashop_tabs_li ui-corner-top">
				<a onclick="displayTab('hikashop_show_tabular_deliveryinfo');" href="javascript:void(0);">
					<?php echo JText::_('Compatible products');?>
				</a>
			</li>  
			<li id="hikashop_show_tabular_compatibleproducts_li" class="hikashop_tabs_li ui-corner-top">
				<a onclick="displayTab('hikashop_show_tabular_compatibleproducts');" href="javascript:void(0);">
					<?php echo JText::_('Compatible products');?>
				</a>
			</li>  
			<li id="hikashop_show_tabular_comment_li" class="hikashop_tabs_li ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_comment');" href="javascript:void(0);"><?php echo JText::_('PRODUCT_COMMENT');?></a></li>
			<li id="hikashop_show_tabular_new_comment_li" class="hikashop_tabs_li ui-corner-top"><a onclick="displayTab('hikashop_show_tabular_new_comment');" href="javascript:void(0);"><?php echo JText::_('PRODUCT_NEW_COMMENT');?></a></li>
			<?php } ?>
		</ul>
		<?php
		if(!empty($this->element->extraData->bottomBegin))
			echo implode("\r\n",$this->element->extraData->bottomBegin);
		?>
		<div class="hikashop_tabs_content" id="hikashop_show_tabular_description">
			<div id="hikashop_product_description_main" class="hikashop_product_description_main">
				<?php
				echo JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description));
				?>
			</div>
			<span id="hikashop_product_url_main" class="hikashop_product_url_main">
				<?php
				if (!empty ($this->element->product_url)) {
					echo JText :: sprintf('MANUFACTURER_URL', '<a href="' . $this->element->product_url . '" target="_blank">' . $this->element->product_url . '</a>');
				}
				?>
			</span>
		</div>
		<?php if($hide_specs == 0){ ?>
		<div class="hikashop_tabs_content" id="hikashop_show_tabular_specification">
		<?php
			$this->setLayout('show_block_dimensions');
			echo $this->loadTemplate();
			if(!empty($this->fields)){
				$this->setLayout('show_block_custom_main');
				echo $this->loadTemplate();
			}
		?>
		</div>
		<?php } ?>
        
   <div class="hikashop_tabs_content" id="hikashop_show_tabular_techdetails">
      <div id="hikashop_product_description_main" class="hikashop_product_techdetails_main">
        <?php echo $this->elements->techdetails; ?>
        </div>
   </div>
  
        
   <div class="hikashop_tabs_content" id="hikashop_show_tabular_deliveryinfo">
      <div id="hikashop_product_description_main" class="hikashop_product_deliveryinfo_main">
       <?php echo $this->elements->deliveryinfo; ?>
        </div>
   </div>
        

   <div class="hikashop_tabs_content" id="hikashop_show_tabular_compatibleproducts">
      <div id="hikashop_product_description_main" class="hikashop_product_compatibleproducts_main">
       <?php echo $this->elements->compatibleproducts; ?>
        </div>
   </div> 
        
        
        

<?php
if($status_vote == "comment" || $status_vote == "two" || $status_vote == "both" ){ ?>
<form action="<?php echo hikashop_currentURL() ?>" method="post" name="hikashop_comment_form" id="hikashop_comment_form">
		<?php
		if(!empty($this->element->extraData->bottomMiddle))
			echo implode("\r\n",$this->element->extraData->bottomMiddle);
		?>
			<div class="hikashop_tabs_content" id="hikashop_show_tabular_comment">
				<div id="hikashop_product_vote_listing" class="hikashop_product_vote_listing">
					<?php
						echo $layout_vote_listing;
					?>
				</div>
			</div>
			<div class="hikashop_tabs_content" id="hikashop_show_tabular_new_comment">
				<div id="hikashop_product_vote_form" class="hikashop_product_vote_form">
					<?php
						echo $layout_vote_form;
					?>
				</div>
			</div>
</form>
	<input type="hidden" name="selected_tab" id="selected_tab" value="hikashop_show_tabular_description"/>
<?php } ?>
		<?php
		if(!empty($this->element->extraData->bottomEnd))
			echo implode("\r\n",$this->element->extraData->bottomEnd);
		?>
	</div>
</div>
<script type="text/javascript">
if(!hkjQuery) window.hkjQuery = window.jQuery;
(function($) {
	var selectedTab = $( "#selected_tab" ).val();
	displayTab(selectedTab,1);
})(hkjQuery);

function displayTab(id, load){
	var oldTab = hkjQuery( "#selected_tab" ).val();
	if(id != oldTab || load !== undefined){
		hkjQuery( "#"+oldTab ).css('display','none');
		hkjQuery( "#"+id ).css('display','inherit');
		hkjQuery( "#"+oldTab+"_li" ).removeClass('hikashop_tabs_li_selected');
		hkjQuery( "#"+id+"_li" ).addClass('hikashop_tabs_li_selected');
		hkjQuery( "#selected_tab" ).val(id);
	}
}
</script>

Please Log in or Create an account to join the conversation.

  • Posts: 107
  • Thank you received: 1
10 years 3 weeks ago #151920

Guys this is not working for me at all, I'm getting a bit impenitent because the tabs should be a standard functionality, with ability of customize them, but it's not and it needs a good knowledge of PHP to get it working and I'm not that saavy with it.

I used the code you gave me and it didn't work, there were some obvious name mistakes that I fixed, still not working, I can see in the front end that the custom divs are called in the front end, and in the editor I can populate them by entering text (see screen grab) but the content is not pulled from the custom fields in the back end, I tried to wrap the content with the custom divs but it didn't help either, can you please please help me to get it working and improve your documentation for other people like me?

I attached my tabular view, screen grab of the page where I entered the content via editor and custom field settings, please help,
URL: hammocks.ie/hammocksUAT/index.php/hammoc...veral-colour-options

Thanks,
Kashka

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 846
  • Thank you received: 92
10 years 3 weeks ago #151954

Hi
it could be usefull to know the template/theme provider name so it is IT trendy shop
regard's

Last edit: 10 years 3 weeks ago by lionel75.

Please Log in or Create an account to join the conversation.

  • Posts: 13201
  • Thank you received: 2322
10 years 3 weeks ago #152068

Hi,

The tabs are working fine, the only thing missing is the content.
In the code i's actually "$this->elements->techdetails", thanks to remove the "s" to have "this->element->techdetails"

Please Log in or Create an account to join the conversation.

  • Posts: 107
  • Thank you received: 1
10 years 3 weeks ago #152193

Hi Xavier,

such a little thing so much nerves! I amended the tabular view and it's working exactly the way it should, fantastic!
Thank you so much for your help!

Delighted and relieved:)
Kashka

Please Log in or Create an account to join the conversation.

Time to create page: 0.112 seconds
Powered by Kunena Forum