Creating Popups

[customk1]

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:

<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]

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

Kind regards

Philip

[philip56]

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]

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!)

<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>

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]

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

[customk1]

I assume it doesn't matter where I put the pop up files

if by this you mean the jscript files... you MUST put them in the jscript folder...

if you mean does it matter where you put the code that has the link and the "=rel console ....." no, you can put that most anywhere...

Also by {template_directory} do you mean my custom template

YES! that is correct! :)

[philip56]

if by this you mean the jscript files... you MUST put them in the jscript folder...

if you mean does it matter where you put the code that has the link and the "=rel console ....." no, you can put that most anywhere...


YES! that is correct! :)

Excellent, thanks very much. Yep, by popup files I mean the actual content of the popup.

I'll keep you posted!!

All the best

Philip

[r€nato]

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:

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:

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".