Skip to main content

Dynamic tabs

1 year 1 month ago - 1 year 1 month ago #368765 by omnitron
Dynamic tabs was created by omnitron
-- 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.
Code:
<!-- 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.
Last edit: 1 year 1 month ago by nicolas.

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

1 year 1 month ago #368768 by nicolas
Replied by nicolas on topic Dynamic tabs
Hi,

You can add conditions to your code.
For example:
Code:
<?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.

1 year 1 month ago #368796 by omnitron
Replied by omnitron on topic Dynamic tabs
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.

1 year 1 month ago #368798 by nicolas
Replied by nicolas on topic Dynamic tabs
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:
Code:
$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.

1 year 1 month ago #368841 by omnitron
Replied by omnitron on topic Dynamic tabs
I see.

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

Thanks,
Alireza

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

1 year 1 month ago #368842 by nicolas
Replied by nicolas on topic Dynamic tabs
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.

10 months 1 week ago - 10 months 1 week ago #369826 by omnitron
Replied by omnitron on topic Dynamic tabs
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:
Code:
<?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
Code:
<?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: 10 months 1 week ago by nicolas.

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

10 months 1 week ago #369828 by nicolas
Replied by nicolas on topic Dynamic tabs
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.

10 months 1 week ago #369833 by omnitron
Replied by omnitron on topic Dynamic tabs
Could you please check the website?

This message contains confidential information

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

10 months 1 week ago #369836 by nicolas
Replied by nicolas on topic Dynamic tabs
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.
The following user(s) said Thank You: omnitron

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

Time to create page: 0.077 seconds
Powered by Kunena Forum