Latest News: (loading..)
Sign in to follow this  
Followers 0
npn2531

Convert OSCommerce 2.2RC2a to table-less CSS

234 posts in this topic

This contribution replaces the OSCommerce html table structure based on <table>'s , <tr>'s, and <td>'s with CSS.

 

http://addons.oscommerce.com/info/7263

 

The programming, the sequence and flow of the pages, and handling of data are otherwise unchanged. See demos at http://www.niora.com/css-oscommerce.php

 

Purpose:

The primary purpose of this conversion is to facilitate web design and enhance search engine optimization.

 

 

What Has Been Done:

The table structure was extracted from the php and replaced with CSS for each page individually. The existing file and page structure was preserved and for each page the php and javascript remain in the same relative places. The difference is that instead of being surrounded by a sea of nested tables, the code will be enclosed by one or two <span> or <div> tags. The preservation of existing programming is such that the shop will function with a mix of converted and unconverted pages.

 

Contributions

Because the existing OSC 2.2RC2a file structure and programming has been left intact, existing contributions on the OSCommerce website should work with this conversion. The challenge will be to locate where in the converted catalog pages to place contribution components.

 

The following contributions have been successfully tested on this conversion.

 

 

Article Manager V1.57

HeaderTags_SEO V3

OT Discount Coupon Codes 3 34

ULTIMATE Seo Uris 5 r141

USPS Methods 4.3.2

XSell 2.6

UL Categories V1.1.2

Edited by npn2531

Share this post


Link to post
Share on other sites

This is terrific! I had thought about doing this but the time involved made me pause.

 

I haven't installed it yet but the demo sites look good. There's one issue I see in Firefox but not in Safari.

 

Firefox displays a small glitch at the bottom of the info boxes (image below).

 

ff-flaw.png

 

The same boxes display perfectly in Safari. Any ideas before I start with the mod?

Share this post


Link to post
Share on other sites

What doctype declaration are you using in the demo's files?

 

In the git source Harald switched from

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

to

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

and it broke the CSS centering trick that many people use.

 

This is a shot in the dark but if you use proper CSS we may be able to use the correct (more strict, lower declaration) The upper declaration forces Firefox to use quirks mode for rendering.

 

Doh! All I needed to do was look at the source. You're using the more strict doctype.

 

No joy there.

Edited by AlanR

Share this post


Link to post
Share on other sites

Sorry for the multiple posts but I'm really pleased to have found this and it's really worth following up on.

 

I just checked your sites on a Windows box in Firefox and it looks fine, no glitches.

 

It's the only Windows machine I have available right now and it's an old XP box with IE 6 so I didn't bother looking with IE on that machine. I can try a different machine later on.

Share this post


Link to post
Share on other sites

OK, I have a little update.

 

I installed Opera on the XP box and it shows the same flaw.

 

This shouldn't be too hard to track down since it works well in most major browsers. Once I get it set up I'll see what I can find in the CSS for the boxes which could cause this.

Share this post


Link to post
Share on other sites

I'm not up on the proper DOC declaration to be using, I appreciate your input on this. I will admit that I just did not spend time on the centering issue in the infoboxes. In the 'original' version of this contribution, the infoboxes are narrower, and the off-center alignment is not as apparent, so I did not notice it. Did you arrive at a solution?

Share this post


Link to post
Share on other sites

I'm not up on the proper DOC declaration to be using, I appreciate your input on this. I will admit that I just did not spend time on the centering issue in the infoboxes. In the 'original' version of this contribution, the infoboxes are narrower, and the off-center alignment is not as apparent, so I did not notice it. Did you arrive at a solution?

The centering trick I mentioned was for centering the entire store by placing it in a div.

 

Using the stricter doctype breaks the entire basic store layout. Quirks mode has to be used for a regular osC install. With your work we're already one step ahead.

 

I'm not quite finished with what I'm doing, I'm merging your changes into the very latest version (as of today) from github so as to get all the latest security and other changes.

 

Once I'm happy with that I'll further tweak it and hopefully find a CSS solution for the infoboxes. I don't think it will be too difficult.

 

I'm actually glad your demo store versions show the glitch in Windows Opera so that Windows users can see it and help find a solution.

 

I think there should be a version 2.5 modeled after what you've done.

Edited by AlanR

Share this post


Link to post
Share on other sites

If you post a brief primer on how I open up the 'maintainers' status on the contributions I'll fix it so you can add in your changes. I see where to add a secondary maintainer but I'm apparently adding the wrong thing as your profile.

Share this post


Link to post
Share on other sites

I think I got opened up now so anyone can add in.

I don't think that's such a good idea.

 

It's been at least a couple years since I spent much time with osC but now I need it.

 

I remember that a big issue was uncontrolled access to contribution maintenance. It gets really confusing if anyone and everyone can add things. I don't mind if you make me a secondary mainainer (or not) but I wouldn't leave it wide open, too many problems crop up. That's why the newer system allows controlled access.

 

I'll send my changes to you if need be.

Edited by AlanR

Share this post


Link to post
Share on other sites

You probably should upload your admin section as well since you have contributions built into the catalog code. I've not finished with the catalog section yet, I'm about 60% done but I had to stop to take care of other things. I'll finish that in the morning and see what impact the contributions have and what else I need to do.

Share this post


Link to post
Share on other sites

I had thought about uploading parts of the admin section. However, there is no difference in how you would install the contributions on the admin side, and I think people would be better off following the instructions in the various contributions.

 

If you have the contributions installed on the admin side, and have made the various database changes for the contributions, then you have to install the contributions on the catalog side or the cart won't run. There are three catalog pages index.php, product_info.php and checkout_payment.php that get a lot of changes with the contributions listed.

 

I thought about providing alternate copies of those pages for folks who install the contributions, and could do that. But really installing the contributions on the catalog side is not that big a mystery, not really that different than installing them on the regular OSCommerce, if you know html, which lots of folks do, and I am not an expert on these contributions.

 

In the long run I decided it was best to just make sure the contributions would in fact work, and provide a working example.

Share this post


Link to post
Share on other sites

I had thought about uploading parts of the admin section. However, there is no difference in how you would install the contributions on the admin side, and I think people would be better off following the instructions in the various contributions.

 

If you have the contributions installed on the admin side, and have made the various database changes for the contributions, then you have to install the contributions on the catalog side or the cart won't run. There are three catalog pages index.php, product_info.php and checkout_payment.php that get a lot of changes with the contributions listed.

OK, I'll work my way through it and see if I run into any puzzling issues.

 

I've been doing file compares to merge the changes into the most recent version and I've come across a few mod code snippets I'll need to figure out. I haven't used some of the contributions you list, I need a really basic store right now.

 

The way I'm doing it is kind of tedious and time consuming although BBEdit is great for this type of thing. I've learned that doing it the hard way pays off at the end because I have a much better idea of what's where and what's going on if I eyeball the code even though I don't fully grok it yet.

 

I might create a vanilla version by stripping out the contributions later on.

 

I should have versioned it before I started but skipped that. I'll version it next.

Share this post


Link to post
Share on other sites

I haven't taken the time to look at the contrib yet, but will do soon!

 

FYI, you should be using any one of the doctypes found here;

 

http://www.w3.org/QA/2002/04/valid-dtd-list.html

 

without regard to what they might break CSS-wise, or HTML-wise.

 

The correct one to use is;

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

or, if you want to be a little stricter;

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

HTH

Share this post


Link to post
Share on other sites

OK, I'll work my way through it and see if I run into any puzzling issues.

 

I've been doing file compares to merge the changes into the most recent version and I've come across a few mod code snippets I'll need to figure out. I haven't used some of the contributions you list, I need a really basic store right now.

 

The way I'm doing it is kind of tedious and time consuming although BBEdit is great for this type of thing. I've learned that doing it the hard way pays off at the end because I have a much better idea of what's where and what's going on if I eyeball the code even though I don't fully grok it yet.

 

I might create a vanilla version by stripping out the contributions later on.

 

I should have versioned it before I started but skipped that. I'll version it next.

 

 

The version provided in the contribution is the vanilla version. Or rather what I did was install the contributions completely, and got them working. Then I took those files and made a conversion set. Then I reinstalled that set on a new unmodified version of OSCommerce to see where I would have problems. I then step by step uninstalled the contributions until the shop worked. In the end I removed the SEO, Header Tags and Coupon contributions. They really need to be fully installed both admin and catalog side.

 

To make a long story short, there should be little of the catalog side of the contributions remaining in the file set, and nothing that gets in the way of running it. If you follow the installation instructions for the contributions I provided links for on the catalog side, you'll find what little bit may be left. Ideally, I think what you are doing is best, just produce a basic set without any of the contributions. I think people who know enough Html and CSS to use a CSS version of OSCommerce will be able to figure out where to place the contributions they choose to use.

Share this post


Link to post
Share on other sites

I haven't taken the time to look at the contrib yet, but will do soon!

 

FYI, you should be using any one of the doctypes found here;

 

http://www.w3.org/QA/2002/04/valid-dtd-list.html

 

without regard to what they might break CSS-wise, or HTML-wise.

 

The correct one to use is;

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

or, if you want to be a little stricter;

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Thanks for the tip. I have read comparisons before, but without quite getting the particulars of what issues will occur with the use of the various versions. Right now the set uses

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

It really is just my best guess to choose this. What I have had the problems with is the difference in how Windows Explorer calculates borders. Specifically how it adds the width of the border to the over width of an element, where other browsers don't. I have given elements an extra little cushion to deal with this, but it would be nice to have a solid solution.

 

HTH

Share this post


Link to post
Share on other sites

George - there really isn't a good solution to that, so the majority of designers use their own "hacks" to get around it. For those reading who are saying "huh", have a hunt in Google, for "box model" and you will see what we need to deal with.

 

Anyway, we hack our way around that, using the correct doctype and making up (or not using) code to make everything display to satisfaction.

Share this post


Link to post
Share on other sites
To make a long story short, there should be little of the catalog side of the contributions remaining in the file set, and nothing that gets in the way of running it. If you follow the installation instructions for the contributions I provided links for on the catalog side, you'll find what little bit may be left. Ideally, I think what you are doing is best, just produce a basic set without any of the contributions. I think people who know enough Html and CSS to use a CSS version of OSCommerce will be able to figure out where to place the contributions they choose to use.

I knew I wasn't seeing much, certainly not as much as I would expect if something like the SEO contribution was installed. It was mostly either commented out or a class which may or may not be used.

Share this post


Link to post
Share on other sites

FYI, you should be using any one of the doctypes found here;

 

http://www.w3.org/QA/2002/04/valid-dtd-list.html

 

without regard to what they might break CSS-wise, or HTML-wise.

 

The correct one to use is;

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I strongly agree, if I'm going to spend time tweaking CSS I want to start under the most compliant doctype.

Share this post


Link to post
Share on other sites

I strongly agree, if I'm going to spend time tweaking CSS I want to start under the most compliant doctype.

 

 

I'll go back and make sure the contribution has

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

in all the pages.

 

I may do what I did to the stylesheet, and fix it so you can change it for all the pages in one place. This would be a simple variable declaration placed in application-top.php.

Share this post


Link to post
Share on other sites

Okay, I had a quick look at this the otherday but decided not to install this just yet.

 

If I understand this correctly, the contribution files have the tables ripped out and the file converted into css format. the style sheet updated accordingly.

 

I have a heavily modified site so i wondered if there it is possible to have some pages using the css and others using the tables until I can correctly get them translated across to be tabless?

 

Thanks

Share this post


Link to post
Share on other sites

I strongly agree, if I'm going to spend time tweaking CSS I want to start under the most compliant doctype.

 

 

The contribution is changed so the doctype can be changed in includes/application_top.php

 

If you look above just above the header in each page I have changed :

 

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

to

 

echo $doctype;

 

and added:

$

doctype='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';

 

near the end of application-top.php where I have the stylesheet declaration.

 

This way the stylesheet declaration can be easily changed.

Share this post


Link to post
Share on other sites

Okay, I had a quick look at this the otherday but decided not to install this just yet.

 

If I understand this correctly, the contribution files have the tables ripped out and the file converted into css format. the style sheet updated accordingly.

 

I have a heavily modified site so i wondered if there it is possible to have some pages using the css and others using the tables until I can correctly get them translated across to be tabless?

 

Thanks

 

 

It is possible. The programming is the same, it's the html that's different.

 

However, Each of the converted pages needs the converted new files includes/template_bottom.php and includes/template_top.php AND the converted includes/languages/english.php, includes/classes/boxes.php, and the converted stylesheet.css.

 

The new stylesheet.css and the includes/languages/english.php are going to conflict. It will not be hard to rename the new stylesheet, upload it as a second stylesheet and change the stylesheet call in the header of each new page to match. The english file I'm not sure about, but all the new english file is going to do is cause the header titles in the existing infoboxes to be a bit screwy.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0