CSS-OSCommerce

Add a JQuery Lightbox to the OSCommerce OSC to CSSv2 product listings.

1. Add a extra field the products table in the database.
   
   ALTER TABLE `products` ADD `products_image_large` VARCHAR( 64 ) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL AFTER `products_image_list`

2. Make two sets of all your product images.
   One set should be about 100px by 100px, and another set about 300px by 300px. You probably already have a set of small images in the field products.products_image. Then using phpMyAdmin or similar enter the references to the large images into the new field, p.products_image_large.
   
   
   
   
3. Upoad all images to the catalog/images folder.
   
4. Add these references to the head of catalog/index.php. In OSC to CSS this will be just above the references to template_top.php.
   
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<!--pretty photo-->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed: 'normal',
padding: 30,
opacity: 0.5,
showTitle: true,
allowresize: true,
counter_separator_label: '/',
theme: 'light_rounded',
hideflash: false,
wmode: 'opaque',
autoplay: true,
modal: false,
changepicturecallback: function(){},
callback: function(){}
});
});
</script>


   note: if you are already using JQuery you will not need to add the reference to the main JQuery file.

5. go to Pretty Photo and down load the pretty photo package. Extract the files and upload three files and one folder to your site in the following structure:
   • js/jquery.js
   • js/jquery.prettyPhoto.js
   • css/prettyPhoto.css
   • images/prettyPhoto

6. Open catalog index.php
   change:
   
case 'PRODUCT_LIST_IMAGE':
$select_column_list .= 'p.products_image,';
break;


   to:
   

   case 'PRODUCT_LIST_IMAGE':
   // add large image field to query
   $select_column_list .= 'p.products_image, p.products_image_large,';
   break;

   This adds the new field holding the references to your large images to the existing query in index.php
   

7. Open includes/modules/product_listings.php
   change
   
   $lc_text = '&nbsp;<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>&nbsp;';

   to
   
$lc_text = '<a rel="prettyPhoto" title="'.$listing['products_name'].'" href="' . tep_href_link(DIR_WS_IMAGES . $listing['products_image_large'], $listing['products_name']) . '" >' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '<br/><span class="small">(click to enlarge)</span></a>';


8. To add the lightbox to the new products module, open includes/module/new_products.php
   change:
   
<div class="pl-image"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $new_products['products_image_list'], $new_products['products_name']) . '</a></div>


   to:
   
<div class="pl-image"><a rel="prettyPhoto" title="'.$new_products['products_name'].'" href="' . tep_href_link(DIR_WS_IMAGES . $new_products['products_image_extra'], $new_products['products_name']) . '" >' . tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '<br/><span class="small">(click to enlarge)</span></a></div>



The menu functions exactly as the menu in the categories box, except horizontal. The menu will function in pure CSS or with smooth JQuery functioning. Download from OSCommerce.

The dropdown subcategory links produce a shadow effect.

Demo

Adapted from:

Category Box as Nested Unordered List for EZ(er) CSS & Dynamic menus

and

Superfish Jquery Menu plugin

JQuery Forms Validation for OSCommerce allows users to recieve error messages ‘on the fly’ as they fill out forms on OSCommerce, without having to wait for page submit and refresh. In addition the error message appears on the field that is incorrectly filled out. Jquery provides unique messages for simple text forms, login, password and email forms. This replaces the older original OSCommerce javascript popup messages, but works alongside and in conjunction with the OSCommerce php messagestack-> function.

adapted from: Bassistance:Jquery Validation Plugin

See screenshots below:

Installation

1) Upload these files to the folder catalog/js on your website:
jquery.login.js

jquery.validate.js

jquery.js or jquery.min.4.2.js
(note:If you are already using Jquery on your site, you probably already have one of these two files installed. Only one is needed.)

-Links to the files jquery.validate.js and jquery.js can be found on the Bassistance site -

---

2) Place these references in the head of the catalog page that contains the form to validate. For example, login.php and account_password.php. If you are using OSC to CSS , this would look like:


<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.login.js" type="text/javascript"></script>
<?php require(DIR_WS_INCLUDES . 'template-top.php'); ?>

(placing it just above the reference to template-top in login.php places these references just above the closing head tag, </head>, but only on login.php.)

---

3) Place this CSS selector in your stylesheet. Style as desired:

/*jquery validation errors*/
label.error {
/* remove the next line when you have trouble in IE6 with labels in list */
color: red;
font-style: italic;
font-family: 'lucida grande', helvetica, verdana, arial, sans-serif
}

---

4) Add these id and classes to the forms and text fields on the forms to validate, for example here in login.php and account_password.php.
On login.php

1. find:
   <?php echo tep_draw_form('login', tep_href_link(FILENAME_LOGIN, 'action=process', 'SSL')); ?>
   Change to:
   <?php echo tep_draw_form('login', tep_href_link(FILENAME_LOGIN, 'action=process', 'SSL'),'post','id="signupForm"'); ?>
2. find:
   <?php echo tep_draw_input_field('email_address'); ?>
   change to:
   
   <?php echo tep_draw_input_field('email_address','','class="required email" '); ?>
3. find:
   <?php echo tep_draw_password_field('password'); ?>
   change to:
   <?php echo tep_draw_password_field('password','','id="password"'); ?>

On account_password.php>

1. find:
   <?php echo tep_draw_form('account_password', tep_href_link(FILENAME_ACCOUNT, '', 'SSL')', 'onSubmit="return check_form(account_password);"') . tep_draw_hidden_field('action', 'process'); ?>
   Change to:
   <?php echo tep_draw_form('account_password', tep_href_link(FILENAME_ACCOUNT_PASSWORD, '', 'SSL'), 'post','id="passwordForm"', 'onSubmit="return check_form(account_password);"') . tep_draw_hidden_field('action', 'process'); ?>
2. find:
   <?php echo tep_draw_password_field('password_current')
   change to:
   
   <?php echo tep_draw_password_field('password_current','','class="required"')
3. find:
   <?php echo tep_draw_password_field('password_new')
   change to:
   
   <?php echo tep_draw_password_field('password_new','','id="password_new" ')
4. find:
   <?php echo tep_draw_password_field('confirmation')
   change to:
   <?php echo tep_draw_password_field('confirmation','','id="confirmation" ')

---

The Jquery file jquery.validate.js also has ‘rules’ and classes for credit card fields and more. Using the pattern above, you can easily adapt JQuery forms validation to contact.php, create_account.php, account_edit.php, checkout_payment.php and other OSCommerce pages that use text forms, or even checkbox and drop-down menus. For a complete set of examples, demos and necessary files visit Bassistance:Jquery Validation Plugin