Dynamic tabs

  • Posts: 21
  • Thank you received: 0
  • Hikashop Business
2 months 4 weeks 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: 2 months 4 weeks ago by nicolas.

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

  • Posts: 84868
  • Thank you received: 13820
  • MODERATOR
2 months 3 weeks 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: 21
  • Thank you received: 0
  • Hikashop Business
2 months 3 weeks 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: 84868
  • Thank you received: 13820
  • MODERATOR
2 months 3 weeks 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: 21
  • Thank you received: 0
  • Hikashop Business
2 months 3 weeks 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: 84868
  • Thank you received: 13820
  • MODERATOR
2 months 3 weeks 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.

  • Posts: 21
  • Thank you received: 0
  • Hikashop Business
4 days 32 minutes ago #369826

Hi,

I am currently migrating from Joomla 3 to Joomla 5. In Joomla 3, the data was visible in the product page tabs. However, after migrating to Joomla 5, while the data is present in the admin area, the data tab is empty on the frontend.

Do I need to use a different code for Joomla 5?


Title:

<?php
if(!empty($this->element->orderingtable)) {
?>
<!-- Ordering TAB TITLE -->
          <li id="hikashop_show_tabular_orderingtable_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('Ordering');?></li>
<?php
}
?>
<!-- EO Ordering TAB TITLE -->
Data
<?php
if(!empty($this->element->orderingtable)) {
?>
<div class="hikashop_tabs_content" id="hikashop_show_tabular_orderingtable">
<?php echo $this->element->orderingtable;?>
</div>
<?php
}
?>

Last edit: 3 days 15 hours ago by nicolas.

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

  • Posts: 84868
  • Thank you received: 13820
  • MODERATOR
3 days 15 hours ago #369828

Hi,

No, the code is still the same.
The problem is something else. Like for example the location where the code is added ( for example, if you add your data code inside the "if" for the comments tab and that feature is not activated, then your data area won't be added to the view on the frontend), or you actually created several layout overrides for show_tabular (like we talked before on this thread), and the one selected in the product is not the same as the one you're editing.

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

  • Posts: 21
  • Thank you received: 0
  • Hikashop Business
3 days 4 hours ago #369833

Could you please check the website?

This message contains confidential information

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

  • Posts: 84868
  • Thank you received: 13820
  • MODERATOR
1 day 15 hours ago #369836

Hi,

The issue is with the application of the customization in the view file.
For some reason, you had a closing div tag missing for the description tab content area leading to all the other tabs content to be located inside the description tab for the tabs system, resulting in the other tabs' content not being visible.
Adding back the missing closing div tag fixed the display of the ordering table tag.
So, as expected the problem is not linked to the migration to Joomla 5.

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

Time to create page: 0.067 seconds
Powered by Kunena Forum