Dynamic tabs

  • Posts: 19
  • Thank you received: 0
  • Hikashop Business
1 month 3 hours ago #368765

-- HikaShop version -- : 6.1.0
-- Joomla version -- : 3.10.12
-- PHP version -- : 7.4

Hi,

I have two product layouts, the main one has six tabs:

  • Description
    Features
    Specifications
    Applications
    Ordering
    Documents
The second layout has only three tabs:
  • Description
    Specifications
    Documents

I was wondering how to make the tabs dynamic and hide them if there's no data to display for that tab.
I used this code for "product / show-->tabular" view.
<!-- Applications TAB TITLE -->
          <li id="hikashop_show_tabular_applications_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('Applications');?></li>
<!-- EO Applications TAB TITLE -->
<!-- Ordering TAB TITLE -->
          <li id="hikashop_show_tabular_orderingtable_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('Ordering');?></li>
<!-- EO Ordering TAB TITLE -->
<!-- Documents TAB TITLE -->
          <li id="hikashop_show_tabular_documents_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('Documents');?></li>
<!-- EO Documents TAB TITLE -->
		</ul>
      <div class="hikashop_tabs_content" id="hikashop_show_tabular_applications">
<?php echo $this->element->applications;?>
</div>
            <div class="hikashop_tabs_content" id="hikashop_show_tabular_orderingtable">
<?php echo $this->element->orderingtable;?>
</div>
            <div class="hikashop_tabs_content" id="hikashop_show_tabular_documents">
<?php echo $this->element->documents;?>
</div>
Thanks.

Attachments:
Last edit: 1 month 2 hours ago by nicolas.

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

  • Posts: 84585
  • Thank you received: 13753
  • MODERATOR
4 weeks 1 day ago #368768

Hi,

You can add conditions to your code.
For example:

<?php
if(!empty($this->element->applications)) {
?>
<!-- Applications TAB TITLE -->
          <li id="hikashop_show_tabular_applications_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('Applications');?></li>
<?php
}
?>

...

<?php
if(!empty($this->element->applications)) {
?>
<div class="hikashop_tabs_content" id="hikashop_show_tabular_applications">
<?php echo $this->element->applications;?>
</div>
<?php
}
?>

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

  • Posts: 19
  • Thank you received: 0
  • Hikashop Business
4 weeks 1 day ago #368796

Thank you for your prompt response. I managed to disable all the empty tabs except for the Specification tab.
How can I disable that tab if it remains empty?

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

  • Posts: 84585
  • Thank you received: 13753
  • MODERATOR
4 weeks 15 hours ago #368798

Hi,

That tab is supposed to be removed automatically already if it is empty.

The tab content is generated with this code in the show_tabular view file:

$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()) . $specif_tab_content;
}
And then, it only displays the tab if the content is not empty.
And so, the content depends on the view files show_block_dimensions and show_block_custom_main
And both of them are coded in a way that doesn't output any HTML if they have nothing to display.

So, what all that means is that either in show_tabular, or in show_block_dimensions, or in show_block_custom_main you must have modifications which made the HTML of the specifications tab not empty even though nothing is rendered by the browser.

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

  • Posts: 19
  • Thank you received: 0
  • Hikashop Business
4 weeks 1 hour ago #368841

I see.

Is it possible to have two different tabular layouts on product pages, such as Tabular 1 and Tabular 2?

Thanks,
Alireza

Attachments:

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

  • Posts: 84585
  • Thank you received: 13753
  • MODERATOR
3 weeks 6 days ago #368842

Hi,

Yes. When you edit product / show_tabular via the Display>Views menu, you have an input field at the top where you can change the name of the override file.
Do that and you'll have a new layout in the "layout on product page" setting with that new name.
Then, edit again product / show_tabular and change it for another look and voilà, you have two different layouts based on the same original layout.

The following user(s) said Thank You: omnitron

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

Time to create page: 0.065 seconds
Powered by Kunena Forum