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

Convert OSCommerce 2.2RC2a to table-less CSS

234 posts in this topic

No probs.. thanks for taking the time to put the initial release up. I have made a few amendments to suit my own needs, but a lot of it can be re-applied back into your build..

 

James

Share this post


Link to post
Share on other sites

I have a quick question.. Do you guys have a suggestion for installing this addon for a store that already has a bunch of plugins installed?

 

There is no reason this can't be done.

 

One method would be:

 

1) Make a backup copy of your website in such a way that you will be able to use your HTML editor ( Dreamweaver, Golive, or whatever you use) to cut and paste from the backup copy into the website you are installing the OSC to CSS contribution.

 

2) Install the OSC to CSS contribution on your website.

Once you install the OSC to CSS contribution, the various contributions you have installed now will still be installed on the admin side and your database, but not on the catalog side.

 

3) Identify which catalog pages from the original website, your backup copy, have been altered by your existing contributions. Perhaps you could go back through the instructions for each contribution installed to help identify this.

 

4) Then for each catalog page from the backup copy that has been altered by your existing contributions, open up that catalog page side by side with the same catalog page from your website that now has the OSC to CSS contribution installed.

 

Then using your best HTML and php skills cut and paste the contribution snippets from that catalog page in your backup copy full of tables to the 'same spot' in the catalog page in the tableless copy. It is identifying the 'same spot' or workable spot that will require creativlty.

 

 

The alternative would be to reinstall the contributions all over again from scratch, but I really think that would be much more work. You would still have to 'translate' the contribution snippet locations on the catalog side from table to tableless, and you already have the contributions installed and working on your database and the admin side.

Share this post


Link to post
Share on other sites

No probs.. thanks for taking the time to put the initial release up. I have made a few amendments to suit my own needs, but a lot of it can be re-applied back into your build..

 

James

Share this post


Link to post
Share on other sites

When you have what you like for me to test for putting up on the contribution, post the link, and also post how you like to be identified, link, name so I can give credit where credit is due.

Share this post


Link to post
Share on other sites

When you have what you like for me to test for putting up on the contribution, post the link, and also post how you like to be identified, link, name so I can give credit where credit is due.

I think that was intended for me?? If so, you can grab a copy now.. it's on Google Code, so anyone can take a copy.. http://code.google.com/p/blackgoggles-tableless-osc-plus/downloads/list

 

This is "work in progress" at the minute and part of a larger picture.. i.e a "full" store all the "usual" contributions in place for people to use if they like. I plan to firstly valdiate the admin, then convert this to tableless, then add in some of the more usefull contributions, then to re-work the whole thing so that it feels a bit more Web 2.0.

 

You'll notice that it's in 'RC' state at the moment.. so credits, working notes, finalised framework from the osC team, etc all need to be applied as I make some more progress.

 

No credits are needed for me.. it's all your work to date anyway :thumbsup:

Share this post


Link to post
Share on other sites

Jwilkins,

 

It sounds like then your copy,

http://code.google.com/p/blackgoggles-tableless-osc-plus/downloads/list

has contributions installed? Which ultimately I think folks might prefer, but then that would mean the shop has to be installed with the admin side and database updated.

 

Right now the OSC to CSS is 'contribution-free'.

Share this post


Link to post
Share on other sites

Jwilkins,

 

It sounds like then your copy,

http://code.google.com/p/blackgoggles-tableless-osc-plus/downloads/list

has contributions installed? Which ultimately I think folks might prefer, but then that would mean the shop has to be installed with the admin side and database updated.

 

Right now the OSC to CSS is 'contribution-free'.

Ultimately that's what it will become, pre-built with contributions installed. However, at the moment, the site (built off a snapshot of GitHub 26/02/2010) is free from contributions that require any installation. That being said, it's a 'full site', so you can drop it into your dev environment (recommended) and run it up. It's good to go.

 

In place of some of your code, I added a contribution that removed the need for the infoBox class (infoboxes now use <ul><li></li></ul> and CSS, plus your CSS product_listing enhancement (referenced on the download page at code.google.com)), which had a 'better' feel to it.

 

Of course, this goes beyond what you had in place (some extra code has been removed, left over for Article Manager and X-Sell to make it a more 'stock' site), but for someone adept at 'merge-compare', or for yourself to merge the valid HTML into your contribution, it may act as a usefull addition. If not, then that's cool :)

 

James

Share this post


Link to post
Share on other sites

I appreciate your work. I'm going to have a better look at it this weekend.

 

When I made the conversion, there was a trade-off between doing stuff 'better', such as changing the infoboxes, and keeping it close to the stock site.

Share this post


Link to post
Share on other sites

I appreciate your work. I'm going to have a better look at it this weekend.

 

When I made the conversion, there was a trade-off between doing stuff 'better', such as changing the infoboxes, and keeping it close to the stock site.

I totally agree.. You've done an excellent job at retaining the original look, something which is very hard to do (considering how outdated the stock site looks! ;) ). Visually there won't be much difference apart from the product_listing table and a few "quirks" on the infobox styling (which I haven't got around to fixing just yet), but all the catalog files (and stylesheet) are now W3C compliant and I'm making good progress on the admin end..

Share this post


Link to post
Share on other sites

Hi!

 

there seems to be a problem with this contribution's login page.

When I create a new account and then want to login on the login page, the page refreshes when signing in.

Making it impossible to sign in.

The items in the (guests)cart are deleted

 

I installed this contribution on a vanilla shop. No other contributions installed so far.

 

Any ideas what this might be?

 

 

Kind regards

Share this post


Link to post
Share on other sites

I just checked the contribution file 'login.php'. The programming is the same, as it should be, with 'login.php' on the current download 2.2rc2a

 

Check your installation.

Share this post


Link to post
Share on other sites

Check your cookies or session id settings. That is a common issue that has nothing to do with this plugin/ addon

Share this post


Link to post
Share on other sites

Hi Guys

Just wanted to see whether anyone has had success with changing the amount of columns of the new product module on the index page.

I have changed my from new products to specials but am not having much success in changing the column count.

I cant tell whether its the css version of OSC or my changing it to specials that is making it not work.

Any ideas would be appreciated.

Share this post


Link to post
Share on other sites

Hi Guys

Just wanted to see whether anyone has had success with changing the amount of columns of the new product module on the index page.

I have changed my from new products to specials but am not having much success in changing the column count.

I cant tell whether its the css version of OSC or my changing it to specials that is making it not work.

Any ideas would be appreciated.

 

The column count is superceded in this contribution. The 'column count' is done in the stylesheet. Find in stylesheet.css

.productlisting-odd, .productlisting-even

Note the 'width'. The column count will be however many of that width fits within the width of

#pagecontent 

also in the stylesheet.css

 

For example if the width of

#pagecontent 

is 650px and the width of

.productlisting-odd, .productlisting-even

is 200px, your 'column count will be 3. If you reduce the width of

.productlisting-odd, .productlisting-even

to 150px your column count will be 4, simply because 4 x 150 is less than 650px. You can also play with the margins to space out the columns and reduce the column count without making the columns wider, for example. That's actually the beauty of CSS, you can do so much from a single file, the stylesheet.

Share this post


Link to post
Share on other sites

Thanks, so simple I dont know what I was thinking lol not CSS obviously.

productlisting-new was the one I was after.

Love the contrib by the way so much easier to work with in general.

Share this post


Link to post
Share on other sites

Thanks, so simple I dont know what I was thinking lol not CSS obviously.

productlisting-new was the one I was after.

Love the contrib by the way so much easier to work with in general.

For the new products, in the stylesheet look for:

 

.productlisting-new and .productlisting-new-heading

 

and compare those widths to the width of the #pagecontent.

 

also see:

 

.cssproduct_listing_content and

.cssproduct_listing_item or

Edited by npn2531

Share this post


Link to post
Share on other sites

I just checked the contribution file 'login.php'. The programming is the same, as it should be, with 'login.php' on the current download 2.2rc2a

 

Check your installation.

You're right! I made a mistake...

This problem did occur on jwilkins's version.

Yours works like a charm!

Share this post


Link to post
Share on other sites

ul/li manufacturers list

 

If you use the manufacturers list on your website, you can change this to a ul/li list like the categories list. And apply the same css style to it

 

in includes/boxes/manufacturers.php

Find:

// Display a list
     $manufacturers_list = '';
     while ($manufacturers = tep_db_fetch_array($manufacturers_query)) {
       $manufacturers_name = ((strlen($manufacturers['manufacturers_name']) > MAX_DISPLAY_MANUFACTURER_NAME_LEN) ? substr($manufacturers['manufacturers_name'], 0, MAX_DISPLAY_MANUFACTURER_NAME_LEN) . '..' : $manufacturers['manufacturers_name']);
       if (isset($HTTP_GET_VARS['manufacturers_id']) && ($HTTP_GET_VARS['manufacturers_id'] == $manufacturers['manufacturers_id'])) $manufacturers_name = '<b>' . $manufacturers_name .'</b>';
       $manufacturers_list .= '<a href="' . tep_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $manufacturers['manufacturers_id']) . '">' . $manufacturers_name . '</a><br>';
     }

     $manufacturers_list = substr($manufacturers_list, 0, -4);

     $info_box_contents = array();
     $info_box_contents[] = array('text' => $manufacturers_list);
   } else {

Replace by:

// Display a list
     $manufacturers_list = '<ul id="nav">';
     while ($manufacturers = tep_db_fetch_array($manufacturers_query)) {
       $manufacturers_name = ((strlen($manufacturers['manufacturers_name']) > MAX_DISPLAY_MANUFACTURER_NAME_LEN) ? substr($manufacturers['manufacturers_name'], 0, MAX_DISPLAY_MANUFACTURER_NAME_LEN) . '..' : $manufacturers['manufacturers_name']);
       if (isset($HTTP_GET_VARS['manufacturers_id']) && ($HTTP_GET_VARS['manufacturers_id'] == $manufacturers['manufacturers_id'])) $manufacturers_name = '<b>' . $manufacturers_name .'</b>';
       $manufacturers_list .= '<li class="cat_lev_1"><a href="' . tep_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $manufacturers['manufacturers_id']) . '">' . $manufacturers_name . '</a></li>';
     }

     $manufacturers_list = ($manufacturers_list) . '</ul>';

     $info_box_contents = array();
     $info_box_contents[] = array('text' => $manufacturers_list);
   } else {

Share this post


Link to post
Share on other sites

ul/li manufacturers list

 

If you use the manufacturers list on your website, you can change this to a ul/li list like the categories list. And apply the same css style to it

 

in includes/boxes/manufacturers.php

Find:

// Display a list
     $manufacturers_list = '';
     while ($manufacturers = tep_db_fetch_array($manufacturers_query)) {
       $manufacturers_name = ((strlen($manufacturers['manufacturers_name']) > MAX_DISPLAY_MANUFACTURER_NAME_LEN) ? substr($manufacturers['manufacturers_name'], 0, MAX_DISPLAY_MANUFACTURER_NAME_LEN) . '..' : $manufacturers['manufacturers_name']);
       if (isset($HTTP_GET_VARS['manufacturers_id']) && ($HTTP_GET_VARS['manufacturers_id'] == $manufacturers['manufacturers_id'])) $manufacturers_name = '<b>' . $manufacturers_name .'</b>';
       $manufacturers_list .= '<a href="' . tep_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $manufacturers['manufacturers_id']) . '">' . $manufacturers_name . '</a><br>';
     }

     $manufacturers_list = substr($manufacturers_list, 0, -4);

     $info_box_contents = array();
     $info_box_contents[] = array('text' => $manufacturers_list);
   } else {

Replace by:

// Display a list
     $manufacturers_list = '<ul id="nav">';
     while ($manufacturers = tep_db_fetch_array($manufacturers_query)) {
       $manufacturers_name = ((strlen($manufacturers['manufacturers_name']) > MAX_DISPLAY_MANUFACTURER_NAME_LEN) ? substr($manufacturers['manufacturers_name'], 0, MAX_DISPLAY_MANUFACTURER_NAME_LEN) . '..' : $manufacturers['manufacturers_name']);
       if (isset($HTTP_GET_VARS['manufacturers_id']) && ($HTTP_GET_VARS['manufacturers_id'] == $manufacturers['manufacturers_id'])) $manufacturers_name = '<b>' . $manufacturers_name .'</b>';
       $manufacturers_list .= '<li class="cat_lev_1"><a href="' . tep_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $manufacturers['manufacturers_id']) . '">' . $manufacturers_name . '</a></li>';
     }

     $manufacturers_list = ($manufacturers_list) . '</ul>';

     $info_box_contents = array();
     $info_box_contents[] = array('text' => $manufacturers_list);
   } else {

 

Hey Thanks,

 

I can use this.

Share this post


Link to post
Share on other sites

Hey Thanks,

 

I can use this.

I thought you would ;-)

Perhaps you can add it to the next update?!

Share this post


Link to post
Share on other sites

There's a missing continue button on catalog/checkout_shipping.php

please check your demo sites too.

 

change

<span class="rightfloat" <?php echo tep_image_submit('button_continue.gif', IMAGE_BUTTON_CONTINUE); ?></span>

to

<span class="rightfloat"><?php echo tep_image_submit('button_continue.gif', IMAGE_BUTTON_CONTINUE); ?></span>

 

 

The checkoutbar (line) doesn't seem to show up on my local server on all of the checkout pages.

eg. on the checkout_shipping page the pixel width is set to 60

<div class="leftfloat">
<span class="leftfloat"><span class="checkoutbarcurrent"><?php echo CHECKOUT_BAR_DELIVERY; ?></span><br/>
<span class="leftfloat-silverpixel"><?php echo tep_draw_separator('pixel_trans.gif', '60', '1'); ?></span>
<span class="leftfloat"><?php echo tep_image(DIR_WS_IMAGES . 'checkout_bullet.gif'); ?></span>
<span class="leftfloat-silverpixel"><?php echo tep_draw_separator('pixel_silver.gif', '90', '1'); ?></span></span></span>
</div>

When I view the source it says it has a width of 1 pixel???

<div class="leftfloat">
<span class="leftfloat"><span class="checkoutbarcurrent">Leveringsadres</span><br/>
<span class="leftfloat-silverpixel"><img src="images/pixel_trans.gif" width="1" height="1" border="0" alt=""></span>
<span class="leftfloat"><img src="images/checkout_bullet.gif" border="0" alt=""></span>
<span class="leftfloat-silverpixel"><img src="images/pixel_silver.gif" width="1" height="1" border="0" alt=""></span></span></span>
</div>

Any idea what this might be?

Share this post


Link to post
Share on other sites

What a fantastic addon this is, just what I've been looking for :)

 

I have a few questions which I can hope you can help me with please

 

1) Was a solution ever found for the alignment issue with the infoboxes bottom image? The problem only occurs when there are more than 3 rows of product listings, see:

 

http://www.alpha-clear.com/catalog/index.php?cPath=3_10

 

Less than 3:

 

http://www.alpha-clear.com/catalog/index.php?cPath=3_12

 

The whole page shifts to the left when showing more than 3 rows. I cannot see what the problem is.

 

2) How can I add my own text/links to the categories box, I have tried the following, but it messes the entire layout up.

 

  $info_box_contents = array();
 $info_box_contents[] = array('text' => $categories_string);

 //$info_box_contents[] = array('text' => '<a href="' . tep_href_link(FILENAME_ALLPRODS_SEO) . '" title="' . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES . '">' . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES .'</a>');

 

3) My product descriptions have <ul> <li> & <p> in them, using this addon it ignores all of that code and displays in one block. How can I make it so it doesn't ignore these HTML tags.

 

4) When trying to validate the pages, it shows:

 

document type does not allow element "h1" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

<span class="leftfloat"><h1>Welcome</h1></span>

 

Thanks

Share this post


Link to post
Share on other sites

Do these issues occur across the various browsers?

Share this post


Link to post
Share on other sites

Hi

 

Problem 1 occurs in Firefox aswell but in the opposite manner. In firefox showing 3 rows or more is fine, however showing 2 or less the problem comes back. Strange how IE does the same but opposite.

 

Problem 2 occurs in Firefox aswell. The problem is when I try adding another line to the categories box using the method above, it puts an extra </div> in which screws everything up. I'd just like to add "All Products" link to the categories box.

 

Problem 3 occurs in Firefox aswell, all <p>Blah</p> <ul><li> are ignored and is displayed as one block of text.

 

I haven't tested this in any other browsers.

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