Contact Message in Popup

[mazhar]

This customization makes use of GreyBox script. First you need to install the files, extract attachment and place the files in very same order in your store. The next job is to make your site aware of GreyBox script and enable some variables for GreyBox to work properly. For example in this example I am putting a Drop Comment link on product details page, which will popup contact page. This means that I need to edit product details scriptlet and make that page aware of script.

Edit the Show Product 1 scriptlet and append following code in its start.

Code: Select all

<script type="text/javascript">
    var GB_ROOT_DIR = "{your store URL}/greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />

Where {your store URL} means the complete URL of your store. For example if my store URL is http://www.ablecommerce.com then it would be

Code: Select all

var GB_ROOT_DIR = "http://www.ablecommerce.com/greybox/";

Next job is to put a hyperlink that will open the popup page. and that would be as below

Code: Select all

<a  href="~/ContactBox.aspx" title="Drop Comment" rel="gb_page_center[500, 470]">(Drop Comment)</a>

For example I placed this link very next to name of product on product details page as you can view in screen capture. I am talking about the Drop Comment link in gray color. If you can do a similar thing by just locating following line of code in your Show Product 1 scriptlet

Code: Select all

<h1>$Product.Name</h1>

and replacing it with

Code: Select all

<h1>$Product.Name&nbsp;&nbsp;<a style="color:#CCCCCC" href="~/ContactBox.aspx" title="Drop Comment" rel="gb_page_center[500, 470]">(Drop Comment)</a></h1>

[sdlong02]

I implemented this mod but when I click the link it opens the page in the same window, I pretty much copied word for word all of the script and links provided, what else could be wrong?

[mazhar]

its working for me make sure that you have specified your domain name in following location

Code: Select all

var GB_ROOT_DIR = "{your store URL}/greybox/";

For example if your website link is htt://yourdomain.com the make above par look like

Code: Select all

var GB_ROOT_DIR = "htt://yourdomain.com/greybox/";

For example check the Show Product 1 template that worked for me

[sdlong02]

I do have the URL set for that line.

Code: Select all

var GB_ROOT_DIR = http://www.URL.com/greybox/";

This is the direct link I see the link leading to

Code: Select all

<a  href="/ContactBox.aspx" title="Contact Us" rel="gb_page_center[500, 470]">Contact Us</a>

However when I click the link it opens the ContactBox.aspx in the same window, aligned to the top left corner.

If you want to take a look at what I mean, the link is located at http://www.URL.com/contactus.aspx using the "Contact Us" text in the content of the page, not the sidebar.

[sdlong02]

Ok I see after looking at my own post that I didn't have the beginning " for the URL. Thanks for the help Mazhar

[fatone]

I tried this on my website, but the popup gets hidden behind my header (which is a flash swf file). How do I get the popup to show in the front? I imagine this has something to do with the CSS and the stylsheet I am using.

[mazhar]

sounds like you may need to try some tricks with z-index property of some related element.

[igavemybest]

So, the problem appears when you open GreyBox and your Flash object appears above the pop up.
There is a simple solution to your problem!

Place the following code in your object parameters:

<param name=”wmode” value=”transparent”></param>

Also add this code to <embed> tag:

wmode=”transparent”

That’s it! Flash should now be hidden under GreyBox with the rest of the page.

___________

You put the code in object tags, it should look like this:

< object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shoc ... n=7,0,19,0" width="551" height="136" border="0">

< param name="movie" value="file_name.swf" />
< param name="quality" value="high" />
< param name="wmode" value="transparent">

< embed src="file_name.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="551" height="136" wmode="transparent">< /embed>< /object>

[jmestep]

Mazhar,
Is there a reason for using this instead of the ajax toolkit modal popup extender? I snagged that out of the one page checkout TOC section, but I'm having a little trouble with the action. I was trying to go with a way that would be easier to distribute rather than several files.

[mazhar]

Of course you can, there is no specific reason to make use of this control. I found this and thought may be helpful to some one so I posted thread for it. You can make use of AJAX modal popup, in fact in an other thread I have already posted something similar for product tell a friend control on popup. Read following thread as well
viewtopic.php?f=47&t=9987

[jmestep]

Thanks for that link. I thought I had seen it somewhere on the forum, but couldn't find it.

[igavemybest]

We have an asp.net greybox extender for sale if you want to purchase it. http://www.safetekusa.com/shopping/Prod ... egoryId=80

It doesnt meet the minimum order, so you have to email sales at sales@safetekusa.com