Winchester Responsive

[simon1066]

One final look at this, if you add the line in red from my previous post and then remove the following lines from easyResponsiveTabs.js

       //Update Browser History
                        if (historyApi) {
                            var currentHash = window.location.hash;
                            var tabAriaParts = $tabAria.split('tab_item-');
                            // var newHash = respTabsId + (parseInt($tabAria.substring(9), 10) + 1).toString();
                            var newHash = respTabsId + (parseInt(tabAriaParts[1], 10) + 1).toString();
                            if (currentHash != "") {
                                var re = new RegExp(respTabsId + "[0-9]+");
                                if (currentHash.match(re) != null) {
                                    newHash = currentHash.replace(re, newHash);
                                }
                                else {
                                    newHash = currentHash + "|" + newHash;
                                }
                            }
                            else {
                                newHash = '#' + newHash;
                            }

                            history.replaceState(null, null, newHash);
                        }

This removes the errors and appears to have no effect on the functioning of the tabs, as designed by @picaflorazul i.e. no nested
tabs and no changes to the url when selecting tabs.

It's a bit of a hack so test it thoroughly,

[davewest]

It's a bit of a hack so test it thoroughly,

Not sure if this would be any help, but it's not really a hack, see the code at Easy-Responsive-Tabs github site.

I also call the script as:

<script src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'jscript') . '/easyResponsiveTabs.js' ?>" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#horizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion           
            width: 'auto', //auto or any width like 600px
            fit: true,   // 100% fit in a container
                    activate: function(event) { // Callback function if tab is switched
                var $tab = $(this);
                var $name = $('span', $info);

                $name.text($tab.text());

                $info.show();
            }
        });

        $('#verticalTab').easyResponsiveTabs({
            type: 'vertical',
            width: 'auto',
            fit: true
        });
    });
</script>

Works without errors on ZC 156c and 157, php7.3 and 7.4 Base template was RSB1.1

[simon1066]

Not sure if this would be any help, but it's not really a hack, see the code at Easy-Responsive-Tabs github site.

I also call the script as:

<script src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'jscript') . '/easyResponsiveTabs.js' ?>" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#horizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion           
            width: 'auto', //auto or any width like 600px
            fit: true,   // 100% fit in a container
                    activate: function(event) { // Callback function if tab is switched
                var $tab = $(this);
                var $name = $('span', $info);

                $name.text($tab.text());

                $info.show();
            }
        });

        $('#verticalTab').easyResponsiveTabs({
            type: 'vertical',
            width: 'auto',
            fit: true
        });
    });
</script>

Works without errors on ZC 156c and 157, php7.3 and 7.4 Base template was RSB1.1

This code is pretty similar to that which I'm using. Not sure if the 'works without errors' was referring to the site in your signature, but I had a quick look at that to compare the html and js code with mine, and found that you do have the Uncaught ReferenceError: $info is not defined error.

[davewest]

This code is pretty similar to that which I'm using. Not sure if the 'works without errors' was referring to the site in your signature, but I had a quick look at that to compare the html and js code with mine, and found that you do have the Uncaught ReferenceError: $info is not defined error.

Got it... sorry didn't spend time to read back.. still in the process of upgrading so files are off right now. sent the update to my live site.. $info is empty.. $info.show() is not used in accordion.. $name needs to be unique.. $name.show() doesn't seem to do anything in accordion... could be gone and still works.

<script>
    $(document).ready(function () {
        $('#horizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion           
            width: 'auto', //auto or any width like 600px
            fit: true,   // 100% fit in a container
                    activate: function(event) { // Callback function if tab is switched
                var $tab = $(this);
                var $name = $('span', ' ');

                $name.text($tab.text());

                $name.show();  //not used 
            }
        });

        $('#verticalTab').easyResponsiveTabs({
            type: 'vertical',
            width: 'auto',
            fit: true
        });
    });
</script>

Defining $info would work the same.

[simon1066]

Got it... sorry didn't spend time to read back.. still in the process of upgrading so files are off right now. sent the update to my live site.. $info is empty.. $info.show() is not used in accordion.. $name needs to be unique.. $name.show() doesn't seem to do anything in accordion... could be gone and still works.

<script>
    $(document).ready(function () {
        $('#horizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion           
            width: 'auto', //auto or any width like 600px
            fit: true,   // 100% fit in a container
                    activate: function(event) { // Callback function if tab is switched
                var $tab = $(this);
                var $name = $('span', ' ');

                $name.text($tab.text());

                $name.show();  //not used 
            }
        });

        $('#verticalTab').easyResponsiveTabs({
            type: 'vertical',
            width: 'auto',
            fit: true
        });
    });
</script>

Defining $info would work the same.

Thanks, I tried defining $info, but the problem with that (and I think your code as it stands) is that on selecting a tab it strips out the URL path and replaces it with #horizontalTab1/2/3, which is no good if the page is refreshed.

[davewest]

Thanks, I tried defining $info, but the problem with that (and I think your code as it stands) is that on selecting a tab it strips out the URL path and replaces it with #horizontalTab1/2/3, which is no good if the page is refreshed.

OK.. using the script as designed works outside of ZC, but for some reason not within.. $info was used to display wording after a tab was selected... not used here. removing caused the page history to change, thus the page refreshed issues. Within the easy tab script I comment out the script that was modifying the page history and all works again. I haven't really look deep into why it's changing page history, I don't think we need it unless using easy tabs for a product or catalog listing.

I changed tpl_modules_product_discription.php

    $(document).ready(function () {
        $('#horizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion           
            width: 'auto', //auto or any width like 600px
            fit: true,   // 100% fit in a container
                    activate: function(event) { }
        });

        $('#verticalTab').easyResponsiveTabs({
            type: 'vertical',
            width: 'auto',
            fit: true
        });
    });

commented out in easyResponsiveTabs.js lines 142-159

                        //Update Browser History
                    /*    if(historyApi) {
                            var currentHash = window.location.hash;
                            var newHash = respTabsId+(parseInt($tabAria.substring(9),10)+1).toString();
                            if (currentHash!="") {
                                var re = new RegExp(respTabsId+"[0-9]+");
                                if (currentHash.match(re)!=null) {                                    
                                    newHash = currentHash.replace(re,newHash);
                                }
                                else {
                                    newHash = currentHash+"|"+newHash;
                                }
                            }
                            else {
                                newHash = '#'+newHash;
                            }
                            
                            history.replaceState(null,null,newHash);
                        } */

See if that works for you..

[simon1066]

Thanks for looking at this. Yes, that does work for me. Similar to my original remedy with the additional removal of the $info from the php file.

In case I ever want to be able to directly link to a tab - perhaps a future link to the reviews tab might be needed, I've decided not to remove those lines from the php file while at the same time defining $info. There are a couple of changes needed to easyResponsiveTabs.js to have the #tabname appended to the url rather than replacing it.

[davewest]

Thanks for looking at this. Yes, that does work for me. Similar to my original remedy with the additional removal of the $info from the php file.

In case I ever want to be able to directly link to a tab - perhaps a future link to the reviews tab might be needed, I've decided not to remove those lines from the php file while at the same time defining $info. There are a couple of changes needed to easyResponsiveTabs.js to have the #tabname appended to the url rather than replacing it.

My reviews are part of the page so I wouldn't need to link to anything. Some day when I slow down and finish updating I'll replace it with css as I use on other pages. like the reviews section does. Nice to have options..

[kwright]

What's involved with getting the Winchester Responsive template to work with ZC 157b? Just a brief read through the threads, seems like some have got it working.

Thanks!

[DrByte]

What's involved with getting the Winchester Responsive template to work with ZC 157b? Just a brief read through the threads, seems like some have got it working.

It is indeed a bit painful.

What about the template has you wanting to use it? Is there a certain feature that drew your attention? What are your top 3 reasons?