Bugs in EDGE version of 2.3.4-Responsive

[♥Tsimi]

I downloaded and installed the latest EDGE version today and there seems to be a problem with the grid/list switch function.

I have not modified the shop at all just installed, setup the modules and that's it.

With Firefox v40.0.3 when I go say DVD Movies -> Action and click in grid or list i get redirected to the start page. Then I do the same thing again and again for about 1-4 times and then suddenly it starts to work.

This does not happen in Chrome. I made sure that index.php is ticked inside the grid/list HT module.

I don't recall having that issue in the GOLD version, not sure though.

Is this some kinda cookies thing that takes one or two tries before it works?

 

[♥Tsimi]

Ok it seems to be a Firefox issue. Tested some other functions that use the href="#" and same there.

Here again, Chrome has no problems.

 

So case closed, let's move to other more important things. :D

[BrockleyJohn]

I don't think you should ignore it, it means the site doesn't work in firefox.

 

I've just applied a couple of months' worth of Edge changes to a client development store.

 

On firefox, most of the time JQuery doesn't load in time, so you get errors from bootstrap and all the other dependent functions like grid/list, equal heights, etc etc

 

The issue is also obvious but not quite as bad on maxthon, I've managed to get chrome to do it a couple of times, but couldn't reproduce on opera, ie or safari.

 

If you take the async attribute off the JQuery load, the problem goes away, but of course the page loads a bit slower.

 

I also created a new demo database against the same code base and on that store (with much less data) the problem is much less apparent. This is counter-intuitive to me.

[BrockleyJohn]

... and why isn't the JQuery stuff cached anyway??

[♥Tsimi]

@@BrockleyJohn

 

So you had similar issues as I had on Firefox?

I thought it is something that I had done but it doesn't seem to be that way.

Burt tried to find a better solution for the equal heights stuff and while testing his demo site I experienced similar problems in Firefox. And not always but sometimes with Chrome too.

My current live shop is build on a pre GOLD version before the whole GOLD and EDGE stuff was released and I don't use equal heights so I never mentioned such a problem before.

 

If it is an issue that might affect many users/shop owners then this should be looked at asap. And I am sure Burt does what he can....*ihope*

[douglaswalker]

I had issues if I used async on Jquery.

The top nav bar would not drop down shopping cart etc.

I got around it by moving Jquery to almost the bottom of the page but called before

bootstrap.js The problem went away.

 

i do not use gridview as it always bounced me back to index.

 

Doug :thumbsup:

 

should also say the problem was more apparent when switching to https

i guess jquery had to re-cache or something

[BrockleyJohn]

@@Tsimi if you turn on firebug you can check where it fails in firefox. On the site I've been updating just now, nothing worked, like for @@douglaswalker, so it needed dealing with.

 

Doug, I'm guessing you moved the JQuery load and took off the async, and also made sure any jquery scripts were loaded in the footer?

[douglaswalker]

@@BrockleyJohn

yes exactly

It was trial an error

<script src="ext/jquery/jquery-1.11.1.min.js"></script>

<script src="ext/bootstrap/js/bootstrap.min.js"></script>

like above and then the other bits and pieces ---- all the css is up top (developer tools complains about this being blocking but i don't know what to do about that...any  ideas appreciated)

[BrockleyJohn]

I just set up another new bootstrap installation and hit the same problem again with only the demo data... I didn't notice it until I'd enabled a fair few content modules and think it wasn't there from the beginning. I haven't got down the list to header tags yet so it's only got the default install there.

 

@@burt I think this definitely merits a problem report: the current edge version is at best unreliable on the latest Firefox (40) which often doesn't load jQuery in time with the async attribute.

[sargon2112]

I've seen this problem, too, mainly on Firefox, and it's been driving me nuts. It definitely seems the worst in Firefox. Grid/List View and the sort feature are such nice features that it would be a shame to just disable them.

[sargon2112]

I removed the "async" tag and left the reference where it was in template_top.php, and haven't seen the issue recur yet.

[Hotclutch]

Line 271 of checkout_confirmation.php - does the font awesome icon fa fa-ok exist? I replaced it with fa fa-check

[Guest]

Regarding the "async" issue.  If one spends time to understand the errors that occur, you will notice that most are due to a script being executed in <head>.   Most of these scripts could easily be relocated from header_tags to footer_scripts allowing jquery time to load.

 

This will allow Chrome to function properly, however, Async does break Firefox.

[Dan Cole]

@@marcello

 

Marcello did you move the scripts around?  I'm lazy and was wondering what seemed to work for you so those who are lazy, like me, could duplicate what you did. 

 

Dan

[Guest]

If we could solve how to launch bootstrap.min.js after Jquery loads......that would solve the issue.

[Guest]

@@Dan Cole

 

moving the scripts around to footer_scripts did resolve issues with Chrome; however, Firefox doesn't play as nicely.  (Error: Bootstrap's JavaScript requires jQuery)

 

It would be awesome if there were a consolidated js file to load jquery and bootstrap.min.js.  this would in essence eliminate the major error of bootstrap not loading which in turns breaks the site.

[Guest]

I realize this isn't a solution; however, I wanted to share what I just did that is allowing firefox to work properly.  (again, this is just because the script was delayed long enough for jquery to load, Not a long term solution)

 

I added async to bootstrap.min.js and shifted to load after

<?php echo $oscTemplate->getBlocks('footer_scripts'); ?>

Again, I just hacked at this and am now functioning under safari, firefox, and chrome.  If we can come together with the great minds on this forum, we can easily find a better solution.

 

PS - Firefox is sending warnings regarding many of the footer_scripts "ReferenceError: jQuery is not defined".  This is just proof that issue still remains.

[Guest]

HOLY SH!@  :o

 

I just had a novel idea.  Why do we launch jquery in template top in the first place.  As I mentioned before, if we place our scripts that require jquery to footer_scripts launch <script src="ext/jquery/jquery-1.11.1.min.js"></script> right above bootstrap and footer_scripts.  Walla.  No issues, much faster load times as well.  Google Insight no longer complains about above the fold.........come on now.....you gotta say this is too simple.

 

Well get your test boxes configured to this and let me know what everyone sees.

 

Also to address what Dan mentioned above. To find the scripts that need tweaking, kick off Firefox, check the console and identify what scripts are complaining about jquery or $ not defined.  Shift those to footer_scripts and you will have a fully functional site.

 

PS - this will break addons; however, with a few tweaks all sights can benefit

[BrockleyJohn]

I suspect that this might give you pages that appear and then wriggle about reformatting themselves like primary schoolkids lining up at the end of lunchtime... but I'm ready to be proved wrong

[♥bruyndoncx]

the async attribute indicates that the script can be loaded at any time, i.e. loading can be delayed while jquery needs to be loaded before other scripts.

I have used head.js to force loading, but that script is no longer maintained.

 

Modernizr is the most popular library and can do this kind of stuff

http://stackoverflow.com/questions/6673406/can-modernizr-load-scripts-asychronously-but-execute-them-in-order

 

but as marcello pointed out, adding jquery inline before footer scripts also does the trick without complicating your installation or adding other script libraries.

[Guest]

@@bruyndoncx - You are spot on regarding my approach.

 

My attempts here where to help address the async issue.  As I mentioned, there are some great minds on this forum and I am confident we can identify a solution that can improve the code

 

As jquery is now no longer above the fold, the page will load with basic html then afterward display as intended with bootstrap and jquery.   Do I like the way it looks for that fraction of a second, not really.  Does Google like this approach......not so sure; however, our efforts with async (or another method) do improve upon the G's pagespeed results. 

 

The only thing that comes to mind is if we were to identify the required parts to allow for the page to display properly above the fold then allow time for jquery and bs to load later. 

[BrockleyJohn]

I prefer to load stuff like jquery from the Google CDN on my live sites, combined with a fallback to local.

 

When I load jquery from the CDN, I can put the async attribute back on and the firefox problem goes away, because it loads faster anyway.

 

So template_top looks like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" async></script>

However, I've done some further experimenting and may have a solution if you want to load jquery locally (though I don't know why you would). The local fallback looks like this, and I would have put it straight after the above if it wasn't an async load.

<script>if (typeof jQuery === 'undefined') { 
  document.write(unescape('%3Cscript%20src%3D%22ext/jquery/jquery-1.11.1.min.js%22%3E%3C/script%3E')); 
}
</script>

I've just tried sticking that into template_bottom immediately before the bootstrap load and it also makes the problem go away - more testing please: see if just this change to template_bottom fixes it for you.

 

I thought it might try to load some of jquery twice and throw lots of errors, but it hasn't so far. Needs more browsers testing - only done FF & opera so far.

[♥John W]

Expanding on what @@BrockleyJohn said above, you can also use the bootstrap cdn to load bootstrap js like so

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

I use the bootstrap customizer so my css is customized but if you're using stock bootstrap css you can use their cdn for css also.

 

[burt]

It might be cool to make a header tag module to allow the shopowner to decide which CDN to pull from or to load locally?

[♥bruyndoncx]

It might be cool to make a header tag module to allow the shopowner to decide which CDN to pull from or to load locally?

I think that is a good idea, I had some issues with CDN in the past - still not sure what to do, to CDN or not to CDN ...