PageSpeed: Serve Static Content From a Cookieless Domain

If you are using Pagespeed to speed up your OScommerce shop, you most likely have this at the top of the Pagespeed Score analysis list:
“Serve Static Content From a Cookieless Domain”

It is at the top of the list because moving the images, CSS files and the Javascript files into a cookieless domain will speed up your page load times, and really raise your Pagespeed Score. The reason your page will load faster is that if you do this 1) cookies for all this stuff are no longer being transferred, and 2) since a sever can only serve 6 items at a time, you will have doubled the speed that items can be downloaded. Now because each page recieves content from 2 servers, your page can load 12 items ‘concurrently’. Note that this is for static content, i.e. stuff that doesn’t change in response to the actions of the website user.

Here is how to set up a cookieless domain for your OSCommerce shop.

  1. Buy a domain name, set up a new website, and put nothing in it but an empty .htaccess file
  2. Buy and install an SSL certificate for this domain. You need to have an SSL certificate because the secure pages on an OSCommerce shop will not request images from a nonsecure site.
  3. Paste the code below into the empty .htaccess file. This will ensure that domain will not serve up cookies.
    # Use Mod_deflate to compress static files
    <ifmodule mod_deflate.c>
    <filesmatch "\.(js|css|ico|txt|htm|html|php)$">
    SetOutputFilter DEFLATE
    </filesmatch>
    </ifmodule>
    # Speed up caching
    FileETag MTime Size
    # Expires
    ExpiresActive On
    ExpiresDefault "access plus 366 days"
    # Future Expires Headers
    <filesmatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Expires "Sat, 27 Dec 2014 23:59:59 GMT"
    </filesmatch>

.htaccess code courtesy of:http://www.kevinworthington.com/set-cookieless-domain/

Move the content from your OSCommmerce shop and reference it:

  1. Copy your css, js files and the images folder to the same folders in your new domain. If your css files are in a folder on your current website called ‘css’, then create a folder called css on the cookieless website for that css file. You need to match the folder relationships of the original site on the cookieless site. For example if the css references in css/styles.css are looking for images in the buttons/images folder, on the original site, they are not going to find the images on cookieless site if you place the images in the images folder, but will find them on the new site in the buttons/images folder.
  2. Open includes/configure.php and add the new reference. Example:
    change:

    define('DIR_WS_IMAGES', 'images/');

    to:

     define('DIR_WS_IMAGES', 'http://www.new-cookieless-website.com/images/');

    note: now each time you change an image in your real site, you will need to manually change it to match on the cookieless site.

  3. Change the references to the stylesheet and javascript files from something like this:
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
    <script type="text/javascript" src="js/javascript.js"></script>

    to this format:

    <link rel="stylesheet" type="text/css" media="screen" href=" '.(isset($_SERVER['HTTPS']) && (strtolower($_SERVER['HTTPS']) == 'on') ? 'https://' : 'http://') . 'www.new-cookieless-website.com/css/mobi-style-minified.css">
    <script type="text/javascript" src=" '.(isset($_SERVER['HTTPS']) && (strtolower($_SERVER['HTTPS']) == 'on') ? 'https://' : 'http://') . 'www.new-cookieless-website.com/js/javascript.js"></script>
    

    note: This format keeps the dreaded Internet Explorer warning about ‘secure and insecure content’ from popping up.

If you have Firebug installed on Firefox, you can see what happens. Open Firebug, click the ‘net’ tab and load your site. You will see 6-12 items lined up under timeline, instead of 1-6 items, and a subsequent shorter load time.

Smartphone Detection for Mobile OSCommerce

Directing visitors who are using Smartphones such as IPhones or Androids to view mobile-enabled OSCommerce sites is easy. Simply go to www.handsetdetection.com or other similar sites and get a API script reference. Paste this script in the head of your normal sites index. Voila, anyone using a smart phone will be directed to your mobile OSCommerce site.

For a DEMO:, go to www.niora.com on your laptop or desktop computer. You’ll see the regular OSCommerce shopping cart. Now go to the same site, but using your smartphone. You’ll be at Niora’s mobile OSCommerce site.

Because the script is maintained externally, the script is always up-to-date (in theory), and covers all popular smart phones. If you would like to use your own code loaded locally on your website, you’ll need code for all the different phone types. www.hand-interactive.com is an example of a site that goes into detail on how to do this.

In the meantime, here is a javascript-free php snippet you can post at the top of includes/application_top.php of your normal site that will redirect all IPhone and IPad users to your mobile site.

<?php
$handsetdetection= '<script type="text/javascript" src=" '.(isset($_SERVER&#91;'HTTPS'&#93;) && (strtolower($_SERVER&#91;'HTTPS'&#93;) == 'on') ? 'https://' : 'http://') . 'api.handsetdetection.com/sites/js/12055.js"></script>';
echo $handsetdetection;
?>

(snippet courtesy of catswhocode)

CSS Buttons for OSCommerce 2.2RC2a or OSC to CSS

Change the buttons in OSCommerce to CSS. By making simple changes in the functions that generate the buttons it’s easy to add a class to the buttons and style as desired in the stylesheet. By adding span brackets to the buttons as you go through the shop and add the class you also add the option of using the ‘sliding doors’ technique of adding images to the buttons that resize with the length of the button text.

  1. Add a class to the submit buttons. Add span tags if you want the option of using the sliding door technique. Open catalog/includes/html_output.php and change:// The HTML form submit button wrapper function
    // Outputs a button in the selected language
    function tep_image_submit($image, $alt = '', $parameters = '') {
    global $language;
    $image_submit = '<input type="image" src="' . tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image) . 'border="0" alt="' . tep_output_string($alt) . '"';
    if (tep_not_null($alt)) $image_submit .= 'title=" ' . tep_output_string($alt) . '"';
    if (tep_not_null($parameters)) $image_submit .= ' ' . $parameters;
    $image_submit .= '>';
    return $image_submit;
    }

    to://The HTML form submit button wrapper function
    // Outputs a button in the selected language
    function tep_image_submit($image, $value='', $class, $alt = '', $parameters = '') {
    global $language;
    $image_submit = '<span><input type="submit" value="' . tep_output_string($value) . '" class="button" alt="' . tep_output_string($alt) . '" ';
    if (tep_not_null($alt)) $image_submit .= ' title=" ' . tep_output_string($alt) . ' "';
    if (tep_not_null($parameters)) $image_submit .= ' ' . $parameters;
    $image_submit .= ' ></span>';
    return $image_submit;
    }
  2. That takes care of the submit buttons.

  3. Now change the regular buttons. Add the class ‘button’ to every button in the all the catalog pages. Add span tags to have the option of using the sliding doors technique. Here is the example of the continue button:
    change:<?php echo '<a href="' . tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL') . '">' . tep_image_button('button_continue.gif', IMAGE_BUTTON_CONTINUE) . '</a>'; ?>
    to: <?php echo '<a href="' . tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL') . '" class="button"><span>' . tep_image_button('button_continue.gif', IMAGE_BUTTON_CONTINUE) . '</span></a>'; ?>
  4. Finish by styling the buttons by adding this to the stylesheet:
    .button{margin-bottom:10px;}
    a.button{display:inline-block !important;border:dotted 1px !important;padding:0px 1em;font-weight:bold;font-size:100%;text-align:center;cursor:pointer;}

    This is just an example of the infinite ways you can use CSS to style the buttons.
  5. Note that the submit buttons are also going to be picking up the styling from any existing ‘input’ or ‘input [submit ]’ selectors in the stylesheet.


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

SEO Friendly Titles on Product and Index Pages

Here is a simple one step method to add SEO Friendly titles to the product pages, category listing and the main page of OSCommerce.

use for OSCommerce versions: 2.2rc2a and 2.3

To have the product name as the title on the product page, open product_info.php.
Between the head tags find:

<title><?php echo TITLE; ?></title>

change to:

<title><?php echo $product_info['products_name']; ?></title>

That’s it.


To add the category name to the category listings on index.php (main page):

Open index.php
find:

} else {
$category_depth = 'products'; // category has no products, but display the 'no products' message
}
}
}

add just beneath

//pull category info for CAT and SUBCAT, META-INFO
$category_query = tep_db_query("select cd.categories_name from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.categories_id = '" . (int)$current_category_id . "' and cd.categories_id = '" . (int)$current_category_id . "' and cd.language_id = '" . (int)$languages_id . "'");
$category = tep_db_fetch_array($category_query); 
//define title
if (tep_not_null($category['categories_name'])) {
$title = $category['categories_name'] ; 
} else {
$title = STORE_NAME.' more text if desired';
}

SEO Friendly Breadcrumbs

This is a simple change you can make in includes/application_top. Instead of the product model number appearing in the Breadcrumbs trail, the product name will appear.

use for OSCommerce versions: 2.2rc2a and 2.3

Instructions:
Open includes/application_top.php.

find:

// add the products model to the breadcrumb trail

if (isset($HTTP_GET_VARS['products_id'])) {
$model_query = tep_db_query("select products_model from " . TABLE_PRODUCTS . " where products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "'");

if (tep_db_num_rows($model_query)) {
$model = tep_db_fetch_array($model_query);
$breadcrumb->add($model['products_model'], tep_href_link(FILENAME_PRODUCT_INFO, 'cPath=' . $cPath . '&products_id=' . $HTTP_GET_VARS['products_id']));

  }

}

change to:

:
// add the products name to the breadcrumb trail

if (isset($HTTP_GET_VARS['products_id'])) {
$model_query = tep_db_query("select products_name from " . TABLE_PRODUCTS_DESCRIPTION . " where products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "'");

if (tep_db_num_rows($model_query)) {
$model = tep_db_fetch_array($model_query);
$breadcrumb->add($model['products_name'], tep_href_link(FILENAME_PRODUCT_INFO, 'cPath=' . $cPath . '&products_id=' . $HTTP_GET_VARS['products_id']));
  }

}

That’s it.

This simply changes the query from the products table to the products_description table where the products name is stored in the products_name field. Since both tables are keyed to the same products id (products_id), the same product is pulled from the database regardless of whether the breadcrumbs query searches the products table or the products_description table.


Posted in SEO

Quantity Box

Add a quantity text box before the ‘add to cart’ button on the product page to allow a quantity to be posted to the shopping cart.

Demo:

Step 1:
in includes/application_top.php
find:
$cart->add_cart($HTTP_POST_VARS['products_id'], $cart->get_quantity(tep_get_uprid($HTTP_POST_VARS['products_id'], $HTTP_POST_VARS['id']))+1, $HTTP_POST_VARS['id']);

change to:
$cart->add_cart($HTTP_POST_VARS['products_id'], $cart->get_quantity(tep_get_uprid($HTTP_POST_VARS['products_id'], $HTTP_POST_VARS['id']))+$HTTP_POST_VARS['cart_quantity'], $HTTP_POST_VARS['id']);


( This changes the +1 to
$HTTP_POST_VARS[‘cart_quantity’] )

Step 2:
in product_info.php
find:
<?php echo tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_image_submit('button_in_cart.gif', IMAGE_BUTTON_IN_CART); ?>

just in front of that add:
<input type="text" name="cart_quantity" value="1" maxlength="2" size="2">

(this is also posted on ‘Tips and Tricks’ section of the OSCommerce Forum)
Add a Quantity box

Product MiniDescriptions for OSCommerce 2.3

Product MiniDescriptions for OSCommerce 2.3

Adding minidescription to your product listing in OSCommerce 2.3 is easy:

  1. Create a new field in products_description. (use the following in phpMyAdmin)
    ALTER TABLE `products_description` ADD `products_minidescp` TEXT NOT NULL

    Then type the product mini-descriptions directly into the database.

  2. On about line 121 in index.php
    change:

    case 'PRODUCT_LIST_NAME':
    $select_column_list .= 'pd.products_name, ';
    break;

    to this:
    case 'PRODUCT_LIST_NAME':
    $select_column_list .= 'pd.products_name, pd.products_minidescp, ';
    break;

  3. In includes/modules/product_listing.php
    change this:
    case 'PRODUCT_LIST_NAME':
    if (isset($HTTP_GET_VARS['manufacturers_id']) && tep_not_null($HTTP_GET_VARS['manufacturers_id'])) {
    $prod_list_contents .= ' <td><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . $listing['products_name'] . '</a></td>';
    } else {
    $prod_list_contents .= ' <td><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . $listing['products_name'] . '</a></td>';
    }

    to this:

    case 'PRODUCT_LIST_NAME':
    if (isset($HTTP_GET_VARS['manufacturers_id']) && tep_not_null($HTTP_GET_VARS['manufacturers_id'])) {
    $prod_list_contents .= ' <td><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . $listing['products_name'] . '</a><br/>'. $listing['products_minidescp'].'</td>';
    } else {
    $prod_list_contents .= ' <td><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . $listing['products_name'] . '</a><br/>'. $listing['products_minidescp'].'</td>';
    }

That’s it!

In OSCommerce 2.2RC2a step three above is different:
3. In includes/modules/product_listing.php
change this:
$lc_text = ' <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . $listing['products_name'] . '</a>';

To this:

$lc_text = '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . $listing['products_name'] . '</a><br/>'. $listing['products_minidescp'];

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.


OSC-to-CSS V2

4 Jquery Features installed on V2. Download from OSCommerce.

Product Tabs
Click to enlarge


Product Tabs
Json Add To Cart Mod
Click to enlarge


Json Add to Cart
Pretty Photo Lightbox
Click to enlarge


Pretty Photo
Superfish Horizontal Menu
Click to enlarge


SuperFish Navigation

Live Demo

Special Features New on Version 2.0:

960 Grid System

This new version, v2.0,
incorporates the
960 grid system.
The 960 grid system greatly facilitates alignment, proportion and
layout issues. It speeds up design, creates consistency and solves
cross browser problems.

JQuery/Json ‘Add to Cart’

Click ‘add to cart’ and without the page refreshing a JQuery lightbox-like popup appears to let the customer know a product has been
added to the cart. Complete with drop downs for options and links to ‘continue’ and ‘checkout’.

JQuery Product Information Tabs

The product information page comes installed with tabbed panels. Infoboxes have been installed to fill the
panels with product reviews, manufacturer info and more.

JQuery SuperFish NavBar

SuperFish JQueryNavigation Bar. Easily modified with it’s own stylesheet. See the Superfish site for neat plug-ins
and tips.

Reorganized Stylesheets

Improved and simplified organization esp. in regards to the product listings makes them far easier to work with.
V2.0 has Separate stylesheets for the jquery components, for text and for the 960 grid system.

InfoBoxes:

The infoboxes have been rewritten to operate inpendently. You can place any infobox anywhere and style it
separately according to where it is located.

Buttons

Buttons are CSS generated and have their own stylesheet. This feature can revert to standard buttons easily.

Jquery Pretty Photo

Highlight a full size product photo with a professional lightbox popup.