X-Cart forums

[carpeperdiem]

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

[carpeperdiem]

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

X-Cart:CSS_and_JavaScript_optimization

[cflsystems]

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

 
{load_defer_code type="css"}
{load_defer_code type="js"}

add

 
{if $main eq "product"}
{load_defer file="lib/colorbox/colorbox.css" type="css"}
{load_defer file="lib/colorbox/jquery.colorbox-min.js" type="js"}
{/if}

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

[carpeperdiem]

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

[carpeperdiem]

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

{* 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 *}

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

[carpeperdiem]

Xcart documentation incomplete:

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

[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

[carpeperdiem]

I do not use conditions to load them

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.

[carpeperdiem]

http://groups.google.com/group/colorbox/browse_thread/thread/e0deefea1833dc4e#

[carpeperdiem]

<a href="/help.php?section=contactus" onclick="parent.location.href=this.href; return false;">Please Contact Us</a>