Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Table Less Layout


Brenden

Recommended Posts

I wanted to get some css practice in, so I took the main osc page and tried to make it without tables. In the limited time I spent on this I got pretty close (Making it exactly the same would only take a little more time) and thought maybe this would be of some use to the people here. The HTML output is much smaller and cleaner. Check it out at http://www.geocities.com/brendenvickery/index.html . Havent been visiting these forums for over a year but back then people were asking for easier ways to change the look of osc. Maybe a version of this could be part of the answer. Anyway take a look.[/code]

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

Sorry didnt change the base href. Try that again. Anyway ive only tested on IE 6.0 NN7 and Opera 7 on Xp. Problem with CSS only as u all probably know is that it can be finicky cross-browser cross-platform without proper testing. Should look better now =p.

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

The goal of this exercise was not to change the look of oscommerce. The goal was to keep the visual design as close to the "out of the box look" while using only xHTML and css(Tableless Layout).

 

xHTML/CSS pros :

- cleaner code

- faster dl time per page

- easier to change the look of a single box

eg. you could change the look of any box by simply changing the stylesheet

- as browser become more standards compliant the use of absolute positioning will make changing the entire look of oscommerce very simple.

- accessability for those with disabilities is increased.

- im sure there are more...

 

xHTML/CSS cons :

- NN4 and IE4 will make this page look like crap. But as time goes on noone will use this sofware (its 8 yrs old now).

- im sure there are more...

 

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

I wanted to get some css practice in, so I took the main osc page and tried to make it without tables.  In the limited time I spent on this I got pretty close (Making it exactly the same would only take a little more time) and thought maybe this would be of some use to the people here.  The HTML output is much smaller and cleaner.  Check it out at http://www.geocities.com/brendenvickery/index.html .  Havent been visiting these forums for over a year but back then people were asking for easier ways to change the look of osc.  Maybe a version of this could be part of the answer.  Anyway take a look.[/code]

 

Good work. I've got MS1 to 4.01 trans which is a step in the right direction - next step is to go strict.

 

I'm pretty sure that the Core Team know the need is there to slim down on the code and go xhtml bu like anything, it's a case of finding time to do these things.

 

I'm willing to work towards getting MS1 xhtml, but can only do it in my spare time of which I have not a lot - so if you do need any help, shout and I'll do what I can.

Link to comment
Share on other sites

The links to the source codes aren't working, and when I take out the "extra" reference, it still can't find the pages :(

[no external urls in signatures please, kthanks]

Link to comment
Share on other sites

Nice, but there will be problems when you try to get that layout to come from php scripts that currently create the layout.

 

My experiment:

http://www.mattiputkonen.net/catalog2/default.php

 

I would think that css-p wont be a real option for osc-before template model.

 

IMHO Currently the boxes.php and product_listing.php are the main files holding the transition back.

 

From the data gathered from my own log files, 95% of visitors could handle very professionally made css-layout. Same for stats from:

http://www.thecounter.com/stats/2002/Decem...ber/browser.php

 

Maybe so type of stylesheet switcher (server or client side) and some type of warning for people with older browsers (ala http://www.webstandards.org/act/campaign/buc/ ).

 

Even the most conservative ones (for example J. Nielsen) have predicted the 4.x generation era to be over by the end of the year.

"Use no way as way, have no limitation as limitation." - Bruce Lee

Link to comment
Share on other sites

Good stuff!

 

But I don't know when such a thing can be offered with osCommerce by standard.

 

The advantages are smaller page sizes and easier design of the layout, but it comes at the cost of showing potential customers where the exit sign is if the layout is not shown properly on their browsers.

 

Are store owners today willing to take that chance?

:heart:, osCommerce

Link to comment
Share on other sites

I guess when considering to move from a table based layout to a css based layout you have to take a look at your customers. What Browsers are your customers using? According to this source the browsers that will break the layout account for 1.13%(IE4 = 0.77% NN4 = 0.36%) of internet users. The use of IE4 and NN4 is steadily declining and will be nonexistant soon enough. Here is what the layout will look like in those browsers. A common practice with css layout is to provide this link only to non standard compliant browsers(NN4 IE4). Store owners may not want to alienate this 1.13% of their potential customers and I can understand that. Soon enough this 1.13% will be 0% and when that day comes I dont see any reason not to go to a full css layout.

 

On a side note - Has anyone tested what oscommerce looks like on a pda, mobile phone or webTV? Its possible the current osc layout breaks and that a css layout would be the solution.

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

But if the message is displayed in a rigth way and rigth tone, maybe the customer could understand that this is not just because of some useless high-tech gimmicks but because of download speed, usability, accessibility and w3c standards.

 

Then there is the chicken and egg problem: if webmasters continue bowing down to the 1-3% of people who use out-of-date browsers, they will never update since they have no reason to.

 

IMHO css-p would compliment the current osc logic perfectly: data in database, html to make Information out of data and css to give the presentation. The way it was meant to be.

 

Some type of fallback for older browsers could be created if needed.

"Use no way as way, have no limitation as limitation." - Bruce Lee

Link to comment
Share on other sites

I have been looking at boxes.php, very clever but its all based around generating nested tables. I have been playing with using a div to replace the existing infoBox tables.

 

Replacing this:

 

<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 class="boxText"><a href="http://www.oscommerce.com/osCommerce22ms1/shipping.php">Shipping & Returns</a><br><a href="http://www.oscommerce.com/osCommerce22ms1/privacy.php">Privacy Notice</a><br><a href="http://www.oscommerce.com/osCommerce22ms1/conditions.php">Conditions of Use</a><br><a href="http://www.oscommerce.com/osCommerce22ms1/contact_us.php">Contact Us</a></td>

 </tr>

 <tr>

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

 </tr>

</table>

</td>

 </tr>

</table>

 

with this:

 

<div id="newInfoBox">
<a href="http://www.oscommerce.com/osCommerce22ms1/shipping.php">Shipping & Returns</a><br><a href="http://www.oscommerce.com/osCommerce22ms1/privacy.php?Privacy Notice</a><br><a href="http://www.oscommerce.com/osCommerce22ms1/conditions.php">Conditions of Use</a><br><a href="http://www.oscommerce.com/osCommerce22ms1/contact_us.php">Contact Us</a>
</div>
[code]
 
and adding the following to the stylesheet
 
[code]
 
#newInfoBox {
	border : 1px solid #B6B7CB;
	background: #f8f8f9;
	font-family: Verdana, Arial, sans-serif;
	font-size: 10px;
	padding-left : 3px;
	padding-right : 3px;
	padding-top : 4px;
	padding-bottom : 4px;
}
 

 

I only have two problems with this.

 

1. It is not realy suitable for boxes with form elements, at least not using the current layout.

 

2. Implementing this in boxes.php is a nightmare, as stated at the start of my post the tableBox class is built around generating tables. I think the best solution would be a divBox class for boxes without forms.

Link to comment
Share on other sites

You guys are right. The only thing holding back osc from easily changing it to a ccs layout is the boxes and product listing. Most of the boxes can be easily changed. Only one I see as a problem(im a begginer with php at best) is categories.php. The categories should be displayed as a list. For example if you were at category 3 subcategory 3 this should be displayed:

<div class="box">

 <h3>categories</h3>

 <ul>

   <li class="unselected"><a href="cat1.php">cat1</a></li>

   <li class="unselected"><a href="cat2.php">cat2</a></li>

   <li class="selected"><a href="cat3.php">cat3</a></li>

     <ul>

       <li class="unselected"><a href="cat3_1.php">cat3_1</a></li>

       <li class="unselected"><a href="cat3_2.php">cat3_2</a></li>

       <li class="selected"><a href="cat3_3.php">cat3_3</a></li>

     </ul>

   <li class="unselected"><a href="cat4.php">cat4</a></li>

   <li class="unselected"><a href="cat5.php">cat5</a></li>

   <li class="unselected"><a href="cat6.php">cat6</a></li>

 </ul>

</div>

In your css you can control so much from just this simple code. Diffent look for different levels of your list. Mouseovers. Background picture. Different look for select and unselected items in each different level. Not only that but it makes more sense.

 

As for forms in divs. Heres the search box done in a div:

<!-- search //-->

<div class="box">

 <h3><?php echo BOX_HEADING_SEARCH; ?></h3>

<?php

 echo tep_draw_form('quick_find', tep_href_link FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get');

 echo tep_draw_input_field('keywords', '', 'size="10" maxlength="30" style="width: ' . (BOX_WIDTH-30) . 'px"') . tep_hide_session_id(); ?> <? echo tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH);?><br><?php echo BOX_SEARCH_TEXT; ?><br><a href="<?php echo tep_href_link(FILENAME_ADVANCED_SEARCH); ?>"><b><?php echo BOX_SEARCH_ADVANCED_SEARCH; ?></b></a>

</div>

<!-- search_eof //-->

(Note- The php is fairly messy... im still learning)

This should work for you.

 

Im going to work on getting a css based oscommerce but may need a little help here and there for the php. If anyone is interestede give me a shout at [email protected]

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

I too have been experimenting with CSS in OSC. I'm very interested in seeing where this thread goes. It would be wonderful to be able to adminstratively switch between the current nested-tables (which is done already :wink: ) and an alternate CSS/div class.

 

I personally refer CSS, but the differences in the way some browsers get the box model wrong makes cross-browser coding a total pain... a stylesheet switcher will be required. And BTW, good job on the pure-CSS conversion!

Ryan Thrash

Link to comment
Share on other sites

I too have been playing with css layouts with and without oscommerce for a couple of years, essentially it isn't all that hard to do. Every time I have a new quotation request come across my desk my fingers begin twitching, my heart begins racing, my head begins spinning, all in anticipation of this being my first "pure" css layout project.

 

Then as I begin to formulate the quotation using the quotation/contract system I wrote eighteen months ago, I get to the section that prints the browsers the site will be compatible with. I sit there and look at the list, get to NS4.7 and my guts sort of shrivel up and I lose my nerve.

 

One of these days I am going to take NS4.7 out of the list of compatible browsers that my quote system puts in to it's output, but until that day, I'll just keep on being a wimp.

Link to comment
Share on other sites

I am working on something very similar, using CSS for positional and presentation information - and i'm not having that much difficulty at all.

 

My personal method is to drop the info/content box function completely. I keep the information array (modified) but then instead of presenting it in an info box, i echo it out as a DIV:

 

new infoBox($info_box_contents);

 

Becomes:

 

echo "<div class="" . BOX_CLASS . "">" . $info_box_contents . "</div>";

 

Not had too many problems with this as yet, and im hoping to launch the site within the next week or so, and i'll be sure to post to this thread when that happens.

Regards, Jay.

Link to comment
Share on other sites

  • 2 weeks later...

Interesting Solution, But it does have one problem.

 

Should you ever change how your infoboxes are designed and wish to change the CSS value associate with them you have to do it at every point in the code where you've replaced infoBox() Function.

 

Beyond that though, I'm glad to see your solution is working for ya.

 

Gizmotech

Link to comment
Share on other sites

  • 2 weeks later...

Thought Id give a little update on this...

 

Ive been working on getting this to degrade better with NN4. Layout works in all the new browsers (no testing with ie5.x/pc or anything mac) and is close to working in NN4. The updated version page size is about 20KB smaller than the osc default.php and this is good for our 56Kb users. Works in NN4.07, NN4.08(side note: i couldnt get the www.oscommerce.com site to work in these 2 browsers), NN4.72, NN7, IE6, Moz1.3, Opera7.

 

Im wondering if there is interest from the development team on this once I get NN4 to be a pixal perfect replica? Would going to a full css layout confuse ppl without experience in it as they will have to understand the code?

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

Hmmm. Just a note that I am noticing some typically frustrating CSS layout problems if you put anything in either of the side columns, like a 200px image. If you shrink your browser to 800x600 or so the layout breaks and the right column drops down below the center column. It seems that anything that is not "relative" in percentage size causes trouble. Still nice work though, I"ll keep playing around.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...