Author Archives: admin

OSCommerce: 3.0 vs 2.3 vs OSC to CSS

What version to use?

  • V3.0

    OSCommerce 3.0 represents an entirely new modular structure. It has updated security features, and a nicer admin and much more. However, it is virtually featureless, a bare bones core, that is not ready for non-developers to use. Many people will find that their web hosts do not have the latest version of php, which 3.0 requires. The thousands of great contributions available for 2.2RC2a will not work on 3.0

  • V2.3

    OSCommerce 2.3 is the first version to get rid of the outmoded OSCommerce table structure, and it incorporates important security features. It has an improved admin. It is different enough from 2.2RC2a that many of the contributions available for 2.2RC2a will not work. Plus the incorporation of the tableless CSS structure is not complete, and awkwardly implemented. For example, it is difficult to add javascript or unique stylesheets to individual pages.

  • OSC to CSS

    OSC to CSS has all the advantages of 2.2RC2a, has the table structure replaced with a superior incorporation of CSS. It some nice JQuery features installed to include a horizontal category menu, pretty photo, and a Json coded ‘add to cart’ feature. The admin and database structure are unchanged from 2.2RC2a so nearly all the contributions available for 2.2RC2a work on OSC to CSS. It just takes a bit of creative html work on the catalog side. An it is not difficult to install the 2.3 security features. This link explains how: update 2.2RC2a security

In summary, OSC to CSS is fast and simple with thousands of contributions available, uses a great tableless structure, has an updated modern look as downloaded, and the security features for 2.3 can easily be incorporated.

Misc Tips

    • Parsing a url

    • Echo a url. Here is an example of a webpage with a query string attached:

      $url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['SCRIPT_NAME']."?".$_SERVER['QUERY_STRING'];
      echo $url;

      example result: http://www.mywebsite.com/mail.php?f2fc1b9ecc1986f34588fd=listAudience&modulemail

    • Echo just the query string of the url:

      echo $_SERVER['QUERY_STRING'];
      example result: f2fc1b9ecc1986f34588fd=listAudience&modulemail

    • Echo just some portion of the query string of the url, in this case everything after the ‘=’
      echo preg_match('/listAudience&modulemail$/i', $_SERVER['QUERY_STRING'];
      example result: listAudience&modulemail

      courtesy of: http://www.daniweb.com/forums/thread16687.html

Registering, or Setting, a Value in OSCommerce.

Set a value on one page that is available for another page, or anywhere on the site:

  1. For example, to set the value of $myvar as ‘delorum ipsum’:
    $myvar = 'delorum ipsum'; // give it a value here
    if ( ! tep_session_is_registered('myvar') ) {
    tep_session_register('myvar');
    }
    ?>
  2. One the page you wish to carry that value to, simply echo the variable, ‘$myvar’ . In other words, below will print ‘delorum ipsum’.
    echo $myvar;
  3. When you no longer need the value, unregister it like so:
    tep_session_unregister('myvar');

This is done to allow information, that can come from the database or a form, to follow a customer as they navigate unpredictably through the shop. Here are some examples from OSCommerce:

  • Open login.php
    near the top you see these lines:
    tep_session_register('customer_id');
    tep_session_register('customer_default_address_id');
    tep_session_register('customer_first_name');
    tep_session_register('customer_country_id');
    tep_session_register('customer_zone_id');
  • These are all values pulled from the database.

  • Later on in catalog/checkout_shipping.php if the customer makes some comments on the form on that page, the comments get registered, and becomes the value of the variable ‘$comments’.
  • tep_session_register('comments');

  • Open catalog/logoff.php: When the customer signs out, all this happens.
    tep_session_unregister('customer_id');
    tep_session_unregister('customer_default_address_id');
    tep_session_unregister('customer_first_name');
    tep_session_unregister('customer_country_id');
    tep_session_unregister('customer_zone_id');
    tep_session_unregister('comments');
  • This unregisters all the values that have been attached to those variables, because they are no longer needed.

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

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.

Mobile OSCommerce

Mobile OSCommerce is a fast, light-weight add-on for OSCommerce, that makes it easy to search, select and buy items from an existing OSCommerce shop with a mobile device. Installation is simple, upload 26 files and add file definitions to includes/filename.php. Designed to upload directly into an existing Installation of OSCommerce OSC to CSS v2. Expect some html and configuration adjustment. It uses the existing checkout programming, and should work with most payment methods.

DEMO 1(live niora site)
or visit www.niora.com on your IPhone or other smart phone.

DEMO 2(OSC to CSS v2 demo site)

or visit www.alpha-clear.com/ninesixty/mobile-index.php on your IPhone or other smart phone

It will also fit nicely on OSCommerce 2.3, with a little html work on some of the buttons.

DEMO 3 (OSCommerce 2.3 demo site)

Download the files from the google code repository: download mobile oscommerce

Installing Mobile OSCommerce on OSCommerce 2.3 and OSCommerce 2.2RC2a:
To install Mobile OSCommerce on these versions you must replace includes/classes/boxes.php with the same file from OSC to CSSv2. (or paste the additional classes from that file to your includes/classes/boxes.php). You will also need to replace the submit buttons in OSCommerce 2.3, or add an image to the submit buttons.

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['HTTPS']) && (strtolower($_SERVER['HTTPS']) == '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.

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

Simple SEO Metatags

Create metadescription and metakeyword fields for the product and category pages. This project covers only index.php and product_info.php, because for the other catalog pages, the header tags can be entered directly into the head of the page.

use for OSCommerce versions: 2.2rc2a and 2.3

  1. add these 6 fields to these three tables in the database:
    (below is the command to enter into phpMyadmin to create the fields)

    ALTER TABLE products_description ADD products_metadescription LONGTEXT NULL;
    ALTER TABLE products_description ADD products_metakeywords LONGTEXT NULL;
    ALTER TABLE categories_description ADD categories_metadescription LONGTEXT NULL;
    ALTER TABLE categories_description ADD categories_metakeywords LONGTEXT NULL;
    ALTER TABLE manufacturers_info ADD manufacturers_metadescription LONGTEXT NULL;
    ALTER TABLE manufacturers_info ADD manufacturers_metakeywords LONGTEXT NULL;

  2. Enter data for the metatags directly into the database using phpMyAdmin or a similar program
  3. open index.php
    • find:
      $category_parent_query = tep_db_query("select count(*) as total from " . TABLE_CATEGORIES . " where parent_id = '" . (int)$current_category_id . "'");
      $category_parent = tep_db_fetch_array($category_parent_query);
      if ($category_parent['total'] > 0) {
      $category_depth = 'nested'; // navigate through the categories
      } else {
      $category_depth = 'products'; // category has no products, but display the 'no products' message
      }
      }
      }

      just below add:
      //pull category info for CAT and SUBCAT, META-INFO
      $category_query = tep_db_query("select cd.categories_name, cd.categories_metadescription, cd.metakeywords, c.categories_image 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 metadescription
      if (tep_not_null($category['categories_metadescription'])) {
      $metadesc = $category['categories_metadescription'] ;
      } else {
      $metadesc = 'Alpha Clear Adult Acne Treatment eliminates adult acne by reducing wrinkles, enhancing natural moisturization, and stimulating nourishment of actively growing tissue.';
      }
      // define metakeywords
      if (tep_not_null($category['categories_metakeywords'])) {
      $metakeywords = $category['categories_metakeywords'] ;
      } else {
      $metakeywords = 'Alpha Clear, Adult Acne Treatment, Adult Acne, Clear Adult Acne';
      }
    • find:
      <title><?php echo $title; ?></title>
      just below add:
      <meta name="Description" content="<?php echo $metadesc; ?>" >
      <meta name="Keywords" content="<?php echo $metakeywords; ?>" >

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';
}