My new design for an online store especially for music downloads (with sample audio!)

Music store design - samples, downloads and non-digital cd as products all on one page

Musicians of all types, from Indi-Rockers to Death Metal monsters and even Classic Rock tribute bands need to be able to sell their music online. There are lots of sites they can join that will do it for them like e-music and cdbaby and they make it real easy… But the bands aren’t selling on their own terms, on their own web site, with their band logo and all of that extra nice nice-ness.

So when I was asked by ON to develop an online store for them of course I grabbed a fresh copy of WordPress + wp-e-commerce and got to it.

My 1st challenge was finding an audio player that was customizable with CSS (not Flash!) I was so happy to find this plugin Haiku minimalist audio player. This plugin let me paste a shortcode into the product editor so that before customers are ready to buy they can hear a sample of the song. Customers can add multiple tracks to the cart and they can also choose a format, wav or mp3. ON also wanted to be able to offer the option to download the entire album (in both formats) and/or the option to buy the physical cd.

So on one side of the product page there’s the artist name & photo (the cd cover art as a featured image) and under it there is a list of 3 products: Buy CD, Download Album (MP3) and Download Album (WAV).

The new version of wp-e-commerce makes it easier than ever to mold your product pages any way you need. I really love how much easier it is to handle Variations now. So well done! The best decision GetShopped made was to go with the way WordPress works now – quite a bold thing to do because it required a complete revamp of their plugin. So I have much respect for them. Talk about wanting to be Future Proof. I love that.

Why Beta? Because I used the Product Page template.I should have used the Category Page template. I haven’t yet handled Single Product Pages,either. But its a good start!

Embed Audio files for music product in LightSpeed web store

Out of the box, LightSpeed web store is not as robust as some other eCommerce solutions. But that doesn’t mean there aren’t ways to make it more robust. One such example: creating a solution to hear music samples in a Single Product detail page on the web store. We didn’t want to just click over to an external site (like the vendor’s wholesale page which had provided the samples). In my solution the customer does not leave the page to hear them.

I created a custom post type in WordPress for each CD/album title being sold on the web store. Each post has its own music player loaded with a playlist (of song previews). The .mp3 samples were uploaded with the Media Uploader and a music player WordPress plugin called Haiku was activated to play the samples. Then the links to the single custom posts were embedded in the appropriate LightSpeed Product Cards and then web store was updated.

When the link in the product description is clicked, the custom post loads and plays the samples in a lightbox window (using Fancybox which ships with web store), so the customer never has to leave the product details page to listen before they buy. All you have to do is embed the link to the custom post type in the product description and voilĂ .

Still Get HTTP Errors When Uploading Pics To Your WordPress Posts or Pages?

The HTTP error may be fixed for most WP users but *most* people making their install open to those who have a valid password that is protected by .htaccess & htpasswd can not use the flash based uploader. I say most because maybe it’s just me and like 2 other people.

The Flexible Upload Plugin (valid up to wp-2.5.1) lets you upload more than one pic at a time. Yay! But just like your relationship status in Facebook, it’s complicated.

Long and Boring and Interesting only to Me Case History:
Once or twice a week I update a private subscription-based member’s only website. It’s a little bit of creativity mixed in with a whole lotta data entry.But who is complaining? It’s a paycheck and you know you need a steady one.

I sputtered along using blasted Cutenews for about a year because that was the CMS in place when I got the job. Updating the member’s site was l a b o r i o u s l y p a i n f u l .

I had to download and crop photos uniformly to fit in a badly designed tables for layout template, then re upload with ftp and link manually. What a pain! There was a lot of back content in the untransferrable CN but I screwed up my courage and switched to WordPress as a CMS and built my own theme. Then I one by one re created new WP Posts for each old CuteNews Post. UGH. I was looking for something that let you transfer data from CN to WP but the one thing that did skipped linkage and images and so what the hell good was that?

At least I did not have to see all those tables anymore,right? Posting became faster but it was still not as fast as it could be. There was great room for improvement to say the least. I really needed to able to upload multiple images to a post and resize them at the same time. Being able to do this would cut my posting time considerably.

Then came WP 2.5.1. There were a few problems: the files restricting access to the member’s site also blocked the flash uploader which was first introduced in 2.5.1 and allowed multiple image uploads. So close but yet so far. Then I found Flexible Upload which allowed me to upload multiple images and resize them at the same time. Along with Vincent Pratt’s Post Templates, updating the site became much faster and more efficient. The joy was temporary: soon after I found the solution, WordPress released quite a few new versions but the author of Flexible Upload dropped the project.

The plugin became depreciated but I stayed with 2.5.1 just to keep using it although I worried that staying with an older version of WordPress would make the member’s site vulnerable. So I finally upgraded to 2.7.1 a few days ago.

Well I’ll Just Find a Plugin That Replaces Flexible Upload. OOPS, There Isn’t One.
I’d done some research prior and I’d seen WordPress.org forum support topics recommending using Scissors instead of Flexible Upload and Faster Image,too. Unfortunately these 2 plugins stilluse the flash uploader which I simply cannot use.Very few people seem to protect or privatize their WordPress installs or at least if there are a lot of people doing it they are not going to the forum to get their problems sorted. None of the fixes in the wordpress.org forum could help me get around this problem. I was stuck. I could either disable the privacy file each time I made a new post (and leave tasty private content open to the general public-do you want me to get fired?) or use the Browser Uploader (super slow!) or use NextGen Gallery. While this is a good option because you can use ftp to upload multiple images- each post would use a unique gallery. 10 new posts a week. 10 new galleries a week. Ugh.

WordPress Gallery or NextGen Gallery?
The native WordPress gallery will automatically associate groups of images to the post – nextGen galleries have to be created, images have to be uploaded and then galleries can be inserted in the post. While it is a good option for anyone not having use of the flash uploader- it added 4 more steps to my streamlined posting routine. I’d gotten it down to a zippy little science and spoiled myself.

Faster Image Insert and Scissors,Maybe?
For the hell of it I installed Faster Image Insert and Scissors and left Flexible Upload activated and I decided to try making new post with all these plugins installed. To my surprise even though there was a nasty php error message printed in the editing page, Flexible Upload still let me upload images. Scissors let me resize them and my Media Settings took care of the rest. Long story short, you can use this plugin with 2.7.1 if you cannot use the flash uploader due to the privacy settings in your .htaccess file or whatever. The options/configurations for Flexible Upload don’t seem to be functional and the php error is ugly & the uploaded images show up in a very wonky way. Take a look:

Here is a fix to get rid of the error message in the post editing page scroll to bottom of the thread . Your settings for the Flexible Upload options page will still be ignored but the uploaded image wonkiness will be gone. Pretty cool! I should state again that Flexible Upload “takes over” the Faster Image Insert area in the post edit page.

Revised File For Fake Grid View

how to get grid view wordpress shopping cart
a shop page suing my fake Grid View:

Very happy to report that you can still “fake” Grid View in Posts/Pages using version 3.12.6 of the WordPress Shopping Cart as the paid for Grid View Module. Most times upgrading a plugin will mean I will have to work very hard to re create the desired effects with the new code. But this time I caught a break and the changes were minimal.

CSS for Grid View-esque Styled Shop Pages in Posts or Pages
These are my suggested styles. You can do what you like just remember that float:left is the main element of Grid View.

/*makes sure things look ok in IE and floats don’t get wonky*/
.homepage_products{overflow:hidden;width:100%;height:auto;position:relative;}

/Product title. !important will override link styling */
.homepage_products a.wpsc_product_title{color:#000!important;font:bold 11px arial!important}

/*adjust widths and heights to fit your product thumbnail */
/* Add padding for more “air” in the boxes, add a border or background color,too. Go crazy!*/
.homepage_products .category_view_product{position:relative;width:155px;height:350px;float:left;margin:8px 8px 2px 6px;}

Download homepage_products_functions.php
*Note* This file was edited April 21st,2009 to correct a validity issue.
[download id=”3″]
FTP to your WordPress Shopping Cart plugin folder and rename the current file: homepage_products_functions_old.php,
if there is a disastrous error you can delete my file and rename the other one, no harm done.
Then upload the edited file, tweak your stylesheet and enjoy!