Shopp Uploads
Shopp is still shaping up. Today, I’m going to continue providing updates on development progress for the new WordPress e-commerce plugin. This past week, work focused primarily on creating the interface for handling file uploads in the product editor and some redesign on the product options interface.
Image Uploads
In order to continue my general development philosophy of using as much of what is provided in WordPress as possible for a seamless integration experience, I decided the best approach would be to use the new media uploader introduced in WordPress 2.5. That’s not to say, the upload interface looks and works like uploading in a post, just that Shopp is using the same functional framework that WordPress uses – namely the SWFUpload Flash/JavaScript hybrid file uploader.
The final result, I must admit, is a thing of beauty. It makes the interface feel more like a desktop application than a web application. You can upload multiple images for a given product. Thanks to SWFUpload, you can see a progress bar as the image is uploaded. A new frame for the image appears in the product editor’s image gallery “lightbox” and shows you the progress bar as it’s uploading. Once finished, the progress bar disappears and a thumbnail of your image gracefully fades in. I decided against allowing images to get attached to specific product options (explained in the next section) because the interface would become too complex. This is ultimately one of those ease-of-use versus ultimate flexibility decisions that is either going to pay off or bite me down the road. So I am interested in hearing your opinions on this.
Once the images are uploaded, a thumbnail is generated. Thanks to a lucky find, they are processed with a Photoshop-like filter for sharp, high quality thumbnails. Also, I’ve paid close attention to being careful with memory management. I know there is more work to be done in this area, but I am confident I can tighten this up during the beta. Ultimately, as with any other plugin that handles uploads, you’ll only be able to upload images that are smaller than the maximum file upload size set in your web hosting server’s PHP settings and the maximum amount of memory allocated to a PHP process.
Finally, you will have the option in Shopp’s product settings screen to display images for your product in a gallery of thumbnails or a slideshow. That’s right, image galleries for products are built-in. And because of the customization architecture, you will be able to fully customize your image galleries and utilize fancy features like Thickbox image zooming. Images can be ordered by filename, alt/title attribute, create date or a custom order. Setting up a custom order for product images is as simple as dragging the images around in the product editor image gallery “lightbox”. I’m still working out how to provide a seamless interface to allow adding/editing alt/title attributes to images for SEO. I’ll keep you posted on this.
To me, even what I’ve developed here so far is a huge improvement over what’s offered in well, nearly any e-commerce system available, not just e-commerce solutions for WordPress.
Product Options
To provide product options, I’ve designed what I believe to be a very unique interface approach. Instead of having a separate product option group management system – where you have to setup product options “sets” before you edit a product – I’ve come up with a very different solution. Products all have product pricing options, regardless of how many there are. If you have a product with no options and just one price, you will have only one product option in your product editor. The system will automatically take care of dealing with “single price” products versus those with options in the customer interfaces. To add more options, you click a button and a new price/product option entry show up in your product editor. All kinds of new possibilities open up with this. Now each price/product option inherently have their own price, SKU identifier, inventory amount, etc. They also can take the form of a shippable product, download or donation.
For example, say you’re selling your own music album. You can set up the album as a product with a pricing option for downloading the album and a pricing option for a shipped CD with inventory tracking for the CDs.
For a donation, you can setup several donation price options, for say $5/$10/$50 for the same donation “product”.
Product options with a downloadable payload also makes use of the SWFUpload system. You can upload your file right in the product option, see the progress as it uploads and when it’s complete, you’ll see a file icon (with different icons for different file types – note this won’t always be the most precise, file type detection is more complex than it first appears), the file name and size. I’d like to figure out a nice integrated way that you can change the file name once it’s been uploaded, but that, like image alt/title attribute editing will take more doing.
So, that’s product options. They too are built into the product editor. You can do all of this, setup product options and upload product images, in one screen – no switching. It’s fast, easy and I really think you’re going to like it.
Have questions on these features or some ideas you think I might be missing? Let me know in the comments. As always, thanks for reading!
Feeds
