Tabs not closing

kyteasdale
Topic Author
Offline

9 years 1 month ago #278729 by kyteasdale

Tabs not closing was created by kyteasdale

-- HikaShop version -- : 3.2.0
-- Joomla version -- : 3.7.5
-- PHP version -- : 6

I just upgraded to latest Hikashop and re-added three tabs to the tabular_display as I had before.

I added them using the code given in the FAQ's. However, instead of switching between tabs, the content of the tabs just opens in a div above the former tab and doesn't close.

I,e. "DESCRIPTION" is displayed, I click "SIZES" and that text is displayed, I then click "DELIVERY" and that content is shown in a div above the sizes info etc

How can I separate them to open independently?

(site not available)

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

nicolas
Offline

9 years 1 month ago #278730 by nicolas

Replied by nicolas on topic Tabs not closing

Hi,

First, if you do your modifications via the menu Display>Views, you won't loose them when you update HikaShop as they will be stored as view overrides. So this should not happen following an update.
Second, the 3.2.0 version didn't change anything regarding the tabs compared to the previous verison, the 3.1.1. Did you use that version or an older version ? Which one ?
In fact, the modification mentioned in that FAQ is still valid with the 3.2.0 so I can only think of a problem in the way you made the modification after the update.
Unfortunately, without being able to look at the result you have on the page, nor a copy of the view file code you have, I can say anything precise as to what might be the exact problem in what you have.
I would recommend to check again your modifications against the code in the FAQ.

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

kyteasdale
Topic Author
Offline

9 years 1 month ago #278768 by kyteasdale

Replied by kyteasdale on topic Tabs not closing

It was an upgrade from 2.6.3 - so the changes to show tabular are notable. I had changed the details in Display > Views first time round, but of course, even the grid system changed.

Code:

<?php
/**
 * @package	HikaShop for Joomla!
 * @version	3.2.0
 * @author	hikashop.com
 * @copyright	(C) 2010-2017 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');
$this->setLayout('show_block_dimensions');
$specif_tab_content = trim($this->loadTemplate());
if(!empty($this->fields)){
	$this->setLayout('show_block_custom_main');
	$specif_tab_content .= trim($this->loadTemplate());
}

?>
<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" itemprop="name"><?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" itemprop="sku">
			<span id="hikashop_product_code_main" class="hikashop_product_code_main"><?php
				echo $this->element->product_code;
			?></span>
		</span>
<?php } ?>
	</h1>
<?php if(!empty($this->element->extraData->topEnd)) { echo implode("\r\n", $this->element->extraData->topEnd); } ?>
<?php
	$this->setLayout('show_block_social');
	echo $this->loadTemplate();
?>
</div>
<div class="hk-row-fluid">
<div id="hikashop_product_left_part" class="hikashop_product_left_part hkc-md-6">
<?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 hkc-md-6">
<?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" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<?php
	if($this->params->get('show_price') && (empty($this->displayVariants['prices']) || $this->params->get('characteristic_display') != 'list')) {
		$this->row =& $this->element;
		$this->setLayout('listing_price');
		echo $this->loadTemplate();

?>
		<meta itemprop="availability" content="http://schema.org/<?php echo ($this->row->product_quantity != 0) ? 'InStock' : 'OutOfstock' ;?>" />
<?php
		$CurrId = hikashop_getCurrency();
		$null = null;
		$currency = $this->currencyHelper->getCurrencies($CurrId, $null);
		$CurrCode = $currency[$CurrId]->currency_code;
?>
		<meta itemprop="priceCurrency" content="<?php echo $CurrCode; ?>" />
<?php
	}
?>
	</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') ||  ($this->config->get('display_add_to_wishlist_for_free_products', 1) && hikashop_level(1) && $this->params->get('add_to_wishlist') && $config->get('enable_wishlist', 1)) || !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
	}
?>
	<div id="hikashop_product_contact_main" class="hikashop_product_contact_main">
<?php
	$contact = $this->config->get('product_contact', 0);
	if(hikashop_level(1) && ($contact == 2 || ($contact == 1 && !empty($this->element->product_contact)))) {
		$css_button = $this->config->get('css_button', 'hikabtn');
?>
			<a href="<?php echo hikashop_completeLink('product&task=contact&cid=' . (int)$this->element->product_id . $this->url_itemid); ?>" class="<?php echo $css_button; ?>"><?php
				echo JText::_('CONTACT_US_FOR_INFO');
			?></a>
<?php
	}
?>
	</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();

	if(HIKASHOP_J30) {
		$this->setLayout('show_block_tags');
		echo $this->loadTemplate();
	}

	if(!empty($this->element->extraData->rightEnd))
		echo implode("\r\n",$this->element->extraData->rightEnd);
?>
</div>
</div>
	<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>
<?php
	$description = trim(JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description)));
?>
<div id="hikashop_product_bottom_part" class="hikashop_product_bottom_part show_tabular">
	<div id="hikashop_tabs_div">
		<ul class="hikashop_tabs_ul">
<?php if(!empty($description)) { ?>
			<li id="hikashop_show_tabular_description_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('PRODUCT_DESCRIPTION');?></li>
<?php } ?>
<li id="hikashop_show_tabular_sizes_li" class="hikashop_tabs_li ui-corner-top">
    <a onclick="displayTab('hikashop_show_tabular_sizes');" href="javascript:void(0);">
        <?php echo JText::_('Sizes');?>
    </a>
</li>
<li id="hikashop_show_tabular_delivery_li" class="hikashop_tabs_li ui-corner-top">
    <a onclick="displayTab('hikashop_show_tabular_delivery');" href="javascript:void(0);">
        <?php echo JText::_('Delivery');?>
    </a>
</li>
<li id="hikashop_show_tabular_colours_li" class="hikashop_tabs_li ui-corner-top">
    <a onclick="displayTab('hikashop_show_tabular_colours');" href="javascript:void(0);">
        <?php echo JText::_('Colours');?>
    </a>
</li>

<?php if(!empty($specif_tab_content)) { ?>
			<li id="hikashop_show_tabular_specification_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('SPECIFICATIONS');?></li>
<?php } ?>
<?php if(in_array($status_vote, array('comment', 'two', 'both'))) { ?>
			<li id="hikashop_show_tabular_comment_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('PRODUCT_COMMENT');?></li>
			<li id="hikashop_show_tabular_new_comment_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('PRODUCT_NEW_COMMENT');?></li>
<?php } ?>
<div class="hikashop_tabs_content" id="hikashop_show_tabular_delivery">
{article Delivery}{text} {/article}
</div>
<div class="hikashop_tabs_content" id="hikashop_show_tabular_sizes">
{article Sizes}{text} {/article}
</div>
<div class="hikashop_tabs_content" id="hikashop_show_tabular_colours">
{article Colours}{text}{/article}
</div>
		</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">
<?php if(!empty($description)) { ?>
			<div id="hikashop_product_description_main" class="hikashop_product_description_main" itemprop="description"><?php
				echo $description;
			?></div>
<?php } ?>
			<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(!empty($specif_tab_content)) { ?>
		<div class="hikashop_tabs_content" id="hikashop_show_tabular_specification"><?php
				echo $specif_tab_content;
		?></div>
<?php }
	if($status_vote == "comment" || $status_vote == "two" || $status_vote == "both" ) { ?>
		<form action="<?php echo hikashop_currentURL() ?>" method="post" name="adminForm_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_vote_listing" data-votetype="product" 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_vote_form" data-votetype="product" class="hikashop_product_vote_form"><?php
					echo $layout_vote_form;
				?></div>
			</div>
		</form>
<?php } ?>
<input type="hidden" name="selected_tab" id="selected_tab" value="hikashop_show_tabular_description"/>
<?php
	if(!empty($this->element->extraData->bottomEnd))
		echo implode("\r\n",$this->element->extraData->bottomEnd);
?>
	</div>
</div>
<script type="text/javascript">
if(typeof(hkjQuery) == "undefined") window.hkjQuery = window.jQuery;
window.hikashop.ready(function(){
	var selectedTab = hkjQuery( "#selected_tab" ).val();
	hkjQuery("#hikashop_tabs_div").children("div").css("display","none");
	hkjQuery("#"+selectedTab+"_li").addClass("hikashop_tabs_li_selected");
	hkjQuery("#"+selectedTab).css("display","inherit");
	hkjQuery("#hikashop_tabs_div .hikashop_tabs_ul li").click(function(){
		var currentLi = hkjQuery(this).attr("id");
		var currentDiv = currentLi.replace("_li","");
		hkjQuery("#hikashop_tabs_div").children("div").css("display","none");
		hkjQuery("#hikashop_tabs_div").children("form").children("div").css("display","none");
		hkjQuery("#"+currentDiv).css("display","inherit");
		hkjQuery(".hikashop_tabs_li_selected" ).removeClass("hikashop_tabs_li_selected");
		hkjQuery("#"+currentLi).addClass("hikashop_tabs_li_selected");
	});
});
</script>

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

nicolas
Offline

9 years 1 month ago #278780 by nicolas

Replied by nicolas on topic Tabs not closing

Hi,

The issue is that you put the code:

Code:

<div class="hikashop_tabs_content" id="hikashop_show_tabular_delivery">
{article Delivery}{text} {/article}
</div>
<div class="hikashop_tabs_content" id="hikashop_show_tabular_sizes">
{article Sizes}{text} {/article}
</div>
<div class="hikashop_tabs_content" id="hikashop_show_tabular_colours">
{article Colours}{text}{/article}
</div>

inside the ul of the tabs titles instead of putting it after the line:

Code:

<div class="hikashop_tabs_content" id="hikashop_show_tabular_description">

where the other tabs contents are located.

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

Time to create page: 0.048 seconds