CSS Help wanted to design a cart, in exchange, keep the cart

Hi All,

I am putting together a series of shopping carts, each works slightly differently.

Now there's nothing exciting about that, every second web programmer can put together a shopping cart.

I am trying to approach this from a different angle however. Instead of creating the database and server side code first and then fighting to get the design into the server pages I want to start from the other end.

I am trying to create carts that are easy for CSS professionals to design and once I have got that right I'll create the server side code to accommodate.

In order to do that I have left the server out of the equation totally for the moment and created a mockup in javascript. It functions just like a real shopping cart (almost) but doesn't need a database to run on.

I am looking for help from CSS designers to design the cart. You can do this by changing the CSS files and the HTML file if need be, just leave the javascript as it is.

In exchange you can display the cart on your own site. If you create ecommerce templates then this might be more attractive to visitors than simply displaying a flat page template which doesn't respond to users' clicks.

I have put up the first cart at: http://whitelabelfiles.devprog.com/cowry/site/index.html

The full source code can be downloaded here: http://whitelabelfiles.devprog.com/cowry/cowry.zip
As I put up new carts I'll post them to my blog which is in my signature.

Any help and feedback would be appreciated.

 

Hi ishkey,

Thank's for providing that link. NOP's Free Shopping Cart is a nice piece of work. I have just downloaded a copy and am busy going through it.

The problem is this ...
I am not trying to create a javascript shopping cart, I have only used javascript in the meantime to save me setting up server pages and databases which I would do for any client in the production environment.

The NOP shopping cart does certain things that I am trying to get away from. I don't mean to denigrate their product in any way with the following comments, I am just hoping to do things slighly differently to make design easier ....

Firstly, each of their products is hard coded into the HTML page. That means that the page creator can decide exactly how the product should appear ... GOAL!

However, I want to be able to cater for the scenario in which there are many products residing on a database somewhere which is most often the case in production applications.

Laying out the product with the title in an H2 tag; the image in an image tag with a particular class; and the description in a div tag with the class of 'small' are ALL *design decisions*.

In order to implement these desicions designers either need to give their HTML to coders to implement in PHP files or they have to hack the PHP files themselves to make sure that the right tags are churned out for each product.

NOP Shopping Cart has avoided this problem by making each product hard coded in the HTML file, not feasable in most production applications. I have addressed this by creating a templating system in which the designer specifies which property of each product should go where and creates the HTML tags around it.

The one place in which the NOP Shopping Cart could not get away from hard coding was the managecart.html file. In this file the user is presented with a list of items in their shopping cart.

Now the designer cannot hardcode the list at this point because they have no idea of how many items will be added to the cart. The javascript therefore loops through all the items in the cart and creates a table element in the page with each row representing one item in the cart.

If the designer decided that a table should not be used but rather div's then they would have to hack the javascript code to achieve this. With my templating system the designer can create a template in the HTML itself defining how the list of items in the cart should be displayed.

In short I am following the motto that the javascript (or serverscript, PHP, whatever) should manage adding items to a cart, removing them and displaying them but should have no responsibility for how they are displayed.

If we want a real CSS shopping cart then ugly javascript must leave beautiful HTML alone.

 

Hi ishkey,

Just had a look at the wilmargraphite.net site and I see it uses NOP's Free Shopping Cart. If it does the job then great, why do anything else?

If someone had a database of 1000 products then it would be a bit more of a challenge.

The wilmargraphite site doesn't however; so it would be overkill to set up database servers and php scripts. NOP's Free Shopping Cart does just fine.

Their product is free and you can use it with a clear conscience because they have a paypal link at the bottom of their page http://www.nopdesign.com/freecart/ with which you can donate to their effort if you have benefitted from their product. ... Cyberitas? , do you guys have a comission scheme? ... I think we've both deserved it!

Assume however that you had a database of 1000 products that had to be served up from PHP, ASPX, ASP or one of those other ghastly acronyms ... defining how the products would be displayed would mostly require you to hack the PHP (or other acr) code. I am trying to find a way in which ....

What the designer says in HTML and CSS is LAW even no matter what server side scripts were used to develop the site ....

Having said that, I have not yet downloaded ZenCart or osCommerce, that is definitely the next stop.

Funny you should mention ZenCart though, reminds me a bit about ZenGarden (http://www.csszengarden.com/ ... must read!). Whereas Zen garden allows you to change the CSS without touching the HTML what I want to do is take it one step further and allow designers to change CSS and HTML without touching Javascript or Server Side code.

Thanks for the pointers ishkey ... will do some more homework.