Use Shadowbox to REPLACE dialog_message.tpl vers. 4.1.x

carpeperdiem · #1 03-26-2009, 12:25 PM

Mod title: Use Shadowbox to REPLACE dialog_message.tpl
for version 4.1.x
I tested this in 4.1.9, but it should be good in most 4.1.x installs

I really hate dialog_message.tpl. It's clunky, ugly, and unless you have a crazy color scheme or some other trick, the customer frequently will miss the message. And if the message is important, in my opinion, it should be front and center.

I use Shadowbox for many things on my site, including video, images, even iframe/html. Why Not use Shadowbox to replace dialog_message.tpl ?

It's easy.

A few things first:

1. You need to get Shadowbox functioning for your site. This can be tricky, and that is WAY beyond the scope of this mod or instructions. If you can't get Shadowbox working, this will not work for you. Before you do anything, visit Shadowbox's site and download and configure a basic install. We're going to make changes to it, but until you have a plain vanilla version working, don't proceed.

http://mjijackson.com/shadowbox/

2. Once Shadowbox is configured, our trick is to use the

Shadowbox.open(document.getElementById('startEleme nt'));

class in the shadowbox header js -- then we use an <a rel=shadwobox, etc... with a ref to a HIDDEN <div> that has a NESTED <div> inside it... sounds way more complicated than it is.

SO -- STEP 1:
Create a Shadowbox INCLUDE file. You're going to need 2 of these: one for "normal" Shadowbox functions and uses, and one for the dialog_messages. Here is the include that I made for the dialog_messages:

filename: /skin1/shadowbox_include-dialogmessage.tpl

Code:

{literal}
<script type="text/javascript" src="/shadowbox/adapter/shadowbox-base.js"></script>
<script type="text/javascript" src="/shadowbox/shadowbox.js"></script>
<script type="text/javascript" src="/shadowbox/shadowbox_open.js"></script>
{/literal}

Check out my paths... yes, I made a shadowbox directory at the root, and all shadowbox js lives there.

You will put your shadowbox-base (or whatever you use as a base) and the shadwobox.js there. You will also create this file, which is the 3rd part of a shadowbox install (and you will actually have a 4th file that you'll use for "normal" shadowbox operations as well):

file name: /shadowbox/shadowbox_open.js

Code:

Shadowbox.loadSkin('classic', '/shadowbox/skin');
Shadowbox.loadLanguage('en', '/shadowbox/lang');
Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], '/shadowbox/player');

window.onload = function(){

    Shadowbox.init();
    Shadowbox.open(document.getElementById('startElement')); 
};

(Please be VERY careful when copyng js code from browsers -- in your text editor, view invisible characters, just to be certain strange characters didn't get in there...)

OK -- now it's time to make the replacement for dialog_message.tpl. I am calling it: message_dialog.tpl - Put it in skin1

Code:

{if $top_message.content ne "" or $alt_content ne ""}
{if $top_message.type eq "E"}
{assign var="log_icon" value="log_type_Error.gif"}
{assign var="log_title" value=$lng.lbl_error}
{elseif $top_message.type eq "W"}
{assign var="log_icon" value="log_type_Warning.gif"}
{assign var="log_title" value=$lng.lbl_warning}
{else}
{assign var="log_icon" value="log_type_Information.gif"}
{assign var="log_title" value=$lng.lbl_information}
{/if}
{if $alt_content ne ""}
{assign var="log_icon" value="log_type_Warning.gif"}
{assign var="log_title" value=$title}
{/if}
{/if}


<a id='startElement' href='#errordialog' rel='shadowbox; width=400;height=100' title='{$log_title}'></a>
<div style="height: 1px; visibility:hidden;" id='errordialog' >
<div style="border: 2px solid #999999; width: 388px; height: 88px; padding: 4px; background-color: #FFFFFF; ">

<img src="{$ImagesDir}/{$log_icon}" class="DialogInfoIcon" alt="" />&nbsp;<em>{$log_title}</em><br /><br />

{if $alt_content ne ""}{$alt_content}
{else}{$top_message.content}
{/if}

</div>
</div>

note: PLEASE make the div your own. Pretty it up, change the colors, etc... it's very boring right now.

Almost home...

Now, in home.tpl, we need to LOAD Shadowbox in the <head> before anything else happens, and also trap for some ifs. Then in the body, we put the tricky stuff:

Put the shadowbox_include file immediatle after the <head> or as close to the top as you can get it.

Code:

<head>
{* SHADOWBOX INCLUDE *}
{if $top_message.content ne "" or $alt_content ne ""}
{include file="shadowbox_include-dialogmessage.tpl" }
{else}
{include file="shadowbox_include.tpl" } {* this is my default shadowbox include file *}
{/if}
{* END-SHADOWBOX INCLUDE *}

Now, find {include file="dialog_message.tpl"} -- comment it out

add this:

Code:

{if $top_message.content ne "" or $alt_content ne ""}
{include file="message_dialog.tpl" }
{/if}

See what's happening here?

You're done.

THIS ONLY REPRESENTS THE BASICS and with some reading of the Shadowox help files and forum, you can do some pretty sick stuff... change opacity, change animation, etc...

I also left out some vars from the original dialog_message.tpl, such as: <a href="#{$top_message.anchor}">{$lng.lbl_go_to_last _edit_section}, and the whole "close box" code. No worries about the close box, Shadowbox does that for you... but not sure this will work for EVERY situation. I tested it for INFORMATION and ERROR and WARNING. Let's see if anyone can break this???

Edit the <div> in message_dialog.tpl to make this your own.

If you have any sugggestions or comments, please, let's make this mod as good as it can be.

Finally, I'm gonna slap the first person who asks if this will work in 4.2. a) I don't know. b) it could, since it's just a nested div, c) why not try it out for yourself? d) don't know if the variables from 4.1.x survived the migration to 4.2

I hope someone benefits from this. Please PM me with a link to your store. I'd like to see what you came up with.

Jeremy

ARW VISIONS · #2 03-26-2009, 09:38 PM

very nifty.

geckoday · #3 03-27-2009, 08:15 AM

Nice idea Jeremy. Thanks for sharing it.

parekh81 · #4 04-22-2009, 04:03 PM

any idea if this can work in 4.2?

(i don't have a test store .... so some insight would be great before I break my just-about-stable cart)

carpeperdiem · #5 04-22-2009, 04:09 PM

Quote:

Originally Posted by parekh81

(i don't have a test store...

You are permitted to install a test store into a test directory -- and you should.

In fact, if you do anything to your live store while it's running, you are asking for trouble.

The way I tested the shadowbox integration is:

1) get shadowbox working on a plain html page (totally unrelated to xcart)
2) learn how to configure shadowbox on the plain html page
3) the rest is pretty simply smarty stuff.

But you really should install a test store -- don't do a subdomain, as you may have copy protection issues... and whatever you do, BLOCK ALL ACCESS to it from anyone besides your IP. Use htaccess.

PS -- didn't I say I was going to slap the first person who asked if this was compatible with 4.2?

Jayk · #6 04-22-2009, 07:46 PM

You're not kidding when you say it can by tricky to get the initial setup. I've been playing with Shadowbox for a few hours today and it can definitely be touchy. There's a lot of potential there though and it's pretty slick once you get it going.

Jason

Jayk · #7 04-24-2009, 09:15 AM

The setup and initialisation for Shadowbox version 3.0b (available on the new Shadowbox web site: http://www.shadowbox-js.com/ ) has changed quite a bit from version 2. I worked from Jeremy's code here to get it going on my site. If anyone wants the modifications to make it work on version 3, let me know and I'll post them.

Cheers,
Jason

parekh81 · #8 04-24-2009, 09:19 AM

I would really appreciate if you could post the modifications please.

thanks

Jayk · #9 04-24-2009, 09:26 AM

Quote:

Originally Posted by parekh81

I would really appreciate if you could post the modifications please.

thanks

Sure, I'll work on documenting it out this afternoon. Maybe I'll start a new thread to keep the Shadowbox versions separate: less confusion for people between the two unless you guys think I should post in the same thread.

Jason

parekh81 · #10 04-24-2009, 09:32 AM

Yes, i think its better if you start a separate thread in 'completed custom mods', should help everyone else