X-Cart forums - Colorbox in 4.4.4

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Colorbox in 4.4.4 (https://forum.x-cart.com/showthread.php?t=61707)

Re: Colorbox in 4.4.4

Quote:

Originally Posted by cflsystems

I have no problem with this, with or without SpeedUp Tools colorbox files are loaded. But ... of course... I do not use conditions to load them so they load no matter what which may very well be the reason for colorbox not working for you with Speedup Tools enabled. There was similar issue with Flyout menus and cache so I would say this very well is the problem. Speedup Tools build the cache files once (every N hours per admin settings) and then use them so the cached files are not checked with every load for changes. I didn;t think about this when I posted the code above. I would suggest either don't use Speedup Tools or load colorbox files the regular way

<link css file />
<script.... />

That way they are not included in the cached files and will load with the conditional statement

Steve,

I did exactly this:

<link rel="stylesheet" type="text/css" href="{$SkinDir}/lib/colorbox/colorbox.css" />
<script type="text/javascript" src="{$SkinDir}/lib/colorbox/jquery.colorbox-min.js"></script>

and then turned js cache back on...
but colorbox does not load. Turning "Use speed-up tool for Javascript" OFF makes it work.
I put this code in service_head.tpl, and I also moved it to meta.tpl -- do changes.

speed-up tool for Javascript sounds way cooler than implemented. Time for bug tracker?

so i restored back to:
{load_defer file="lib/colorbox/colorbox.css" type="css"}
{load_defer file="lib/colorbox/jquery.colorbox-min.js" type="js"}
in service_head.tpl

and speed-up tool is off
and colorbox is working great.
probably a cache bug.

Re: Colorbox in 4.4.4

I'm gonna declare this a caching bug.

I've tried every conceivable way of calling colorbox, using 4 or more techniques.

Colorbox ALWAYS works as expected if "Use speed-up tool for Javascript" function is disabled.
Colorbox FAILS to load if "Use speed-up tool for Javascript" is checked.

I have done the following:

1. loaded the colorbox script in
/common_files/customer/service_head.tpl

Code:

{load_defer file="lib/colorbox/colorbox.css" type="css"}

{load_defer file="lib/colorbox/jquery.colorbox-min.js" type="js"}

2. loaded colorbox ONLY on product detail pages, by putting an if around the js call:

Code:

{* BEGIN added by JR for COLORBOX js load on product pages *}

{if $main eq "product"}

{load_defer file="lib/colorbox/colorbox.css" type="css"}

{load_defer file="lib/colorbox/jquery.colorbox-min.js" type="js"}

{literal}

<script>

            jQuery(document).ready(function () {

                $(".iframe").colorbox({iframe:true, width:"50%", height:"60%"});

            });

</script>

{/literal}

{/if}

{* END added by JR for COLORBOX js load on product pages *}

3. Tried putting it all into meta.tpl (no change)

4. Tried NOT using "load_defer" and simply used script/link code like the old days (tried this in service_head.tpl, meta.tpl, no change)

Code:

<script type="text/javascript" src="{$SkinDir}/lib/colorbox/jquery.colorbox-min.js"></script>

<link rel="stylesheet" type="text/css" href="{$SkinDir}/lib/colorbox/colorbox.css" />

No change.

5. I have manually deleted js and css cache from /var/cache

The bottom line: IF "Use speed-up tool for Javascript" function is disabled, colorbox will work, regardless of how we call it. If "Use speed-up tool for Javascript" function is enabled, colorbox will fail.

Either I am doing something dreadfully wrong, or there is something defective in this caching code.

Steve -- you mentioned

Quote:

There was similar issue with Flyout menus and cache so I would say this very well is the problem.

And I think you are on to something. I will share this with bugtracker.

Anyone else reading this using 4.4.x and adding js code -- PLEASE share your results!

Thanks,

J

Re: Colorbox in 4.4.4

You said calling

<link rel="stylesheet" type="text/css" href="{$SkinDir}/lib/colorbox/colorbox.css" />
<script type="text/javascript" src="{$SkinDir}/lib/colorbox/jquery.colorbox-min.js"></script>

will still not load it if js/css tool is on? This doesn't sound right. It should load just fine - these are direct calls and have nothing to do with cache. Have you tried putting it in home.tpl just before </head> and no ifs. Look in the sourse code if it's loaded, no matter if it works or not.
By the way if you are calling it from product_details.tpl there is no need for the if statement - that IS $main = product

Re: Colorbox in 4.4.4

Quote:

Originally Posted by cflsystems

Correct. NOT in 4.4.4 with "Use speed-up tool for Javascript" enabled.

Looks like there a some differences in how to call js in version 4.4

http://help.qtmsoft.com/index.php?title=X-Cart:CSS_and_JavaScript_optimization

Look at my followup on bugtracker:

https://bugtracker.qtmsoft.com/view.php?id=40610

SO -- for anyone reading, MY SOLUTION was to make a .js file for the <script> and not use inline <script> calls from templates - even with {literal} tags.

I placed my script link into common_files/customer/service_js.tpl
and it works with the speedup tool enabled.

HOWEVER - this is a script for the ENTIRE site.

This is not a solution for page-specific inline scripting.

I think there is more to learn about the new js implementation in version 4.4.4 -- I look forward to discovering it as needed...

But for now, my solution is to make js files and call them the same as other js files in common_files/customer/service_js.tpl

Anyone doing extensive work with 4.4.4 ? Let's share what we know about using js, since it's NOT the same as 4.3 and earlier.

Thx
J

Re: Colorbox in 4.4.4

Quote:

Originally Posted by carpeperdiem

HOWEVER - this is a script for the ENTIRE site.

That was my thought - I guess with Speedup Tools enabled the {if ...} is read the first time when cache is built and omited later as it does exists in the cache already.

There was similar cache problem for flyout menus icons - if cache is used the links are build once and later read from the cache resulting in security warning under https (links built with absolute urls). I reported this long time ago but don't think it is fixed in 4.4.4. So assuming same (or similar) issue goes here as well?

Re: Colorbox in 4.4.4

I might not be understanding what you are trying to do - but it seems the whole point of compressing and minifying javascript and css is to get as much of the site-wide css and js cached and loaded on the first page load, thus optimizing the experience of people moving about your site. So, the css and javacript in the optimized portion should be used on almost all pages, and any javascript or css that is big enough that you want it to be loaded only when someone hits certain pages should be handled outside the main optimized js and css. If you have css or js that you do not want loaded on the first page load, I don't think it goes in the main, optimized files. I don't think the design that QT is using for optimization is applicable to optimize for page specific css and js.

---

Re: Colorbox in 4.4.4

I am wrong in what I was speculating about the strategy/methodology QT uses for optimizing the javascript. I took a quick look at the cached optimized javascript and they do have different cached files for different pages. The cached files are greater than 4k lines - and only differ by a few lines of javascript they use for different types of pages. They do reload a big chuck of duplicate javascript for different types of pages. (Seems like when there are only a few lines different, it would be better to just load it all at once in one cached file.) So, I also don't know why what you are doing would not work. You should see your javascript in the cached file.

---