Winchester Responsive

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,

simon1066:

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

davewest:

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.

simon1066:

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.

davewest:

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.

simon1066:

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..

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.

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.

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..

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!

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.
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?

DrByte:

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?

Well, the general layout of the Winchester Responsive, and being mobile friendly, is what drew me to use it. However, I would say:

1. Top nav menu (desktop view)
2. Home page slider & highlight banners, which use the banner system which I can schedule
3. Flexible footer

What I didn't mention is that we are already using the Winchester Responsive on 154 and are wanting to update to the latest 157. I'm not apposed to changing the general look going to a different template, but would like to keep the same features.

I guess I could just add them to the responsive default template?

Thanks

Like any template, upgrading it requires manually updating all the changes made to core Zen Cart files into all the files this template adds/overrides ... which in the case of this template is a lot.
And there are a few dozen "new" files this template adds that should be reviewed for PHP compatibility changes that are needed.
Probably also worth upgrading the 3rd party javascript scripts that it depends on. In some cases some of them are no longer maintained.

Yes, you could just build those same desired features onto the default responsive_classic template.
Or you could explore the ZCA Bootstrap 4 template for stronger mobile-friendliness and add any needed features to that.
ZCA Bootstrap Template

Those are some options to consider.

DrByte:

Yes, you could just build those same desired features onto the default responsive_classic template.
Or you could explore the ZCA Bootstrap 4 template for stronger mobile-friendliness and add any needed features to that.
ZCA Bootstrap Template

Those are some options to consider.

OK, so if I were to start from scratch, it sounds as if the ZCA Bootstrap 4 template would be a good starting point. Yes?

If I were to go in a different direction and purchase a modern premium ZC template, any recommendations?

kwright:

If I were to go in a different direction and purchase a modern premium ZC template, any recommendations?Most creators of such templates are actually porting them over from another use. In so doing, they more than likely use layouts and terminologies that do not match Zen Cart.

If you were not going to add ANY mod that affected the product pages for example, store bought might work for you.

However, most folks who do any mods wind up quitting the store bought in frustration. Yes, there are those who can "see" what's going on and work with the differences. Most folks cannot and wind up spending many extra dollars.

You can always open a thread asking for opinions on a cart you think might work for you but, most folks here will state the old "caveat emptor."

dbltoe:

Most creators of such templates are actually porting them over from another use. In so doing, they more than likely use layouts and terminologies that do not match Zen Cart.

If you were not going to add ANY mod that affected the product pages for example, store bought might work for you.

However, most folks who do any mods wind up quitting the store bought in frustration. Yes, there are those who can "see" what's going on and work with the differences. Most folks cannot and wind up spending many extra dollars.

You can always open a thread asking for opinions on a cart you think might work for you but, most folks here will state the old "caveat emptor."

Thanks for the input!

I seem to go through the same exercise every time I start on a new ZC project and always end up with using a template from the addons and mod as needed.

You're welcome. I actually used a TM template once. When I was done, I realized I paid them and still spent hours of my time making it work. Support is better here in the forum as well.

One thing I suggest is that you hold off the "purdy" to get sales going. Search engines can't "see" any images and most links to you from an SE go to a product. That means the customer may never see the "purdy" at all.

Less is more, content is king, selling is the object of the exercise.

I'm using ZCA Bootstrap 3.0.0 template with ZC 157b. On some screen widths , the "add to cart" quantity box on the product listing page goes partially off screen making it difficult or impossible to change the quantity from 0 to say 1. Any ideas on correcting this?
TIA,
Dave
zc157b php 7.3.21

Dave224:

I'm using ZCA Bootstrap 3.0.0 template with ZC 157b. On some screen widths , the "add to cart" quantity box on the product listing page goes partially off screen making it difficult or impossible to change the quantity from 0 to say 1. Any ideas on correcting this?
TIA,
Dave
zc157b php 7.3.21
Probably best to take that discussion to the other template's thread. https://www.zen-cart.com/showthread.php?223910-ZCA-Bootstrap-Template

I just installed the latest version of zen-crt.

When I install all the files of the Winchester Responsive template and select the right template, then everything looks ok. But as soon as I click on the reset button of the layout boxes controller, everything is messed up and mostly everything of the website disappears. What am I doing wrong?

This is the message that I receive before clicking on the layout boxes controller reset button:
WARNING: New boxes found: banner_box.php banner_box2.php banner_box_all.php best_sellers.php categories.php currencies.php document_categories.php ezpages.php ezpages_drop_menu.php featured.php information.php languages.php manufacturer_info.php manufacturers.php more_information.php music_genres.php order_history.php product_notifications.php record_companies.php reviews.php search.php search_header.php shopping_cart.php specials.php whats_new.php whos_online.php