Thursday, December 8, 2011

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!


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

3 comments:

Mel said...

Hi, John. Just spent a few minutes on your store looking around at all the neat spinners. Looks great too me! I am hoping Mrs. Santa takes my advice and places an order. Tee Hee!

Nick@brookfieldangler.com said...

For the longest time, your posts would not update in my blogroll and it was beyond frustrating. For whatever reason, something you did, fixed that. You are now an active link on the blogroll!!

John Delaney said...

Mel - Never know about that guy, Santa!

Nick - glad it started working. I messed with Feedburner and then got rid of some Post feed definitions in Blogger Settings.

Time to start cleaning up photo sizing and build summary charts.