12 replies to this topic

[P.K]

Hi

 

I was trying to implement the first tab using html and then others using javascript.

This means that when you click the second tab the page would load and tabs from second to last wont require page reload and would be implemented using javascript whereas the first tab is html.

This would increase the page loading speed as only first tab would be loaded initially and when person clicks second tab all other tabs would be loaded

Please suggest

thanks

[Kess]

Hello,

 

I've been making some tests and have a solution that you can try. It works slightly different from what you described but the main idea is the same. Initially, only the contents of a first tab is loaded. Then, when you click any other tab, its content is being loaded. Not all other tabs at once but each tab separately when needed. And it's only for the first click, there are no additional reloads if a user clicks this tab again.

 

In order to do it you need to create additional layout for your item type. This layout should contain only positions for your tabs except for the first tab. And when you click a tab from your full layout, contents of a corresponding tab from this layout will be loaded.

 

I'll describe what I did so you can repeat it if needed. In this example I'll modify a standard JBZoo demo website with latest updates. Item type is "Product".

 

1. Create a new layout for this item type

 

First we should go to media/zoo/applications/jbuniversal/templates/catalog/renderer/item/product . Here I made a copy of full.php and called it loaded.php. After that I removed everything except last four tabs:

 

 

This is how my file looks like:

<?php
/**
 * JBZoo is universal CCK based Joomla! CMS and YooTheme Zoo component
 * @category   JBZoo
 * @author     smet.denis <admin@joomla-book.ru>
 * @copyright  Copyright (c) 2009-2012, Joomla-book.ru
 * @license    http://joomla-book.ru/info/disclaimer
 * @link       http://joomla-book.ru/projects/jbzoo JBZoo project page
 */
defined('_JEXEC') or die('Restricted access');
    $positionParams = array(
        'style'    => 'jbblock',
        'tag'      => 'div',
        'labelTag' => 'h3',
        'clear'    => true
    );
    ?>

            <div id="tab-gallery"><?php echo $this->renderPosition('tab-gallery', $positionParams); ?></div>
            <div id="tab-properties"><table class="jbtable"><?php echo $this->renderPosition('tab-properties', array('style' => 'jbtable')); ?></table></div>
            <div id="tab-reviews"><?php echo $this->renderPosition('tab-reviews', $positionParams); ?></div>
            <div id="tab-comments"><?php echo $this->renderPosition('tab-comments', $positionParams); ?></div>

Then we should add information about this layout and its positions to metadata.xml and positions.xml:

 

metadata:

<layout name="loaded">
    <name>Loaded</name>
    <description>Layout for loading tabs content</description>
</layout>

positions:

<positions layout="loaded">
    <position name="tab-gallery">Tab: gallery</position>
    <position name="tab-properties">Tab: properties</position>
    <position name="tab-reviews">Tab: reviews</position>
    <position name="tab-comments">Tab: comments</position>
</positions>

Then we should assign elements to these new positions:

 

 

 

 

2. Modify full.php

 

Here we should remove conditions for displaying tabs and tabs navigation, as well as content rendering of all tabs except the first one. We should keep only wrappers of other tabs. Here is the part of my full.php that creates tabs:

<?php 
    $positionParams = array(
        'style'    => 'jbblock',
        'tag'      => 'div',
        'labelTag' => 'h3',
        'clear'    => true
    );

    ?>
    <div id="<?php echo $tabsId;?>" class="rborder">
        <ul>
                <li>
                    <a href="<?php echo $this->app->jbenv->getCurrentUrl(); ?>#tab-text"><?php echo JText::_('JBZOO_ITEM_TAB_DESCRIPTION'); ?></a>
                </li>
                <li>
                    <a href="<?php echo $this->app->jbenv->getCurrentUrl(); ?>#tab-properties"><?php echo JText::_('JBZOO_ITEM_TAB_PROPS'); ?></a>
                </li>
                <li>
                    <a href="<?php echo $this->app->jbenv->getCurrentUrl(); ?>#tab-gallery"><?php echo JText::_('JBZOO_ITEM_TAB_GALLERY'); ?></a>
                </li>
                <li>
                    <a href="<?php echo $this->app->jbenv->getCurrentUrl(); ?>#tab-reviews"><?php echo JText::_('JBZOO_ITEM_TAB_REVIEWS'); ?></a>
                </li>
                <li>
                    <a href="<?php echo $this->app->jbenv->getCurrentUrl(); ?>#tab-comments"><?php echo JText::_('JBZOO_ITEM_TAB_COMMENTS'); ?>
                        (<?php echo $item->getCommentsCount(); ?>)</a></li>

        </ul>

            <div id="tab-text"><?php echo $this->renderPosition('tab-text', $positionParams); ?></div>
            <div id="tab-properties"></div>
            <div id="tab-gallery"></div>
            <div id="tab-reviews"></div>
            <div id="tab-comments"></div>
    </div>

    <?php $this->app->jbassets->tabs(); ?>
    <script type="text/javascript">
        var openedtabs = new Array();
        openedtabs[0] = true;
        currenturl=document.URL;
        jQuery(function ($) {
            $('#<?php echo $tabsId;?>').JBZooTabs({
                onTabShow: function (index) {
                    var map = $('.googlemaps > div:first');
                    if (map.length) {
                        map.data('Googlemaps').refresh();
                    }
                    if (openedtabs[index] != true) {                        
                        var tab = $('#<?php echo $tabsId;?> > div').eq(index);
                        var tabid = tab.attr('id');
                        targeturl = currenturl + '?tmpl=component&jbquickview=loaded' + ' #' + tabid;
                        tab.load(targeturl);
                        openedtabs[index] = true;
                    }
                }
            });
        });
    </script>

Notice that I only included the part with the tabs, this is not a complete file.

 

If you compare this code to the original one, you'll notice that a lot of code was removed. But some things were added to the tabs initialization script. 

 

This should work fine for basic content, but there might be problems if you need to load something complex. So you should test it on your website.

Edited by Kess, 22 December 2013 - 03:01.

[P.K]

Hi

I tried to implement the code but i think there is some problem or something missing. After doing all this do we need to remove the elements from the full layout and what about the full in position.xml?

moreover  my website is not running on latest version of jbzoo so in the script i doubt jbquickview might not work.

 

I also removed all the if conditions though i require them.

 

You might have a glance at the code in my website

 

thanks

[Kess]

Yes, you had an earlier version without quickview. I've replaced couple of files so it works now.

 

There is no need to remove other tabs positions and elements of full layout for now because they are not rendered anywhere. I'd keep them in case you want to undo the changes easily. At least until you are sure that new tabs work fine.

[P.K]

Hi

The thing i was afraid happened. The content of tabs is not working properly. the comments tab is not working as it uses third party extension. What could be the problem? Is there any javasript clash? 

Moreover i think i need to redo some css changes in properties tab.

Also i wish to have all the tabs under the if condition so that they are displayed only if content is present

 

What approach the solution suggested by you  using?

 

thanks

[Kess]

Hello,

 

In order to make other extensions work, you most likely should run their initialization scripts after their tabs are loaded. So you should find that script and copy it to your full.php file, inside the script that loads tabs. It's better to also run that new copied part only if the specific tab is opened.

 

In my example image gallery in a tab didn't work. Everything became ok after I copied this script to my full.php:

$('.jbgallery').fancybox({
    helpers:{
        "title"  : { type : "outside" },
        "buttons": { position:"top" },
        "thumbs" : { width :80, height:80 }
    }
});

And currently I don't have a solution how we can keep conditions for tabs. 

[P.K]

Hi

The problem is that commenting system has apart from PHP init, some JavaScripts library that it needs to load that cannot be patched through AJAX calls.

So is it possible that we could have the content of the commenting system loaded as normal tab like that of first tab

thanks

[Kess]

Hello,
 
If you want specific tab to work like before then there are two things to be done:
 
1. Revert the changes to that tab in full.php (and full template layout if you changed it).
 
2. Prevent this tab from being reloaded. Look at the script that initializes tabs. There is this code in it:

var openedtabs = new Array();
openedtabs[0] = true;

Later in the script I use it to prevent tabs from being loaded more than one time. Also this initially tells the script that it shouldn't load the tab with index "0" which is the first tab. So, for example, if your comment system is in the 4-th tab, you should add another line of code:

openedtabs[3] = true;

After you make these changes that tab will be rendered like before.

Edited by Kess, 24 December 2013 - 06:40.

[P.K]

Hi

i tried the second solution. Seems something is missing. I tried it, it isnt working properly. The content of tab is not loading

thanks

[Kess]

That's not the first and second solutions. You need to do both things to restore the tab as it was. In your case you didn't revert the changes to full.php:

<div id="tab-comments"></div>

This is what you currently have for the comments tab. There must be some code that will render content.

Edited by Kess, 24 December 2013 - 08:09.