Colorbox in 4.4.4
 

Looking to use colorbox for static page popups from product detail pages in 4.4.4

-- I am NOT using the detailed images module for this store at this time.

Anyone have a good solution on calling colorbox and jquery as needed (for example, only on product detail pages -- to popup static html pages) ?

Steve, if you're reading this, I see you did the system messages popup mod -- but I am only looking to access colorbox.

I guess my question is NOT how to implement ( know where the colorbox js and css is living and I can easily make the html call) -- rather, I am wondering what others have discovered about how and when xcart 4.4.x calls the js code -- and do I need to reinvent any wheels here, or is there a secret way to get the jquery and colobox js loaded?

Thanks,

Jeremy

Re: Colorbox in 4.4.4
 

PS -- looks like xcart engineers have been busy -- this is really cool stuff:

X-Cart:CSS_and_JavaScript_optimization

Re: Colorbox in 4.4.4
 

Out of the box XC loads colorbox only if it is used for detailed images.

Open skin/common_files/customer/service_head.tpl (or the same in your custom skin) and just before


add

Adjust paths if needed. jQuery should be already added so no need to call it again.

Re: Colorbox in 4.4.4
 

Thanks, Steve.
I was doing exactly this -- was hoping there was a hidden switch somewhere! :-)
I am LOVING the js optimization features...

Seems like only calling colorbox for detailed images is limiting a creative design -- how cool would it be for an xcart module that manages how and when colorbox is called (static pages, cat pages, product details, etc...)

But yes, we can do this with an {if} too.

Thanks for the suggestion.

J

Re: Colorbox in 4.4.4
 

Frustrated...
Couldn't get colorbox to work at first - then I remembered the js caching pref (Use speed-up tool for Javascript) - so I disabled it, and everything worked as expected.

I read this help file document --

And I disabled the js and css speedup tools, ran cleanup.php as suggested, and yes, colorbox works great -- until I enable the js speedup pref.

yes, I added the code to htaccess as described.

"Use speed-up tool for Javascript" must be disabled in order for colorbox to work.

Bug/Defect, or operator error?

Here is the code I added to /common_files/customer/service_head.tpl


This is my first attempt at adding js or scripts to 4.4.4 -- so I must assume it's a caching issue.

What else could I be doing wrong here? Is there a better place for the js call? Colorbox docs suggest putting the script as close to </body> as possible, else use the jQuery(document).ready(function () { function. So that's what I did for simplicity.

Looks like 4.4.x is not the same as earlier versions when it comes to js and css caching. Anyone with a 4.4.x store with added js code, talk to me, please?

Thx
J

Re: Colorbox in 4.4.4
 

Xcart documentation incomplete:

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

Re: Colorbox in 4.4.4
 

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

Re: Colorbox in 4.4.4
 

ah... I will try that. thanks.
and set cache rebuild to 1 hr. see what happens after dinner.

I am loving the css editing in colorbox. so powerful.

Now I'm trying to figure out how to close the colorbox if you click a link within the iframe. for example - using colorbox for a FAQ -- and having a link to "contact us" -- I want colorbox to close, and the link to go to my contact us page. If I find the solution, I'll post it. It's right in front of my nose, but I'm missing something... hopefully in the next few minutes. :-)

Re: Colorbox in 4.4.4
 

Re: Colorbox in 4.4.4
 

Re: Colorbox in 4.4.4
 

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


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


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)


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

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
 

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.

---