[PhilMarkey]

I'm interested in opinions both good and bad. I built this quite a while ago now, and I'm more or less happy with it as it is. But it's always nice to have other people's perspectives.

I sell mainly palm seeds in various sized packets, each species has a varying limited shelf life and of-course the seeds come in various sizes, weights and prices.

The page: http://www.trebrown.com/shop/arecaceae.php

I guess the first criticism would be Why drag and drop? Well, it's my opinion that customers to a shopping site should be able to use it just like they would in a real shop, where they put the items in the cart themselves and can always be able to glance at what they've got in there.

Let me talk you through a few things that might not be obvious at first; Normally you would paginate the results onto 10 or so products per page to save download time. Well, I too have done it for that reason but the main reason it is necessary with this is because you really don't want to be dragging products off the page and you also want to have the cart in view all the time.
Rather than have several sizes of the same product as several items I've made it so that the shopper can configure the packet size themselves before dropping in the cart. This means that every product item box must carry all the the different configurations with it.
The next page in the checkout process calculates the total shipping cost to the chosen destination so that customers can pay for their shopping and delivery in real time. Therefore, the weight per 1000 seeds is sent with the product information, this is then broken down into all the different weights of the packets. Each packet size has two prices (also automatically broken down from a single large packet price) The additional profit is added to the breakdown percentage of each packet price. Seeds which are fresh-in are labeled as "New" for a few days (variable per species), then they become just a line item for a few more days at that same price, but when they come within a few days of their known shelf-life they automatically go on "Sale" at a cheaper price. When they have reached the end of their shelf-life they automatically drop from stock.
All I have to do is weigh 1000 seeds, decide a price for that, then tell the system the shelf-life and the total quantity of seeds I have. Everything else is done for me.
When a customer drags a product into their cart the cart tallies the total cost and the total weight. The cart also deducts that chosen amount of seeds from stock so that nobody else can buy them (useful for when there's only a few left). Any dumped cart gets all its items added back to stock for someone else to buy.
The way the cart works is via AJAX in an iframe. The cart queries the database and updates itself in real time without having to refresh the page the customer is viewing as the item is dropped in. Thus making the shopping experience seamless for the customer. And because the cart is inserted into the current page it will follow you when you jump to other pages like the cycad seeds or banana seeds.

At the end of the day all I get is a paid for order with a packing list. The order also informs me of the packing weight and any other automatically configured information. My packers don't need to think at all, they can get the orders made up and dispatched the same day.

I used to have a system where the currency could be switched between GBP, EUR and USD, but I decided that that is just too much complexity for the scripts and so now those currencies can be set from the link at the top of the page and the page then reloads in that chosen currency.

One last thing - It's all hand coded and is built to web standards, therefore, all standards compliant browsers can use it with no additional plugins required. But as Microsoft IE is not fully web standards compliant it works but it doesn't work anywhere near as well as a true standards compliant browser like Firefox. Try it in several browsers.

Please let me know what you think both good and bad.

Phil

[jaymanson]

Hi Phil,

I like the concept of drag and drop shopping carts and have seen a few good examples of them so far. I think this will be something we'll see on websites more often in the future and as a web designer, it's something I will be keeping up to date with myself. It sounds like you've done a lot of work to get your website doing exactly what you need it to do for your business, so well done on a good job - that's the hardest part of the battle Where I would suggest improvements however would be on design and useability:

• There's nothing which really grabs me about the site - the colour scheme is very subdued and there's way too much text on some of the pages (1275 words in the main text on the shop page!!!) You need to pull people in and you have a maximum of 10 seconds to do it - as it stands, the Back button on the browser stands out more than anything else!

• Pages at times seem to take a long time to load - some up to 30 seconds! Most people won't wait that long and will go to the next result on their Google search. The pages don't seem too heavy so it may be time to find another hosting service.

• No images - it would be nice to see an image of the plants along with the product descriptions. Even in the database so I could have a look for reference. I don't know what a Christmas Palm looks like, but I might buy some seeds on impulse if I saw a nice picture of one

• DON'T ignore IE - whether we like it or not as web designers, it is still the browser most people use so we need to make sure our sites look and perform just as well in IE as they do in FF

So to put it simply - less text, more design / images & more user firendly.

Hope this helps

Jay

[PhilMarkey]

Great comments Jay! I couldn't agree more. Thanks!

First comment - This is what comes from being a web developer and not so much a visual designer. You end up focusing on the inner workings and not so much on the visual appearance.

Comment 2 - It has only recently started running slower. It used to be lightening fast to load the product pages. Nothing significant has changed on the product pages to make them run slow. But I know that it is only pages that must access the database that are slowing down, and it's not because these database are growing, they're look up tables that don't grow much at all. I've talked with the host about this and their response was that there is nothing wrong and nothing has changed. Yes! I think it's time to switch host.

Comment 3 - It would be wonderful to have pictures of all these palms. This is a mammoth job to firstly take the pictures, and as many species are new to cultivation it means travelling to remote corners of the world. I am doing this, but will take time. The pictures will be on separate product info pages linked off the species names on the shopping cart and other pages. Tiny thumbnails of huge palm trees on the cart products wouldn't work, you wouldn't see what it was and it would only slow the download even further.

And your last comment - I don't ignore IE, I've actually spent more time adjusting the site to display better in IE than almost anything else. If you've tried it with both IE and Firefox then you will have noticed the differences. IE is such a difficult browser to build for, I really don't understand why Microsoft can't make a browser that works properly. I had hoped that version 7 would have fixed some of their problems, but it didn't.

[jaymanson]

Originally Posted by PhilMarkey

This is what comes from being a web developer and not so much a visual designer. You end up focusing on the inner workings and not so much on the visual appearance.

Hi Phil,

As a designer, I'm probably guilty of the exact opposite I probably said it a little wrong when I said 'don't ignore IE' - I actually meant it in the 'don't give up on IE' sense. As a browser, I detest it but since I have to design for it day in and day out, I've got pretty good at getting round its quirks. I can see some slight positional issues on your site in IE, and lack of support for position: fixed rears its ugly head (now I'd hoped IE7 would have changed that). Positioning does also seem to break down when I reduce the window size in both browsers, but there's nothing which can't be fixed

Jay

[PhilMarkey]

I'm glad you mentioned the fixed menu Jay. This is something that I'm rather pleased with. Not for any other reason than the fact that I found a very simple way to position it right regardless of browser and screen res., without a massive amount of code.
I really wanted it positioned to the right, and I could have used a table or float it right but that adds all sorts of complications if you want it fixed to not scroll.

The method I use is:
1) Add an empty DIV of one pixel square and floated right positioned inline after the header banner and before the menu. This is then my place finder.
2) Right at the end of the document, loaded onto the page last of all is the javascript that identifies the exact position of the place finder on the page and then adjusts the position of the header and menu to the desired position then fixes it there. This is different in all browsers, markedly so in Opera, IE and Netscape. Therefore, we detect the browser and adjust + / - accordingly.
3) It makes a difference as to where we fix them depending on whether the page is scrolling or not. A short page has no scrollbar and therefore the menu gets fixed 8 pixels to the right of where we want it. And so I set a timeout and then reposition again to adjust for that. But it's never going to be that easy is it? Opera won't detect a difference, and I therefore have to scroll Opera off the page if it's scrollable and then test it for positioning again. A bit of an awkward workaround but nevertheless it works. Well, it works on load, it doesn't work when manually adjusting the screen width as you noticed. I could have built a function to detect that but couldn't be asked really!

There is also an alternate style sheet to remove white space and reduce font size and menu width when loaded with a screen res of 800 x 600 and my above javascript also adjusts the header and menu for low res.

This is my menuplacment.js to view: http://www.trebrown.com/scripts/menuplacment.js