e-Commerce with WordPress and PayPal

I recently completed work on a new website, Petra’s Jewelry, which is a online store for a woman who sells handmade beaded jewelry.

To create the store, I used WordPress and the the WP e-Commerce plugin. This plugin allows you to add products, maintain your listing of products and product pages, and submit payment through PayPal Express Checkout.

The creators of WP e-Commerce describe it as

an industrial strength elegant easy to use fully featured shopping cart application suitable for selling your products, services, and or fees online.

I found installation a little difficult, however most of my issues came from the fact that in creating the site’s WordPress theme I did not include the wp_head() function (info on wp_head), which this plugin uses to include the Javascript files.

Pages created

Once I had the theme finished and successfully installed the plugin, it automatically created a few pages:

  • Browse Products: This is the main page of the store. As some other people have noted, the URLs that are created for product pages and category pages are not good (for example, http://petrasjewelry.com/products-page/?product_id=2).
  • Verify your Order: This is the page you see when you click “checkout,” and before you are directed to Paypal for payment processing. The page works well and the form is well-designed. It calculates shipping and sales tax based on preconfigured rates by location.
  • Transaction Results: I think this is the page you return to after Paypal.
  • Your Account: This page lists a purchase history. I did not find this page particularly useful. Also, I did not find anywhere for users to create a login.

Javascript shopping cart

The plugin provides a PHP hook, nzshpcrt_shopping_basket(), that inserts what the creators call a “Sliding Shopping Cart”. It uses AJAX so that, for example, when you click the “Add To Cart” button, it appears in the shopping cart box without reloading the page (learn more about AJAX).

I thought this was a nice feature, and I inserted the shopping cart box in the sidebar of the site. However, I don’t know how good this is in terms of usability, as the plugin references quite a few JavaScript files in the header. I would think this would slow down the load time.

Product images

Most of this plugin’s administration interface is straightforward, but something I was concerned about when I was searching for an e-commerce plugin was the image handling. This plugin allows you to upload an image and it uses some server-side resizing to generate a thumbnail at whatever size you tell it. When you click on a product image, the plugin uses an implementation (it appears) of the Lightbox JavaScript technique to display the original version of the image.

Final notes

When I was creating this site, I was designing my own theme for WordPress and wanted something that was simple, usable, and easily maintainable. I was also looking for a free WordPress plugin.

I think that my attempt at creating a functional e-commerce store was successful, and I think the store works pretty well. I will be working with my client soon to add products to the store. I would also like to add a gallery (maybe using Lightbox JS again) that showcases jewelry created in the past (and not currently for sale) to give customers an idea of what is possible for custom orders.

After finishing this project, I have come across several nice alternatives, including Shopify and Big Cartel. If I create an online store in the future, I would like to try these alternatives to see if they are any simpler.

Links: Techmeme and Doodle polls

Two innovative sites (new finds for me) that you may find useful:

  • Techmeme: this site aggregates posts from multiple influential blogs related to the latest in technology; an online resource for understanding hot topics of discussion in the blogosphere
  • Doodle: this site can be used to poll or survey your friends on a single question. For example, if you wanted to determine the best time for a group of people to meet (see this example), your friends would visit the link you send them and respond by selecting the times that they are or are not available. A table is produced showing everyone’s responses.

New web host

Just a quick note to announce that I have changed web hosts. My previous web host, Steelpixel, who hosted me from August 2006 through October 2007, announced that they are going out of business since all their control panel data was lost. I must note that Josh of Steelpixel did a good job finding a host willing to take over the business and honor my previous hosting terms.

The new host is RailsPlayground, a web host which is geared towards developers… [specifically] Ruby on Rails/Ruby, PHP 4/5, Perl, and Python developers. They have fairly good customer service; they responded to support tickets through their nice account center (the ticket center mirrors email correspondence between you and support).

The MySQL databases and HTML files were not lost, so I was able to access the old server through SSH and transfer my files to the new host. They use cPanel (this is the first time I have tried out cPanel v.11), which works well. I am looking forward to working with them in the future.

Links for Sept. 7

There are no social networks: There is only one social network. My social network.

Naming Schemes: interesting sets of names for hard drives, computers, servers, etc.

The Beauty of Sketch Design

Efficient CSS with shorthand properties: Shorthand properties can be used to set several properties at once, in a single declaration, instead of using a separate declaration for each individual property. As you’ll see, this can save a lot of space in your CSS file.

Bookmarks using xFolk

I have rewritten the markup for the list of bookmarks on my links page according to xFolk, a draft Microformat specification.

Before I implemented xFolk, my list of bookmarks was a simple unordered list with each list item coded as follows:

  1. <li><a href="http://9rules.com">9rules</a>:
  2. a community of weblogs on a variety of topics</li>

Implementing xFolk involved the addition of the class xfolkentry to the list item, the addition of the class taggedlink to the link, and the addition of a span with the class description to the bookmark’s description. The markup for the new list item is the following:

  1. <li class="xfolkentry">
  2.   <a class="taggedlink" href="http://9rules.com">9rules</a>:
  3.   <span class="description">a community of weblogs on a variety of topics</span>
  4. </li>

rel="tag" can also be added to links to tags associated with the bookmark.

You can read more about the rationale for and specifics of xFolk on the Microformats wiki or on Bud Gibson’s blog post. You can also view the XMDP for xFolk, which further describes the attributes that should be used.

Why use Microformats?

Microformats are a set of human- and machine-readable data formats built upon existing and widely adopted standards. Basically, they involve using the addition of standardized class names, rel attributes, and design patterns to XHTML markup to solve simple, specific, documented problems.

I have implemented several Microformats on this site, and at this point you may be asking “why use Microformats?”

In response to this question, Andy Mitchell of whymicroformats wrote:

Microformats can be used to let users easily extract people/event information from your website for their organizer software… in the near future, Microformats will help both you and your work be better ranked by conventional search engines like Google [and will allow your data to be aggregated by other sites and downloaded/imported by users].

Furthermore, Arve Bersvendsen writes that:

…given the the opportunity to mark up your human presentable content (read: HTML) with a well-defined microformat, you should. Mostly because writing microformat parsers is extremely easy.

He goes on to present a 13-line hCalendar parser that extracts the date, time, summary, location, and URL of an event from a HTML document.

Many others have written parsers as well; there are several plugins available for the Firefox web browser, and coming versions of Firefox will add extended support for Microformats. According to Mozilla developer Alex Faaborg:

future Web browsers are likely going to associate semantically marked up data you encounter on the Web with specific applications, either on your system or online.

In conclusion, Microformats are easy to implement (they only require the addition of a few semantic elements to a page’s markup) and present an huge potential for extension and aggregation of the data. By using Microformats, your page’s markup becomes more human- and machine-readable.