Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Use CSS/XHTML for templates (MS3)


rthrash

Recommended Posts

This is closely related to my post in the disucssion here. Not wanting to violate forum protocol, I won't cross post, but please take a few minutes to view the thread linked to here. The summary:

[*] The current layout/structure can be be accomplished with floats (a CSS 1 property that eliminates the needs for tables for layout purposes)

[*] Doing so will significantly simplify the presentation code

[*] It will look good in Netscape Navigator 4 era browsers

[*] It will open the door to many more potential surfers: cell phone/PDA browsers, screen readers for visually impaired, etc.

[*] It should not be difficult to accomplish, create usability/functional problems, or adversely affect the current development plan

[*] It's where things will be in the near future

Large commercial sites are beginning to realize the benefits of going to CSS-based layouts, and investing to convert to them. ESPN.com and Cingular Wireless come to mind off the top of my head. IMHO, OSC and the shop owners who implement it will gain significantly from proactively adopting a CSS-based site layout.

Ryan Thrash

Link to comment
Share on other sites

  • Replies 83
  • Created
  • Last Reply

The current targets for MS3 include:

- Add Various Secure Requesting Methods To The Payment Modules

- More Use Of Classes

- Template Structure Implementation

 

With the template structure better seperation between business logic and display logic will be achieved. However this is not enough to simply write a XHTML or WAP template. The use of the infoBox and tableBox classes (among other things) means that we are required to use tables. This creates problems when customizing your shop.

 

Currently Id like to be able to display my products something like this:

<div class="product">

 <img src="product1_image.gif" alt="My Product" class="product" border="0"  />

 <h3>My Product1 Title</h3>

 <p>This is the description of my product1</p>

 <p><a href="#"><img src="buy.gif" alt="Add this item to cart" border="0" /></a></p>

 </div>

with this css

div.product {margin: 0.5em;}

div.product img.product {float: left; position: relative; z-index: 10;

 margin: 4px 0 0 0; border: 1px solid #19500c}

div.product h3 {margin: 0 0 0 4px; padding: 0.2em 0 1px 150px;

 border: 1px solid #19500c; border-left: 5px double #19500c color: #fff;

 background: url(headerBG.gif); font-size: 13px;}

div.product p {margin: 0.5em 0.5em 0.5em 160px;}

However at present this cannot be done without rewritting all kinds of code.

 

In this product listing example above it would be preferable to be able to specify:

- What surrounds each product (<div class=product />)

- What surrounds each products element (title, description, price, model, ect.)

 

Im unsure of whether this is part of the template structure implementation plan but is a required step in realising a XHTML/CSS or WAP version of oscommerce.

Perdure - Transparent Object Relational Persistence
Link to comment
Share on other sites

I agree with the proposal. There is no reason that the infoboxes need to rely on tables. They are not providing tabular data for the most part. They could easily be formatted as DIVs and properly outputted. Even if they were outputting tabular data, you can place that information within a table and still have it in a DIV.

 

Besides which is easier to code for:

 

<table border="0" width="160" cellspacing="0" cellpadding="0">

 <tr>

   <td height="14" class="infoBoxHeading"><img src="images/infobox/corner_left.gif" border="0" alt="" width="11" height="14"></td>

   <td width="100%" height="14" class="infoBoxHeading">Categories</td>

   <td height="14" class="infoBoxHeading" nowrap><img src="images/pixel_trans.gif" border="0" alt="" width="11" height="14"></td>

 </tr>

</table>

<table border="0" width="100%" cellspacing="0" cellpadding="1" class="infoBox">

 <tr>

   <td>

     <table border="0" width="100%" cellspacing="0" cellpadding="3" class="infoBoxContents">

       <tr>

         <td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>

       </tr>

       <tr>

         <td align="left" class="boxText"><a href="http://www.oscommerce.com/osCommerce22ms1/default.php?cPath=1&osCsid=34d4c2c3b24a45bcf786d2c230e5cbaa">Hardware-></a><br><a href="http://www.oscommerce.com/osCommerce22ms1/default.php?cPath=2&osCsid=34d4c2c3b24a45bcf786d2c230e5cbaa">Software-></a><br><a href="http://www.oscommerce.com/osCommerce22ms1/default.php?cPath=3&osCsid=34d4c2c3b24a45bcf786d2c230e5cbaa">DVD Movies-></a><br></td>

       </tr>

       <tr>

         <td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>

       </tr>

     </table>

   </td>

 </tr>

</table>

and

<div class="infobox">

 <div class="infoBoxHeading">Categories</div>

 <div class="infoBoxContents"><span class="boxText"><a href="http://www.oscommerce.com/osCommerce22ms1/default.php?cPath=1&osCsid=34d4c2c3b24a45bcf786d2c230e5cbaa">Hardware-></a><br /><a href="http://www.oscommerce.com/osCommerce22ms1/default.php?cPath=2&osCsid=34d4c2c3b24a45bcf786d2c230e5cbaa">Software-></a><br /><a href="http://www.oscommerce.com/osCommerce22ms1/default.php?cPath=3&osCsid=34d4c2c3b24a45bcf786d2c230e5cbaa">DVD Movies-></a><br /></span>

 </div>

</div>

 

huh? Both give almost the same output using the default CSS provided by in stylesheet.css. However not only is the second more compact and fits in with the standards, it is less convoluted and easier to follow.

Link to comment
Share on other sites

There will definitely be more to the template structure indeed than a simple header/footer/3-column layout engine, indeed.

 

Each type of page, for instance, may need a different type of layout. For example, a checkout page might need the bare minimum of "distractions", the main page might need to be loaded with news/featured items/offers, and the product pages another layout entirely. In fact, different categories might need their own layout entirely.

 

With that said, there's no reason they shouldn't be built with CSS and XHTML.

Ryan Thrash

Link to comment
Share on other sites

Great point Wayne and glad to see us on the same page.

 

Tables are not inherrently evil or wrong; they're ideal for presenting tabular data, like a spreadsheets or spec lists. That's what they were intended to be used for in the HTML world. Strictly semantically speaking, they were never intended for visual layout, but some clever folks figured out that they would work that way...

 

It's sort of like being able to use a surgical laser to cut a steak. It certainly will work, but it's not its intended use or the most efficient way to have a good meal.

Ryan Thrash

Link to comment
Share on other sites

So not only is PHP and HTML a requirement of osCommerce, but CSS too?

 

I'm not only thinking of store owners, but also those making contributions.

 

Now is a good time to add a Amazon referral page for "our recommendations" :D

:heart:, osCommerce

Link to comment
Share on other sites

So not only is PHP and HTML a requirement of osCommerce, but CSS too?

Right now all 3 of these skills is required. If all of the HTML was taken out of the php(eg. infoBox class) then you only need HTML and CSS skills to customize your shop. Basic sites templates could be made for a XHTML table based layout, a XHTML tableless layout, WAP whatever. Choose the template you are most comfortable with a go.

 

Now is a good time to add a Amazon referral page for "our recommendations" :D

How about a book on CSS/tableless layouts? :lol: Seriously, PM me the book you want. :D

Perdure - Transparent Object Relational Persistence
Link to comment
Share on other sites

So not only is PHP and HTML a requirement of osCommerce, but CSS too?

 

I'm not only thinking of store owners, but also those making contributions.

 

That's a really valid point, but I think if anyone capable enough to figure out how to write a mod and they look at the code for a sample infobox, they'll catch on pretty quickly. Also, they'll have to most likely update their code any way when the admin and catalog functions merge. Not to mention the fact that I think I recall somewhere a few statments by the core team made about no promises of contributions made for one version working in subsquent releases.

 

Then again, I could be experiencing a <table><tr><td><td><tr><td><table><tr><td> "tag soup" induced hallucination :D

Ryan Thrash

Link to comment
Share on other sites

Basic sites templates could be made for a XHTML table based layout, a XHTML tableless layout

 

I don't think you can mix and match - sticking with the infobox example, it either has to be with tables or with CSS, not both (contribution wise).

 

WAP whatever.

 

So from PHP to XHTML to WAP - why not just PHP to WAP? :)

 

How about a book on CSS/tableless layouts?  :lol: Seriously, PM me the book you want.  :D

 

I meant a list of books where store owners and contributors could take a look to purchase CSS know-how, PHP, etc :D

:heart:, osCommerce

Link to comment
Share on other sites

That's a really valid point, but I think if anyone capable enough to figure out how to write a mod and they look at the code for a sample infobox, they'll catch on pretty quickly. Also, they'll have to most likely update their code any way when the admin and catalog functions merge. Not to mention the fact that I think I recall somewhere a few statments by the core team made about no promises of contributions made for one version working in subsquent releases.

 

I think this is a very big step to take - it would need to be done for a major release (eg 3.0), or released separately as a CSS edition for the releases until then (eg, 2.2 and 2.2CSS).

:heart:, osCommerce

Link to comment
Share on other sites

I'm definitely up for working on the CSS edition, especially if it's an "officially recognized and sanctioned" effort. Doubly so if we have to wait until 3.0 (which will be "ready when it's ready..." :wink:).

 

Further, I'm confident that enough people (and quite a few believers at that) who desire to truly optimize their and their clients' online businesses would jump at the opportunity for a more simple to customize, more search engine friendly and faster loading store.

 

Where do I sign up? I'm ready! :D

Ryan Thrash

Link to comment
Share on other sites

Whatever has been done now will have to be updated again once the template structure is implemented for MS3. I guess when MS3 is out, a CSS edition of it can also be made available.

 

Whether it becomes official or not depends on what the community and rest of the team say :)

 

The only issue I see with having two releases is the maintenance involved.

 

To make that easier, it has to be decided to keep the html as plain html, or to have both in xhtml.

 

Is it a problem if html is kept? (have html->tables and html->css)

:heart:, osCommerce

Link to comment
Share on other sites

Basic sites templates could be made for a XHTML table based layout, a XHTML tableless layout

I don't think you can mix and match - sticking with the infobox example, it either has to be with tables or with CSS, not both (contribution wise).

Maybe it could be though...

Say the current table based structure was reduced to something like this:

<div>This is the banner</div>

<table>

 <tr>

   <td>This is col 1</td>

   <td>This is col 2</td>

   <td>This is col 3</td>

 <tr>

</table>

<div>This is the footer</div>

and the css version was something like this:

<div>This is the banner</div>

<div>This is col 1</div>

<div>This is col 2</div>

<div>This is col 3</div>

<div>This is the footer</div>

None of the main parts get changed by contributions, I dont think. The info boxes for both versions would be made with <div />'s (See Wayne Lukes Post) as would any other contribution. Output would be the same whether HTML4.01, XHTML table based, or XHTML tableless. The only thing that changes in a css layout is using floats on the main divs. Everything else should stay the same.

 

WAP whatever.

So from PHP to XHTML to WAP - why not just PHP to WAP? :)

:D Just added WAP in there as a future possibility. If you have control over the opening and closing elements when outputting something a WAP template could easily be made.

For example with product listings if a product listing template was made like this for the css layout:

<div class="product">

 <h3><?php echo $product_title; ?></h3>

 <img href="<?php echo $product_image; ?> />

 <p><?php echo $product_description; ?></p>

</div>

And this was called everytime a product was displayed. You could easily make a WAP template by only changing the HTML tags to WAP tags. I know this involves changing alot but there are benefits.

Perdure - Transparent Object Relational Persistence
Link to comment
Share on other sites

To make that easier, it has to be decided to keep the html as plain html, or to have both in xhtml.

 

Why? XHTML 1.0 Strict is backwards compatible with HTML 4.01. There isn't a browser in the world that cannot render it. If people are still hungup about Netscape 4.X, they have a problem. The browser is almost 8 years old now. No other piece of software on a workstation would be given such a long lifespan. With newer computers shipping with modern browsers, the issue is becoming null and void.

Link to comment
Share on other sites

To make that easier, it has to be decided to keep the html as plain html, or to have both in xhtml.

 

Is it a problem if html is kept? (have html->tables and html->css)

HTML or XHTML wouldnt make a difference for either. XHTML is basicaly HTML with rules enfored.

eg. <img src"#"> is valid HTML but not valid XHTML

<img src="#" /> is valid XHTML and HTML

 

<ul>

<li>List item 1

</ul>

above is valid HTML but not valid XHTML

 

<ul>

<li>list item 1</li>

</ul>

above is valid HTML and XHTML

 

Personnally Id rather see both as valid XHTML strict but it makes no difference.

Perdure - Transparent Object Relational Persistence
Link to comment
Share on other sites

Contributions compatibilty :)

Perhaps releases up to 3.0 can be HTML, and 3.0+ can be XHTML.

Actually I dont think that would be a problem either. If you changed the DTD to XHTML strict right now it would still display the same on all browsers. It just wouldnt validate.

 

The default layout doesnt validate as HTML 4.01 anyway. There are some proprietary elements in the body tag.

Perdure - Transparent Object Relational Persistence
Link to comment
Share on other sites

Actually I dont think that would be a problem either. If you changed the DTD to XHTML strict right now it would still display the same on all browsers. It just wouldnt validate.

 

The default layout doesnt validate as HTML 4.01 anyway. There are some proprietary elements in the body tag.

 

That's right, will be corrected in time for 2.2 :)

 

Though, HTML itself is flexible whereas the nature of XML/XHTML is to strictly follow a ruleset.

 

I don't think a combination of both will achieve anything.

:heart:, osCommerce

Link to comment
Share on other sites

Actually I dont think that would be a problem either. If you changed the DTD to XHTML strict right now it would still display the same on all browsers. It just wouldnt validate.

Though, HTML itself is flexible whereas the nature of XML/XHTML is to strictly follow a ruleset.

I don't think a combination of both will achieve anything.

Youre right a combination will achieve nothing. What I meant was that contribution compatibility(HTML -> XHTML) shouldnt be a problem if oscommerce was changed to XHTML. A contribution written in HTML would still display fine in the XHTML version. There would be a problem with any contributions that used the infoBox tableBox ect classes(If these do get an overhaul) but that shouldnt stop progress.

Perdure - Transparent Object Relational Persistence
Link to comment
Share on other sites

Anyone interested in working on the CSS conversion please PM me with your contact information. E-mails and phone numbers, please, if possible. I'll do whatever is neccessary to make this the most efficient and pain free to offer along side the MS3 release with the templates.

 

Harald, if there's anyting that would make this a 100% comfortable proposition for you and the core team, please let me know via PM. It would also be handy to know the most efficient manner to hand off the code, set up a CVS branch or seperate CVS server, etc. It really will be no big deal, though, to start implementing a CSS layout and shouldn't cause problems for the contributions. It doesn't touch the PHP/logic... just the way everything spits out the HTML. I'm confident you'll be very, very pleasantly surprised. More like "that's it?", actually. :D

Ryan Thrash

Link to comment
Share on other sites

Has it been decided whether to go with both HTML or both XHTML?

 

If this is going to be done a rewrite of the way the default layout is outputted would also have to be done.

 

Also it needs to be decided whether the css layout should be done to support NN4 or not.

Perdure - Transparent Object Relational Persistence
Link to comment
Share on other sites

Proper use of floats will result in a version that will work in NN4. Even though its a small percentage of users, its still important not to alienate them if we can avoid it. And we can.

 

As far as XHTML, I say yes. If there's legacy code that isn't changed at first, it can be caught up as soon as possible. Like you pointed out, though, it's just a more strict way of writing HTML, so it's no biggie...

Ryan Thrash

Link to comment
Share on other sites

As far as XHTML, I say yes. If there's legacy code that isn't changed at first, it can be caught up as soon as possible. Like you pointed out, though, it's just a more strict way of writing HTML, so it's no biggie...

 

Why not use HTML atleast until 3.0 is made?

 

This will avoid:

 

* contributors making the same contribution twice

* people asking questions on the forums why their pages dont show correctly when they install contributions and mix html with xhtml

 

Harald, if there's anyting that would make this a 100% comfortable proposition for you and the core team, please let me know via PM.

 

A proposal will be good that addresses the issues discussed in this thread. [it can then be added to the Wiki :)]

:heart:, osCommerce

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...