Accessible popup windows

From Zen Cart(tm) Wiki
Jump to: navigation, search


Zen Cart™ 1.3 produces JavaScript-only pop-up window links. Anyone without JavaScript (many workplaces for example ban JavaScript, and search engines don't follow JavaScript links) will be unable to access these pages. In addition, because the link destination is set to an action (a JavaScript function), rather than to its actual destination this annoys users (for example you don't see the URL in the browser status bar, and you can't right-click on the link and open it in a new browser tab, or copy the shortcut). The current code is something like this:

<a href="javascript:session_win();">[help (?)]</a>

or this:

<a href="javascript:popupWindow('index.php?main_page=popup_search_help')">Search Help [?]</a>

when we should be using something like this:

<a href="index.php?main_page=popup_search_help" 
   onclick="popupWindow(this.href); return false">open pop-up</a>

if we want XHTML Strict compliance or this:

<a href="index.php?main_page=popup_search_help" target="_new" 
   onclick="popupWindow(this.href); return false">open pop-up</a>

if we want to open a new browser window using HTML and don't mind if we don't validate. The return false bit means that if JavaScript is present the custom-sized pop-up window without the browser toolbars is spawned, but the standard HTML link is not followed. If JavaScript is not present then the standard HTML link is followed.


Editing the Zen Cart™ code

template file changes

For some of the pop-up links, it is as simple as replacing one line in a template file. In this case, I am editing includes/templates/MY_TEMPLATE/templates/tpl_advanced_search_default.php:

<div class="forward"><?php echo '<a href="javascript:popupWindow(\'' 
     . zen_href_link(FILENAME_POPUP_SEARCH_HELP) . '\')">' . TEXT_SEARCH_HELP_LINK . '</a>'; ?></div> 


<div class="forward"><?php echo '<a href="' . zen_href_link(FILENAME_POPUP_SEARCH_HELP) . '" 
   onclick="popupWindow(this.href); return false">' . TEXT_SEARCH_HELP_LINK . '</a>'; ?></div> 

This correctly produces the accessible pop-up link in the advanced search page. The shipping estimator button in the shopping cart is similar.

tpl_shopping_cart_default.php - replace:

<div class="forward"><?php echo '<a href="javascript:popupWindow(\'' 
     . zen_href_link(FILENAME_POPUP_SHIPPING_ESTIMATOR) . '\')">' 


<div class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_POPUP_SHIPPING_ESTIMATOR) 
     . '" onclick="popupWindow(this.href); return false">' 

as is the pop-up image code in the product_info page.

tpl_modules_main_product_image.php - replace:

<div id="productMainImage" class="centeredContent back">
 <script language="javascript" type="text/javascript"><!--
 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>'; ?>');
  echo '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) 
     . '" target="_blank">' . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) 
     . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>';


<div id="productMainImage" class="centeredContent back">
 <?php echo '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) 
     . '" target="_blank"  onclick="popupWindow(this.href); return false">' 
     . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) 
     . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>';

There is another one in tpl_modules_attributes.php I haven't done yet.

language file changes

The code for two other pop-ups can be found in the language files. Another simple change.

shopping_cart.php - Remember to edit includes/languages/MY_LANGUAGE/MY_TEMPLATE/shopping_cart.php change:

define('TEXT_VISITORS_CART', '<a href="javascript:session_win();">[help (?)]</a>');


define('TEXT_VISITORS_CART', '<a href="index.php?main_page=info_shopping_cart" 
    onclick="session_win(); return false">[help (?)]</a>');

login.php is the same, change:

define('TEXT_VISITORS_CART', 'The contents of your temporary "Visitors Cart" will be added to the contents of 
    your saved "Members Cart" once you have logged on. <a href="javascript:session_win();">[More Info]</a>');


define('TEXT_VISITORS_CART', 'The contents of your temporary "Visitors Cart" will be added to the contents of 
    your saved "Members Cart" once you have logged on. <a href="index.php?main_page=info_shopping_cart" 
    onclick="session_win(); return false">[More Info]</a>');

module language file changes

In includes/languages/MY_LANGUAGE/modules/payment/MY_TEMPLATE/cc.php change:

 define('MODULE_PAYMENT_CC_TEXT_CREDIT_CARD_CVV', 'CVV Number (<a href="javascript:popupWindow(\ 
    . zen_href_link(FILENAME_POPUP_CVV_HELP) . '\')">' . 'More Info' . '</a>)');


 define('MODULE_PAYMENT_CC_TEXT_CREDIT_CARD_CVV', 'CVV Number (<a href="' 
    . zen_href_link(FILENAME_POPUP_CVV_HELP) . '" onclick="popupWindow(this.href); return false">More Info</a>)');

exactly the same one is in authorizenet_aim.php as well.

additional_images.php is the only difficult one. I'll leave someone else to attempt that one.