add a tab in the tabular view

  • Posts: 1141
  • Thank you received: 13
  • Hikashop Business
2 months 1 week 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: 2 months 1 week ago by verzevoul.

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

  • Posts: 85055
  • Thank you received: 13871
  • MODERATOR
2 months 1 week 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 -->

The following user(s) said Thank You: verzevoul

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

  • Posts: 1141
  • Thank you received: 13
  • Hikashop Business
5 days 11 hours ago #370288

Hi!

This is a little bit confusing for me if you could help me with adding the tab YOUR_TAB_NAME2 (Column name: diatrofikoipinakes).

I tried like you said and this is my code:

<!-- EO BOTTOM BEGIN EXTRA DATA -->
	<div id="hikashop_tabs_div">
	    
	    
		<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_NAME2');?></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
					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
					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->diatrofikoipinakes;?>
</div>

<!-- BOTTOM END EXTRA DATA -->

But i see no extra tab in my product, instead i see the new custom field inside an existing tab under that tab's content.

Thank you!

Attachments:

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

  • Posts: 85055
  • Thank you received: 13871
  • MODERATOR
5 days 7 hours ago #370290

Hi,

The code change you did is fine.
If you don't see any change on the frontend, it's likely that you did your override for another template than the template you're using on the frontend.

The fact that the field is displayed in the specifications tab is because the custom field's display option for the frontend product page is turned on. You can turn it off since you're the one handling the display with your custom code.

Note that with HikaShop 6.3.0, which we've released a few days ago, the "Display view files" setting of the HikaShop configuration will now allow you to directly edit the view files from the frontend. This way, you can't make a mistake in editing the wrong view file or editing the correct one but for the wrong template:
www.hikashop.com/home/blog/528-hikashop-6-3-0.html#viewbuilder

The following user(s) said Thank You: verzevoul

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

  • Posts: 1141
  • Thank you received: 13
  • Hikashop Business
5 days 7 hours ago #370297

Hi,

I made sure the product's Page layout is applied correctly that's not the reason it's not working.
The 2nd tab is displayed by adding a read more button in the editor (i don't know if that's causing an issue).
I updated to the latest version okay. This is what i see in the screenshot.

Could you take a look?

Thank you

Attachments:

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

  • Posts: 85055
  • Thank you received: 13871
  • MODERATOR
5 days 2 hours ago #370301

So, if you edit the product / show_tabular view file with the edit button on the product page on the frontend, do you see your changes ?
If no, then it's likely that you were editing the wrong view file or for the wrong template in the backend.
In that case, try to add your changes from the frontend edit popup.

Otherwise, if nothing works, I'll have to have a look yes.

The following user(s) said Thank You: verzevoul

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

  • Posts: 1141
  • Thank you received: 13
  • Hikashop Business
4 days 12 hours ago #370316

Just to make sure i'm doing this right, i enable from backend the "Display view files" to Front-end option and then i see the edit button in the frontend correct?

From there in which view file should i edit the code? Cause i created a new view file to apply to specific products, i change the Page layout of these products to my new view file.

But from what i see now the Page layout is not applied and it still shows the same Page layout to all products. I don't know if i am doing something wrong here i have done this before i don't undestand!

I will send you details over email.

Thank you!

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

  • Posts: 85055
  • Thank you received: 13871
  • MODERATOR
3 days 6 hours ago #370332

Hi,

I replied to your email but I didn't get an answer from you. I'm suspecting you might not have received my email. If so, please check your spam folder.

The following user(s) said Thank You: verzevoul

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

Time to create page: 0.080 seconds
Powered by Kunena Forum