Cart in divs/css

[PaulGrimshaw]

Hi Guys,

Has anyone converted the cart & xml bit into divs/css? I am starting it, but see that it will take some doing so thought I would ask first!!

Thanks,
Paul.

[Duncan Rounding]

Jonty spent a lot of time converting to CSS - might be worth contacting him perhaps.

[jont]

Paul - it is a fruitless and pointless task.

XHTML and CSS2 allows the use of tables for tabular data - which is exactly what the cart area is. Tables are peculiar in HTML in that they can expand and shrink to fit the data - formatting via CSS to account for all the various product permutations on the site would be a pig in terms of creating it and making it look right for all products and all browsers at all times.

I stripped down all the checkout templates removing the Actinic formatting and added in my own classes to give greater flexibility and design control. There are so may complicated nested templates in the cart area be very wary of using ID's or spanning large sections of code in .classes as you quite easily break the code.

[RuralWeb]

I can also confirm that it is pointless trying - infact I am currently repairing a site that attempted such a conversion!

[PaulGrimshaw]

Getting somewhere ...

Hi Guys,

Two questions...

1. I have managed to rewrite the cart in div/css now (not a table in sight), however, I think I may have removed a line from my page as the Return to Catalog and Save shopping list buttons are not working (go to checkout/update are ok). The error is: "Error: There is no valid input parameters for the script! Check the referencing HTML code!".

2. Anyone know where the quantity/checkbox is coming from? I need to css it...

If you want to see it, click on the link below. You will need to add something to the cart first (the cart link doesnt appear unless something is there), only a couple of items online for testing - use the menu > household > cleaning products.

Thanks,
Paul.

[Bruce]

Paul,

The site seems to be working now as I tried the instructions and all buttons now work as they should.

Regards,

[wjcampbe]

For me it only works in FireFox. In IE7 and Opera 9, the cart column headings and 'table' are hidden under the logo and menu div. Even in FF there is no checkbox to 'remove' an item, so you have several abandoned shopping carts scattered about the aisles...

Don't have time to test in IE6 and Opera 8.5 at the moment.

[jont]

I can see at least 6 tables in the checkout!

Paul - can I ask what are you hoping to gain from making the cart area table free?

[PaulGrimshaw]

Hi guys,

sorry, completly forgot I had left this message. Some answers on comments...

firstly, apoligies for misleading, at that time I only had the cart div'd up. The checkout is nearly finished, should be done in a couple of days if I get time.

I am editing my live site, so that might explain why some people are having trouble seeing it - I keep breaking/fixing it etc. Also, I have been writing for FF, and once working how I want in that app, I go back and make it uncompliant for IE (!). The "tables" look fine to me in IE 6 and FF, but I don't have opera.

The reason that the cart etc is hidden (I am guessing, as I do not use IE7/O) is that I am using a script to detect browser. At the moment if it detects IE6 it displays a different container div to other browsers. This is because I am using position:fixed; to keep the header/menu in place, IE6- doesnt support it. I will sort that out for IE7 etc later.

Incidently, it may also be fixed since last week because I modified the doctype to take it out of quirks mode and into standards. It wasnt working properly before I did that.

The button problem, I think, was down to me hardcoding the button names, it worked fine as soon as I put the netquotevars back in... I couldnt see a single other thing that was different.

as far as the WHY! its a challenge! As I moved to div/css, and have never used either before, its a good learning method, also a lot of people have been mentioning it so I thought I might help someone whilst doing it myself.

Its a lesson .

Thanks,
Paul.

[eighteentee]

Give up whilst you still have your sanity We've been messing around trying to 'standardise' Actinic for some time time to rely as much as possible on CSS / XHTML and it simply got too much. There's so much playing havoc that it doesn't seem worth while going the whole hog and making it complete standards-based. We started using minimal amounts of CSS positioning for the main templates but for the actual cart stuff and checkout it seemed to break quite easily.

In the case of Actinic, tables aren't evil - just a way of life.

Just my 2p worth.

[RuralWeb]

Is there hope in V8?

[eighteentee]

Who knows... We did a feature for .NET mag and would have loved to really go to town making Actinic as web-standards friendly as possible but alas it simply wasn't to be. We had to bail at the last minute and go back to using tables as mucking around with CSS in the more delicate regions of Actinic proved just too much. V8 MUST address standards-based web design in order to stay in the market as I'm sure other developers out there must be working on purely CSS driven carts (I know of one already).

Lets hope and keep our collective fingers crossed that V8 is nice and CSS friendly.

[PaulGrimshaw]

Hi guys, reading everyones posts with interest. I hope v8 is all css'd up too!

Just to let you all know that my checkout is now 95% css and only one table. I am now stuck as I simply can not find where I change the code for the rest of it. I am guessing they are made on the fly and I am not ready to learn pl yet .

of course, i'm only doing things that I require for my particular settings and have not tested it at all with other settings than the ones I am using, but for me atleast, I feel happy that its as good as I am going to get, and only one table on my whole site now.

Its doesnt look finished yet as I am only concentrating on the 'tech' at the moment.

Whilst I am here, anyone know why (even when using default html) does it say I don't have an address in my address book, yet it then shows addresses?

Thanks,
Paul.

locationselecttemplate:
No Tables.
NETQUOTEVAR:LOCATIONCOUNTRY - Not CSS
NETQUOTEVAR:LOCATIONSTATE - Not CSS

order01:
1 Table.
NETQUOTEVAR:SHIPMESSAGE - Not CSS
NETQUOTEVAR:ADVANCEDSHIP - 1 Table & Not CSS
<Actinic:LOCATION TYPE='INVOICECOUNTRY'> - Can not edit change button
<Actinic:LOCATION TYPE='SEPARATESHIP'> - Can not edit change button

order02:
No Tables.
NETQUOTEVAR:PAYMENTMETHODOPTIONS - Not CSS
NETQUOTEVAR:ADDRESSBOOK - Not CSS
NETQUOTEVAR:LOCATIONINFO - Not CSS

[jont]

V8 MUST address standards-based web design in order to stay in the market as I'm sure other developers out there must be working on purely CSS driven carts

Standards compliance does allow the use of tables for tabular data - the cart area is tabular data - it is allowed and more importantly it works as it should in all browsers at all times. Other than personal satisfaction I personally do not see any need to make the check out table free.

Getting the rest of the site table free is a bit of a pain the first time in tracking down where everything is being generated from but once done the next site should be quite simple.

It would be nice if there are some pure CSS themes (except the cart) in the future. These would have to come with a user warning and would need a whole new section on the help forum for help with CSS templates.

The beauty of Actinic is it's out-of-the-box friendliness combined with the ability to rip it apart. CSS is still very foreign to a lot of people who can just about get by with basic HTML or edit templates in WYSIWYG mode in say Dreamweaver - throw in absolute positioning inside relatively positioned nested div's with negative margins, padding and borders (that work differently in every browser) then it can drive people to tears - even experienced coders.

Alas most users want a site up and running to sell their items as quickly and easily as possible - unfortunately tables are still by far the easiest way to implement this