add a tab in the tabular view

  • Posts: 1125
  • Thank you received: 12
  • Hikashop Business
9 hours 9 minutes ago #369548

-- HikaShop version -- : 6.1.1
-- Joomla version -- : 5.4.0
-- PHP version -- : 8.3

HI!

I added a new tab by following the instructions but i must be doing something wrong. I want to add a dynamic content in the custom field, this is my code:

<li id="hikashop_show_tabular_custom_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('YOUR_TAB_NAME');?></li>
 <div class="hikashop_tabs_content" id="hikashop_show_tabular_custom">
<?php echo $this->element->hrisiprofulakseis;?>
</div>

But i can't quite figure out the part "Then add a div with content after the "ul" thanks to:"
Where excactly should i put the div? Cause it doesn't show correctly in the product so far

This is the whole ul code i have:
<ul class="hikashop_tabs_ul">
		   
<!-- DESCRIPTION TAB TITLE -->
<?php if(!empty($description) || !empty ($this->element->product_url)) {
		if(empty($selected)) $selected = 'hikashop_show_tabular_description'; ?>
			<li id="hikashop_show_tabular_description_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('PRODUCT_DESCRIPTION');?></li>
<?php } ?>
<!-- EO DESCRIPTION TAB TITLE -->
<!-- SPECIFICATION TAB TITLE -->
<?php if(!empty($specif_tab_content)) {
		if(empty($selected)) $selected = 'hikashop_show_tabular_specification'; ?>
			<li id="hikashop_show_tabular_specification_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('SPECIFICATIONS');?></li>
          
<?php } ?>
<!-- EO SPECIFICATION TAB TITLE -->





<li id="hikashop_show_tabular_custom_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('YOUR_TAB_NAME');?></li>
 <div class="hikashop_tabs_content" id="hikashop_show_tabular_custom">
<?php echo $this->element->hrisiprofulakseis;?>
</div>





<!-- VOTE TAB TITLE -->
<?php if(in_array($status_vote, array('comment', 'two', 'both'))) {
		if(empty($selected)) $selected = 'hikashop_show_tabular_comment';
		if($comments_count != 0) { ?>
			<li id="hikashop_show_tabular_comment_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('PRODUCT_COMMENT');?><?php if($comments_count>0) echo ' ('.$comments_count.')'; ?></li>
<?php } ?>
			<li id="hikashop_show_tabular_new_comment_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('PRODUCT_NEW_COMMENT');?></li>
<?php } ?>
<!-- EO VOTE TAB TITLE -->
		</ul>
.

Thank you!

Last edit: 9 hours 9 minutes ago by verzevoul.

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

  • Posts: 84728
  • Thank you received: 13794
  • MODERATOR
4 hours 17 minutes ago #369552

Hi,

You need to separate your code.
By default, you have two pieces of code for the tabs:

<ul class="hikashop_tabs_ul">
<!-- DESCRIPTION TAB TITLE -->
<?php if(!empty($description) || !empty ($this->element->product_url)) {
		if(empty($selected)) $selected = 'hikashop_show_tabular_description'; ?>
			<li id="hikashop_show_tabular_description_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('PRODUCT_DESCRIPTION');?></li>
<?php } ?>
<!-- EO DESCRIPTION TAB TITLE -->
<!-- SPECIFICATION TAB TITLE -->
<?php if(!empty($specif_tab_content)) {
		if(empty($selected)) $selected = 'hikashop_show_tabular_specification'; ?>
			<li id="hikashop_show_tabular_specification_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('SPECIFICATIONS');?></li>
<?php } ?>
<!-- EO SPECIFICATION TAB TITLE -->
<!-- VOTE TAB TITLE -->
<?php if(in_array($status_vote, array('comment', 'two', 'both'))) {
		if(empty($selected)) $selected = 'hikashop_show_tabular_comment';
		if($comments_count != 0) { ?>
			<li id="hikashop_show_tabular_comment_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('PRODUCT_COMMENT');?><?php if($comments_count>0) echo ' ('.$comments_count.')'; ?></li>
<?php } ?>
			<li id="hikashop_show_tabular_new_comment_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('PRODUCT_NEW_COMMENT');?></li>
<?php } ?>
<!-- EO VOTE TAB TITLE -->
		</ul>
This first piece has a ul with one li for each tab title.
So, you need to add your
<li id="hikashop_show_tabular_custom_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('YOUR_TAB_NAME');?></li>
in there.

Then, you have this piece
<?php if(!empty($description) || !empty ($this->element->product_url)) { ?>
		<div class="hikashop_tabs_content" id="hikashop_show_tabular_description">
<!-- DESCRIPTION -->
<?php if(!empty($description)) { ?>
			<div id="hikashop_product_description_main" class="hikashop_product_description_main" itemprop="description"><?php
				echo $description;
			?></div>
<?php } ?>
<!-- EO DESCRIPTION -->
<!-- MANUFACTURER URL -->
			<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>
<!-- EO MANUFACTURER URL -->
<!-- BOTTOM MIDDLE EXTRA DATA -->
<?php
			if(!empty($this->element->extraData->bottomMiddle))
				echo implode("\r\n",$this->element->extraData->bottomMiddle);
?>
<!-- EO BOTTOM MIDDLE EXTRA DATA -->
		</div>
<?php } ?>
<?php if(!empty($specif_tab_content)) { ?>
		<div class="hikashop_tabs_content" id="hikashop_show_tabular_specification">
<!-- SPECIFICATIONS -->
		<?php
				echo $specif_tab_content;
		?>
<!-- EO SPECIFICATIONS -->
		</div>
<?php }
?>
<!-- VOTE TAB -->
<?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($comments_count != 0) {
?>
			<div class="hikashop_tabs_content" id="hikashop_show_tabular_comment">
				<div id="hikashop_vote_listing" data-votetype="product" class="hikashop_product_vote_listing"><?php
					//Layout show the comment listing
					echo $layout_vote_listing;
				?></div>
			</div>
<?php } ?>
			<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
					//Layout show the comment form
					echo $layout_vote_form;
				?></div>
			</div>
		</form>
<?php } ?>
<!-- EO VOTE TAB -->
<!-- BOTTOM END EXTRA DATA -->
<?php
	if(!empty($this->element->extraData->bottomEnd))
		echo implode("\r\n",$this->element->extraData->bottomEnd);
?>
<!-- EO BOTTOM END EXTRA DATA -->
which adds the content of each tab to the page.
There, you can add your second piece of code:
<div class="hikashop_tabs_content" id="hikashop_show_tabular_custom">
<?php echo $this->element->hrisiprofulakseis;?>
</div>

For example:
		<ul class="hikashop_tabs_ul">
<!-- DESCRIPTION TAB TITLE -->
<?php if(!empty($description) || !empty ($this->element->product_url)) {
		if(empty($selected)) $selected = 'hikashop_show_tabular_description'; ?>
			<li id="hikashop_show_tabular_description_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('PRODUCT_DESCRIPTION');?></li>
<?php } ?>
<!-- EO DESCRIPTION TAB TITLE -->
<!-- SPECIFICATION TAB TITLE -->
<?php if(!empty($specif_tab_content)) {
		if(empty($selected)) $selected = 'hikashop_show_tabular_specification'; ?>
			<li id="hikashop_show_tabular_specification_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('SPECIFICATIONS');?></li>
<?php } ?>
<!-- EO SPECIFICATION TAB TITLE -->
<!-- VOTE TAB TITLE -->
<?php if(in_array($status_vote, array('comment', 'two', 'both'))) {
		if(empty($selected)) $selected = 'hikashop_show_tabular_comment';
		if($comments_count != 0) { ?>
			<li id="hikashop_show_tabular_comment_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('PRODUCT_COMMENT');?><?php if($comments_count>0) echo ' ('.$comments_count.')'; ?></li>
<?php } ?>
			<li id="hikashop_show_tabular_new_comment_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('PRODUCT_NEW_COMMENT');?></li>
<?php } ?>
<!-- EO VOTE TAB TITLE -->
<li id="hikashop_show_tabular_custom_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('YOUR_TAB_NAME');?></li>
		</ul>
<?php if(!empty($description) || !empty ($this->element->product_url)) { ?>
		<div class="hikashop_tabs_content" id="hikashop_show_tabular_description">
<!-- DESCRIPTION -->
<?php if(!empty($description)) { ?>
			<div id="hikashop_product_description_main" class="hikashop_product_description_main" itemprop="description"><?php
				echo $description;
			?></div>
<?php } ?>
<!-- EO DESCRIPTION -->
<!-- MANUFACTURER URL -->
			<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>
<!-- EO MANUFACTURER URL -->
<!-- BOTTOM MIDDLE EXTRA DATA -->
<?php
			if(!empty($this->element->extraData->bottomMiddle))
				echo implode("\r\n",$this->element->extraData->bottomMiddle);
?>
<!-- EO BOTTOM MIDDLE EXTRA DATA -->
		</div>
<?php } ?>
<?php if(!empty($specif_tab_content)) { ?>
		<div class="hikashop_tabs_content" id="hikashop_show_tabular_specification">
<!-- SPECIFICATIONS -->
		<?php
				echo $specif_tab_content;
		?>
<!-- EO SPECIFICATIONS -->
		</div>
<?php }
?>
<!-- VOTE TAB -->
<?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($comments_count != 0) {
?>
			<div class="hikashop_tabs_content" id="hikashop_show_tabular_comment">
				<div id="hikashop_vote_listing" data-votetype="product" class="hikashop_product_vote_listing"><?php
					//Layout show the comment listing
					echo $layout_vote_listing;
				?></div>
			</div>
<?php } ?>
			<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
					//Layout show the comment form
					echo $layout_vote_form;
				?></div>
			</div>
		</form>
<?php } ?>
<!-- EO VOTE TAB -->
 <div class="hikashop_tabs_content" id="hikashop_show_tabular_custom">
<?php echo $this->element->hrisiprofulakseis;?>
</div>
<!-- BOTTOM END EXTRA DATA -->
<?php
	if(!empty($this->element->extraData->bottomEnd))
		echo implode("\r\n",$this->element->extraData->bottomEnd);
?>
<!-- EO BOTTOM END EXTRA DATA -->

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

Time to create page: 0.062 seconds
Powered by Kunena Forum