SearchFit is an ecommerce shopping cart with a flexible template system that allows you to ad your own JavaScript. Thanks to some outstanding libraries like JQuery, JavaScript is a great tool to improve your ecommerce user interface. JQuery is a leading JavaScript library that has great potential regarding JavaScript for ecommerce. Writing JavaScript is much easier, faster and more fun when using JQuery. Since JQuery looks remarkably similar to CSS, coders who know HTML & CSS are able to intuitively use JQuery and start writing JavaScript programs immediately. According to the JQuery website:

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. JQuery is designed to change the way that you write JavaScript.”

JQuery for Ecommerce User Interface Examples

JQuery can improve ecommerce user interface in many ways.For example, you may create animated menus, animated product displays, drag-to-cart functionality and much more. By improving the user experience with customer friendly shopping features, you can build a loyal base of customers who love to use your website.

Ecommerce User Interface - Example 1: Expandable Sidebar Menu with JQuery

• Example Page: http://www.coolerstores.com/water-coolers-16-ct.htm
• Based on  John Resig’s Example: http://www.vimeo.com/116991

Menus are a key part of your ecommerce user interface. An expandable sidebar menu helps prevent visitors from being overwhelmed from the large number of menu links. Visitors are able to quickly view your top-level links and gain an understanding of your product catalog structure. The menu shown in the example expands without refreshing the page, so visitors can quickly examine its different sections. The menu shown in the example is a built automatically using the SearchFit website menu template.

Ecommerce User Interface - Example 2: Enhanced Product Image Display with JQuery

• Example Page: http://demo3.searchfit.us.com/product_57129_detailed.html
• Uses JQZoom JQuery Plugin by Mind Projects: http://www.mind-projects.it/blog/jqzoom_v10
• Uses other JQuery based scripts for image & value switching.

Having large, high quality product images helps increase your conversion rate. JQuery is a great tool to building ecommerce user interface elements, such as an enhanced product image display. This example shows how the popular JQZoom JQuery Plugin can be used as part of an ecommerce user interface to display your product images. When a visitor mouses over a product image, a window appears revealing a portion of the enlarged image. In addition, JQuery animation  effects are used to transition between product images as thumbnails are clicked. Clicking the thumbnails beneath the “Color Options” section controls the color option submitted to the shopping cart.

Ecommerce User Interface - Example 3: Dragable Cart with JQuery UI

• Example Page: http://demo3.searchfit.us.com/subcategory_85.html
• Uses JQuery UI Draggable ( http://docs.jquery.com/UI/Draggables ) and Droppable (http://docs.jquery.com/UI/Droppables )

A "Persistent Cart" is a standard ecommerce user interface element that shows customers a summary of items in their cart. Having a Dragable Cart means that your customers can drag and drop a product image onto your shopping cart display. Upon doing so, that product will be added to their cart. The example provided is a simple one.  Dragable carts are not a widely used user interface element, but they can provide an interesting, alternate method of adding products to the cart. The Dragable Cart is used in addition to the usual buy buttons that appear per product.

How to Add JQuery to Your SearchFit Website

The SearchFit Ecommerce Shopping Cart has an extremely flexible template system. It’s very easy to add JQuery to your SearchFit website. Two methods are explained below. You should use the Advanced Method with extreme caution because setup errors (in the htaccess file) will break your website.

Simple Method for Installing the JQuery JavaScript Library

The easiest way to add JQuery JavaScript library to your website is to add the below line of code right before the </body> tag on your SearchFit Main Template (and every other Website Main Template you have in Template Storage for which you would like to install JQuery):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

This line of code sources the JQuery JavaScript library from its hosted location on Google’s AJAX Libraries API storage location. The simple method is great for testing and production, but it’s not a great permanent solution (due to its large file size).

Advanced Method for Installing  the JQuery JavaScript Library

The difference between the simple an advanced method of installing JQuery include:

• The Advanced method is a good permanent solution.
• The JQuery JavaScript library files are hosted on your website (not Google).
• The JQuery JavaScript library is Gzipped for reduced file size and faster load time.

By default, you may not use Gzipped files with your SearchFit website. Here is one way to allow the use of Gzipped files. If you already have an htaccess file, add the entry shown in step e below. If you have not added an htaccess file to your website, then follow these steps to create one:

1. Access your SearchFit Control Panel. Click the Content tab | Custom Pages icon. The Custom Pages screen will appear.
2. Click the Click the New Custom Page link. The New Custom Page panel will appear.
3. Enter “.htaccess” for Web Page Name and Web Link Name. Click the Continue button. The New Custom Page form will appear.
4. From the Action select box, choose Only Page Without Template.
5. In the AUTO_GENERATED_CONTENT field, paste in the following htaccess entry:
   • <files *.js.gz>
     ForceType text/javascript
     Header set Content-Encoding: gzip
     </files>
6. Click the Save button.
7. Generate your website.

In order to use the Advanced Method, you will need to obtain a copy of the JQuery JavaScript library and Gzip it.
You may obtain a copy of the latest version of the JQuery JavaScript Library here: http://code.google.com/p/jqueryjs/downloads/list
Once you have downloaded the JQuery JavaScript Library, the next step is to compress it using Gzip compression. Free programs are available to do this, including 7zip, which is available here: http://www.7-zip.org/download.html

How to Gzip JQuery using 7zip

1. Install  7zip. Open the 7zip File Manager.
2. Drag your copy of the JQuery JavaScript Library to the white area of the 7zip file manager window.
3. The 7zip Add to Archive window will appear. Choose Gzip from the Archive Format select box.
4. Click OK
5. A Gzipped Copy of the JQuery JavaScript library will appear in the same directory as your original version (of JQuery).

The next step is to upload your Gzipped Copy of JQuery to the File Storage area of SearchFit:

1. Access your SearchFit Control Panel.
2. Click the Content tab.
3. Click the File Storage icon. The File Storage screen will appear.
4. Click the New File link. The New File panel will appear.
5. Select the Folder where you would like to store the JQuery JavaScript library, for example [ROOT]. Click the Continue button. The New File form will expand.
6. Click the Browse button next to the field labeled Local File. The File Upload window will appear.
7. Select your Gzipped copy of the JQuery JavaScript library and click Open.  The New File form will have the Local File and File Name fields populated according to your selection on the File Upload Window.
8. Important: The File Name field may display an incorrect file name. If necessary, adjust it so that the file name is in this format: filename.js.gz
9. Click the Upload Button
10. Generate your website
11. Check to see if your upload was successful. Use your browser to view the file you just uploaded. For example, if you chose to upload the file to the [ROOT] go to:
    • http://www.mywebsite.com/images_templ/jquery.js.gz

Storing JavaScript Files in your SearchFit Website

Although you could store JavaScript files using the File Storage screen or Dynamic File Storage, I prefer to save them as Custom Pages:

1. Access your SearchFit Control Panel.
2. Click the Content tab.
3. Click the Custom Pages icon. The Custom Pages screen will appear.
4. Click the New Custom Page link. The New Custom Page panel will appear.
5. Enter a value for Web Page Name, such as “myscript.js”. Enter a value for Weblink Name, such as “My Script”. Click the Continue Button.  The New Custom Page form will expand.
6. Change the value of the select box labeled Action to Only Page Without Template.
7. Delete the content of the text area labeled AUTO_GENERATED_HEADER.
8. Add the contents of you JavaScript file to the text area labeled AUTO_GENERATED_CONTENT.
9. Click the Add button.  The New Custom Page form will collapse.
10. Locate the Custom Page you just created. Uncheck the corresponding checkboxes labeled SM and SEO.
11. Generate. The JavaScript file you just created will now be located in the root directory of your website.

Ecommerce | RSS 2.0 | Comment it , or trackback this post.