Jump to content



Photo
- - - - -

Convert OSCommerce 2.2RC2a to table-less CSS


  • Please log in to reply
233 replies to this topic

#1   npn2531

npn2531
  • Members
  • 1,141 posts
  • Real Name:George
  • Gender:Not Telling
  • Location:Portland OR

Posted 24 February 2010 - 20:34

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...-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, 24 February 2010 - 20:39.


#2   npn2531

npn2531
  • Members
  • 1,141 posts
  • Real Name:George
  • Gender:Not Telling
  • Location:Portland OR

Posted 26 February 2010 - 10:00

This contribution, http://addons.oscommerce.com/info/7266, is a template, or file set that will convert the standard OSCommerce look of the above contribution to a clean 'Apple Gray' style.

A demo can be seen here.

http://www.alpha-clear.com/catalog/

#3   AlanR

AlanR
  • Members
  • 3,711 posts
  • Real Name:Alan Rogers

Posted 28 February 2010 - 14:05

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).

[img]http://idisk.mac.com/simbalala-Public/ff-flaw.png[/img]

The same boxes display perfectly in Safari. Any ideas before I start with the mod?
Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux
Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

#4   AlanR

AlanR
  • Members
  • 3,711 posts
  • Real Name:Alan Rogers

Posted 28 February 2010 - 14:13

Camino and Opera show the same issue.

Camino is actually a little worse.

[img]http://idisk.mac.com/simbalala-Public/cami-flaw.png[/img]
Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux
Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

#5   AlanR

AlanR
  • Members
  • 3,711 posts
  • Real Name:Alan Rogers

Posted 28 February 2010 - 14:22

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, 28 February 2010 - 14:27.

Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux
Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

#6   AlanR

AlanR
  • Members
  • 3,711 posts
  • Real Name:Alan Rogers

Posted 28 February 2010 - 14:34

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.
Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux
Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

#7   AlanR

AlanR
  • Members
  • 3,711 posts
  • Real Name:Alan Rogers

Posted 28 February 2010 - 15:47

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.
Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux
Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

#8   npn2531

npn2531
  • Members
  • 1,141 posts
  • Real Name:George
  • Gender:Not Telling
  • Location:Portland OR

Posted 28 February 2010 - 17:27

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?

#9   AlanR

AlanR
  • Members
  • 3,711 posts
  • Real Name:Alan Rogers

Posted 28 February 2010 - 19:34

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, 28 February 2010 - 19:41.

Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux
Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

#10   npn2531

npn2531
  • Members
  • 1,141 posts
  • Real Name:George
  • Gender:Not Telling
  • Location:Portland OR

Posted 28 February 2010 - 19:54

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.

#11   npn2531

npn2531
  • Members
  • 1,141 posts
  • Real Name:George
  • Gender:Not Telling
  • Location:Portland OR

Posted 28 February 2010 - 20:03

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

#12   AlanR

AlanR
  • Members
  • 3,711 posts
  • Real Name:Alan Rogers

Posted 28 February 2010 - 20:33

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, 28 February 2010 - 20:35.

Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux
Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

#13   AlanR

AlanR
  • Members
  • 3,711 posts
  • Real Name:Alan Rogers

Posted 01 March 2010 - 04:25

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.
Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux
Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

#14   npn2531

npn2531
  • Members
  • 1,141 posts
  • Real Name:George
  • Gender:Not Telling
  • Location:Portland OR

Posted 01 March 2010 - 05:18

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.

#15   AlanR

AlanR
  • Members
  • 3,711 posts
  • Real Name:Alan Rogers

Posted 01 March 2010 - 13:29

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.
Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux
Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)

#16   burt

burt

    Vanquisher of Demons

  • Community Team
  • 9,835 posts
  • Real Name:G Burton
  • Gender:Male
  • Location:UK/DEV/on

Posted 01 March 2010 - 14:30

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...d-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...nsitional.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...l1-strict.dtd">

HTH
IF YOU MAKE A POST REQUESTING HELP...please state the exact version of osCommerce that you are using. THANKS
 
Big Bang Templates for 2.3 osCommerce - 2.3.1 > 2.3.4 - Buy One, Get One Free
 
--
Making your osCommerce better, one module at a time - get in touch.

#17   npn2531

npn2531
  • Members
  • 1,141 posts
  • Real Name:George
  • Gender:Not Telling
  • Location:Portland OR

Posted 01 March 2010 - 14:58

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.

#18   npn2531

npn2531
  • Members
  • 1,141 posts
  • Real Name:George
  • Gender:Not Telling
  • Location:Portland OR

Posted 01 March 2010 - 15:07

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...d-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...nsitional.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...l1-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...ml4/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



#19   burt

burt

    Vanquisher of Demons

  • Community Team
  • 9,835 posts
  • Real Name:G Burton
  • Gender:Male
  • Location:UK/DEV/on

Posted 01 March 2010 - 15:39

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.
IF YOU MAKE A POST REQUESTING HELP...please state the exact version of osCommerce that you are using. THANKS
 
Big Bang Templates for 2.3 osCommerce - 2.3.1 > 2.3.4 - Buy One, Get One Free
 
--
Making your osCommerce better, one module at a time - get in touch.

#20   AlanR

AlanR
  • Members
  • 3,711 posts
  • Real Name:Alan Rogers

Posted 01 March 2010 - 17:25

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.
Local: Mac OS X 10.5.8 - Apache 2.2/php 5.3.0/MySQL 5.4.10 • Web Servers: Linux
Tools: BBEdit, Coda, Versions (Subversion), Sequel Pro (db management)