Account Tabs for OSC to CSSv2

On OCS to CSS this combines the files address_book.php, account_edit.php, account_history.php and account_password.php into one file, account.php. The information is accessed with JQuery tabs for really intuitive and easy navigation. Download this file, account.php and the required CSS file from google.code

Requires the main JQuery file and the JQuery UI file. You will need to be prepared to make adjustments to the html.

Screenshots:

Address Book Tab
Click to enlarge


Address Book Tab
Edit Account Tab
Click to enlarge


Edit Account Tab
Password Tab
Click to enlarge


Password Tab
Order History Tab
Click to enlarge


Order History Tab

Download the Files

Styling Even/Odd Table Rows with JQuery

Styling Even/Odd Table Rows in Oscommerce is quick and simple with JQuery. It is especially simple in OSCommerce 2.3 and in OSC to CSS because the JQuery file is already referenced.

See below for specific instructions for installing in OSC to CSS
Adapted from Jquery, The Missing Manual, chapter 6.

  1. Upload the JQuery file, jquery-1.4.2.min.js, to the folder ‘js’ (catalog/js). If you have OSCommerce 2.3, or already use JQuery, skip this step.
  2. Add this reference to the head of the file that contains the table.
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    If you have OSCommerce 2.3 or already use JQuery, skip this step.
  3. Add this script to the head of the file that contains the table.
    <script type="text/javascript">
    $(document).ready(function( ) {
    $('table.striped tr:even').addClass('even');
    });
    </script>
  4. Add this CSS to your stylesheet..even {background-color: #E7F7FF;}
  5. Create a table in the html of your file. Simply give it a class of “striped”. Every other row will be light blue.

DEMO


You can also make the table interactive. Follow the steps above but with following changes:

  1. In step 3 above use this javascript instead
    <script type="text/javascript">
    $(document).ready(function( ) {
    $('table.striped tr:even').addClass('even');
    $('table.striped tbody tr').mouseover(function() {
    $(this).addClass('highlight');
    $(this).css('cursor','pointer');
    }).mouseout(function() {
    $(this).removeClass('highlight');
    });
    });
    </script>
  2. In step 4 above , add this CSS to your stylesheet.
    .even {background-color: #E7F7FF;}
    .highlight {background-color:#D3E3EB !important;}

OSC to CSS: Specific instructions for account_history.php

  1. Place this (the code from above:)
    <script type="text/javascript">
    $(document).ready(function( ) {
    $('table.striped tr:even').addClass('even');
    $('table.striped tbody tr').mouseover(function() {
    $(this).addClass('highlight');
    $(this).css('cursor','pointer');
    }).mouseout(function() {
    $(this).removeClass('highlight');
    });
    });
    </script>

    just above:
    <?php require(DIR_WS_INCLUDES . 'template-top.php'); ?>
  2. Add this CSS to your stylesheet.
    .even {background-color: #E7F7FF;}
    .highlight {background-color:#D3E3EB !important;}
  3. Add the class to the table.
    Find each instance (three places) of:
    <table class="account">
    change to:
    <table class="account striped">

Prevent Double Order Submissions with JQuery

Prevent double order submissions with JQuery. Use javascript to disable the ‘confirm order’ button on checkout_confirmation.php after submission, after it is clicked, and replace it with a message box complete with a spinner gif. Message box will match the Themeroller theme you are using.
None of the order processing programming is changed. The page will either proceed to checkout_success.php or refresh with error messages as normal. If the user has javascript disabled the button will function and display as usual.

Installation is simple. In OSCommerce 2.3 and OSC 2 CSS the required JQuery library, jquery-1.4.2.min.js is already in place.

All you need to do is the following:

  1. Add this to the stylesheet.css:
    .align_center{
    text-align: center;
    }

    .hide_msg{
    display: none;
    position: absolute;
    }

  2. On checkout_confirmation.php:

    about line 320, find:

    <div style="float: right;">
    <?php
    if (is_array($payment_modules->modules)) {
    echo $payment_modules->process_button();
    }
    echo tep_draw_button(IMAGE_BUTTON_CONFIRM_ORDER, 'check', null, 'primary');
    ?>
    </div>

    Then:

    1. Add the id ‘confirm’ to the div like so:
      <div style="float: right;" id="confirm">

    2. Finally, just above that add:

      <!--msg box-->
      <script type="text/javascript">
      $(document).ready(function(){
      $('#confirm').click(function(){
      $('#confirm').hide();
      $('#order_submitted').removeClass('hide_msg');
      })
      })
      </script>
      <div id="order_submitted" class="hide_msg">
      <div class="ui-widget infoBoxContainer" style="float: right;">
      <div class="ui-widget-header infoBoxHeading">Order Submitted</div>
      <div class="ui-widget-content infoBoxContents">
      <p class="align_center">Please Wait while your order is processed.</p> <p class="align_center"><?php echo tep_image('ext/jquery/bxGallery/spinner.gif'); ?></p>
      </div>
      </div>
      </div>
    3. In OSC to CSS the spinner gif is in the images file, and called ‘loading.gif. Thus, change the path from ‘ext/jquery/bxGallery/spinner.gif’ to ‘images/loading.gif’ (or to where you have another suitable animated gif located).

      That’s it. Whenever someone submits an order, they will be unable to re-click the ‘confirm order’ button and cause a double submission of the order.

    Note:
    Ideally the javascript snippet (everything between the script tags above) would be placed within the head tags of the page checkout_confirmation.php, but in OSCommerce 2.3 this would require additional programming. If you place it within the head tags as 2.3 is currently written, then the snippet would appear in the head of all catalog pages. In OSC to CSS, however, you can easily do this, as each catalog page has it own closing head tag.


JQuery Lightbox for OSCommerce Product Listings

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

Products listing:
Demo

New Products listing:
Demo

  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.
    valid email message
  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>


JQuery Forms Validation for OSCommerce

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