Creating Popups

**philip56** · 30 Mar 2009, 08:11 PM

Originally Posted by customk1

might have a good answer for us "javascript challenged" folks..

i got it from this post: " I want to add a popup window code in zencart "

and ultimately this website:
http://accessify.com/features/tutori...perfect-popup/

so, heres the basic rundown...

1. go to this site
2. get completely overwhelmed by trying to read it
3. realize at the very bottom of the page there is a link to create the code for you
4. give a big sigh of relief
5. key in the info you need on the link generator page
6. copy the generated javascript to the top of the page you are trying to make the link on (for me it was: includes/templates/darkness/common/tpl_footer.php)
7. NOTE: YOU HAVE TO ADD THIS TO THE GENERATED JAVASCRIPT CODE:
before it, add:
<html>
<head>
<script type="text/javascript">

and after it, add:
</script>
</head>

8. Use the html created from the generator page, and paste it elsewhere on your page, where you actually want the link to be located.

ALTERNATIVELY:
if you do not want all that javascript code on your page, you can download the add_event.js and popup.js scripts and add them somewhere on your server, then at the top of the page where you want to use the code, simply call these two scripts using:

<script type="text/javascript" src="/path-to/add-event.js"></script>
<script type="text/javascript" src="/path-to/popup.js"></script>

change the "path-to" to route to where you actually put the add_event.js and popup.js scripts that you downloaded

I HOPE THIS HELPS!!

Wow!!

Well done for discovering that lot. I can't wait to try it.

I googled javascript forums and the ones I looked at didn't appear very active.

Regards

Philip

**customk1** · 30 Mar 2009, 08:16 PM

hope it helps... def. the blind leading the blind.. hahaha!

shoot me a line if you have any problems, i have sucessfully used it on 4 diff. links now, with 100% success...

note also, that on the html link that the generator provides for you, it will pre-populate the dimensions of the popup window (if you asked it to). i started with 800x600... but after putting it into my code, some of the pages are wider than that. dont be afraid to change these numbers, and this is the ONLY place you have to make that change... for example, i changed one to 975 700 and it just makes the popup window a little bigger.

horah!

**customk1** · 6 Apr 2009, 07:53 PM

ahhh... yes.. i remember the fix now... was making it tooooo complicated.

disregard the instruction above, and do it this way instead:
1. undo what i told you to do originally

2. go to your original zen-cart download folder, to the "docs" folder and read the "JScript Override How-To" (who knew there were these great files right here in the folder???)

for quick reference, here is what that says:

Site-Wide jscript's
jscript*.js files -- to be "linked" by your site

Any file in the includes/templates/{template_directory}/jscript/ directory with the following filename format will be loaded globally on every page of your shop:
jscript_{unique_name}.js
(where {unique_name} can be anything you want)

Effectively, the file will be loaded as if you had inserted the following into an HTML page:

<script language="javascript" src="includes/templates/{template_directory}/jscript/jscript_{unique_name}.js"></script>
jscript*.php files -- to be "included" in your HTML content sent to the browser, inline.

If you need to control the content of certain PHP variables inside jscript code on the page, OR if you need to include several <script>...</script> tags, use a jscript_*.php file instead.
However, in this case, you DO need to include the <script .... > and </script> tags in the file.

Page-Specific jscript's

For page-specific operation, put the file under the /includes/modules/pages/{pagename}/ folder.
jscript*.js files -- to be "linked" by your site

NOTE: jscript_*.js files must not contain any <script...> .... </script> tags. They should contain ONLY the contents that are to go "between" those tags.
jscript*.php files -- to be "included" in your HTML content sent to the browser, inline.

If you need to control the content of certain PHP variables inside jscript code on the page, use a jscript_*.php file.
However, in this case, you DO need to include the <script .... > and </script> tags in the file.

so, to apply this instruction to our situation:
1. download and rename the two script files you can get off that website to:
jscript_add-event.js and jscript_popup.js

2. place them in the correct folder, as described above

3.code your links in the footer (or wherever) as described in that website, should be something like this:

Code:

<ul id="bottomMenuStyle">
<li><a href="http://www.hsus.org" rel="popup console 820 700
 noicon"><img src="http://www.customk9design.com/catalogzen
/includes/templates/darkness/images/humanesociety.gif" 
alt="Humane Society" width="290" height="55"/></a></li>



<li><a href="http://www.mozilla.com/en-US/firefox/organic
/?from=sfx&uid=0&t=353570" rel="popup console 950 700 
noicon"><img src="http://www.customk9design.com/catalogzen
/includes/templates/darkness/images
/organicfirefox.jpg"width="115" height="55" border="0"/>
</a></li>
</ul>

note the following:
1. create a ul, and list your items
2. should have a href to site, then that "rel=" code... you can change the dimensions from what the site creates originally (i started with 800x600 then modified based on the link)
3. i have mine linked to an image (this is optional)
4. if not linking to an image, just have your text here:
rel="popup console 950 700 noicon">CLICK HERE FOR BLAH</a></li>

because of how zen cart is set up, it should auto call those jscripts as long as you name them correctly and put them in the correct folder as described above. you DO NOT need to input any code at the top of the page, or anything like that.

TOO EASY!!!

**philip56** · 6 Apr 2009, 08:04 PM

Thank you VERY much for this. I didn't know about these files.

Kind regards

Philip

**philip56** · 12 Apr 2009, 04:32 PM

Hello again.

I know you said this was easy, but I still can't get my popups to work correctly!! As you may remember, I'm trying to place some links on the home page (define_main_page) to some explanatory popups.

So, this is what I've done:

Downloaded jscript_add-event.js and jscript_popup.js and placed them in /includes/modules/pages/define_main_page/

Installed one popup in includes/templates/my_template/main_page_info

Added the following two lines to it.

<script type="text/javascript" src="http://localhost/mainwebsite/includes/modules/pages/define_main_page/jscript_add-event.js"></script>
<script type="text/javascript" src="http://localhost/mainwebsite/includes/modules/pages/define_main_page/jscript_popup.js"></script>

Added the following into define_main_page.php

<ul id="mainPageInfo"><li><a href="http://localhost/mainwebsite/includes/templates/apple_zen/main_page_info/ex-chainstore.html">rel="popup console 800 600 noicon" What is ex-chainstore clothing? </a></li></ul>

I still get the popup opening full size in the current tab.

Go on, tell me I'm doing something really stupid, I don't mind!

Regards

Philip

**customk1** · 13 Apr 2009, 03:01 PM

phillip,
you're still making it too complicated! :)

i think you're getting confused by trying to combine directions from the perfect popup website, and zencart.

just follow my directions that i posted as my last post, namely:

1. DONT put the files in your "main_page" folder, follow the zencart directions here:

Any file in the includes/templates/{template_directory}/jscript/ directory with the following filename format will be loaded globally on every page of your shop:
jscript_{unique_name}.js
(where {unique_name} can be anything you want)

which means, change the two file names from:
add-event.js
popup.js

to:
jscript_add-event.js
jscript_popup.js

and add them to your "includes/templates/{template_directory}/jscript/ " folder

2. DONT use this on any page: (delete it!)

it is not needed!

3. what you wrote as code for the actual link should be correct! just need to put the jscript files in the correct location, and disregard the code you put at the top of the page.

let me know how it goes!

**philip56** · 13 Apr 2009, 03:23 PM

Thanks for that.

Sorry - I was going round and round in circles yesterday!!

I assume it doesn't matter where I put the pop up files, as long as I reference them correctly on define_home_page.

Also by {template_directory} do you mean my custom template?

Philip

**r€nato** · 28 Jul 2009, 02:45 AM

Originally Posted by customk1

phillip,
you're still making it too complicated! :)

i think you're getting confused by trying to combine directions from the perfect popup website, and zencart.

just follow my directions that i posted as my last post, namely:

1. DONT put the files in your "main_page" folder, follow the zencart directions here:

which means, change the two file names from:
add-event.js
popup.js

to:
jscript_add-event.js
jscript_popup.js

and add them to your "includes/templates/{template_directory}/jscript/ " folder

2. DONT use this on any page: (delete it!)

it is not needed!

3. what you wrote as code for the actual link should be correct! just need to put the jscript files in the correct location, and disregard the code you put at the top of the page.

let me know how it goes!

This is all correct... but you must also add a custom "tpl_modules_main_product_image.php" file in your custom template directory, so that the anchor link for the product image generates the popup.

Replace the following line:

Code:

document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '\\\')">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>'; ?>');

with this line:

Code:

document.write('<?php echo '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '" rel="popup">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>'; ?>');

you may also fix the anchor link between the <noscript> tags, just add rel="popup" after target="_blank".

Thread: Creating Popups

Thread Tools

Search Thread

Display

Hybrid View

Re: Creating Popups

Re: Creating Popups

Re: Creating Popups

Re: Creating Popups

Re: Creating Popups

Re: Creating Popups

Re: Creating Popups

Re: Creating Popups

Similar Threads

disable popups

Popups

create popups

Posting Permissions