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="" /> <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