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

Jayk · #1 04-24-2009, 11:29 AM

This is an expansion on Jeremy's most excellent post which can be found here:

http://forum.x-cart.com/showthread.php?t=46571

I've reused a lot of his content as I'm not looking to reinvent the wheel here, just to get it working with the newer version of Shadowbox.

The setup and initialisation for Shadowbox version 3.0b has changed quite a bit from version 2. Here's what I did on my site to replace the clunkiness of dialog_message.tpl with Shadowbox 3.0b.

As Jeremy said, 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://www.shadowbox-js.com/

We will use the same methodology as in Jeremy's post of using 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 complicated, but just hang in there...)

The main difference is calling Shadowbox. Shadowbox 3 has simplified the process somewhat.

Here we go...

Create a file named: /shadowbox/shadowbox_open.js (this assumes that you have shadowbox installed in its own shadowbox directory in the root of your site)

This one is stripped down from Jeremy's version as we'll initialise some of the other items in a later step.

Code:

window.onload = function(){

    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: dialog_message-shadowbox.tpl - Put it in skin1 (I like to name mine close to the original so it sits next to it in a directory listing)

I left this one the same as Jeremy's version (except for the file name). It's up to you to customise the look and feel to make the <div> your own.

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>

We're almost there.

In /skin1/customer/home.tpl we need to call Shadowbox in the <head>. Jeremy suggests putting it immediately after the opening <head> tag. Mine is just before the closing tag. I'm not sure how much it matters.

Note: Shadowbox will try to detect the adapter that you are using as long as you call it before you call Shadowbox. I use jQuery and have it located in /skin1/js as you will see below. Shadowbox supports a number javascript frameworks including:

Prototype
jQuery
MooTools
Dojo Toolkit
Yahoo! User Interface Library
Ext

See the Shadowbox site for more details.

Here's the code to add within the <head> section of /skin1/customer/home.tpl

Code:

<script type="text/javascript" src="{$SkinDir}/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/shadowbox/shadowbox.js"></script>
{if $top_message.content ne "" or $alt_content ne ""}
<script type="text/javascript" src="/shadowbox/shadowbox_open.js"></script>
{/if}
{literal}
<script type="text/javascript">
Shadowbox.init({
	players: ['img', 'swf', 'flv', 'iframe', 'html']
	});
</script>
{/literal}

NOTE: I edited the above slightly since I first posted this, wrapping the shadowbox_open.js line in an if statement. This prevents an "Error on page" notice from showing up in the status bar at the bottom of Internet Explorer with an Object required error.

Remember: I use jQuery. If you use a different javascript framework, or you have it in a different place, modify the call appropriately.

You also need to call the shadowbox css file (again, in the <head> section):

Code:

<link rel="stylesheet" href="/shadowbox/shadowbox.css" />

Also, in the same home.tpl file, find {include file="dialog_message.tpl"} -- comment it out.

Add this:

Code:

{* Shadowbox dialog message support Begin *}
{if $top_message.content ne "" or $alt_content ne ""}
{include file="dialog_message-shadowbox.tpl" }
{/if}
{* Shadowbox dialog message support End *}

Another note: If you use Fast Lane Checkout, you will need to make the same home.tpl modifications in /skin1/modules/Fast_Lane_Checkout/home.tpl

That should be it. A great big thank you

goes out to Jeremy for his original Shadowbox post on replacing dialog_message.tpl. I couldn't have done this with Shadowbox version 3.0b without his original post to work from.

Jason

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search



	X-Cart forums © 2001-2020