New look in the FCS Web store

As the snow piles up in Colorado, due to frigid temps and a bunch of arctic cold fronts, I dusted off the Javascript and HTML manuals and decided to do some rework on the Web Store and reinforce my primitive skills.

First I had to have an idea of what I wanted to change. That was easy, just about any customer facing page could be argued. Then how to change it would be more difficult.

A quick list

• The Store Front
• The Product List page
• The Product Detail page
• Finally, integration of the Hydrophone Records into Detail

There, I had some targets. Other changes would show up once I started moving things around and digging into the manuals.

The Store Front Page is the launching pad for textual categories and pictures of Featured Products, which were normally stagnant and something I usually forgot to update...

The Product List Page - this is the page that shows up when a category is punched on the Store Front or when some savvy user does a Product Search. It's display shows a vertical list of the thumbnails in the category or a list of the customers Search hits.

The Product Detail page  - this is the page where 'Add to Cart' happens. Either for Assortments, individual spinners or Model color selections. Most models have many color variations.

So that's what I wanted to change, now, how'm I gonna do that?

Well, I figured I'd use tables and mouseover=, mouseoff=, and click= in the HTML to trigger some events and functions, that's how. Then Javascript to run some functions like popups.

Tear it all apart and then look for missing quotes, semi-colons, brackets and mis-cased letters, lol.

Here's what it ended up looking like.

Store Front After screenshot

Ended up a condensed table of the product models with links to each Detail Page. A mouseover= event on each image enlarges the model image spinner over on the right and another shows a picture of a fish caught on the model. Try it out, its fun!

Fish Creek Spinners web store

If someone still needs to use the categories to get around here's the Product List After screenshot of the Medium category.

I used a popup function (Window.Open) to enlarge each model, using a mouseover= event to trigger it and a mouseout= event to close each opened window. I used Picasa to create a slideshow of fish pictures sent to me by anglers using the 'Free Spinners for Fish pics' offer. Accurate for at least the photo's that I found with spinners in the picture. That's what plays on the bottom. 

Once you get to the Product Detail After, it looks like this

This one uses mouseover= to display fish caught on specific spinner colors within the model. There is also a default page or two displaying order placement tips and spinners hoping to catch a visiting angler's attention with quips and imagination. The bottom of the page has a flash movie of the models hydrophone recording and a screenshot of its noise wave profile.

Fun Stuff. Stop by and give it a test drive.

Since its hot off the press, I'd appreciate any feedback, suggestions or problems you find. My eyes are glazed over!

New Web Store look