Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Convert OSCommerce 2.2RC2a to table-less CSS


npn2531

Recommended Posts

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.

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

  • Replies 228
  • Created
  • Last Reply

Top Posters In This Topic

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:

Link to comment
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'.

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
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

Link to comment
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.

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
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..

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
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.

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
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

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
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.

Link to comment
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.

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
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.

Link to comment
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

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
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!

Link to comment
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 {

Link to comment
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.

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
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?

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
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.

Link to comment
Share on other sites

The two problems may well be the same issue. The <div> tags to the infobox are in geberated in includes/classes/boxes.php in the cssinfoBox and csstablebox functions. I suspect you have an extra <div> or </div> wrapped in something you have done, or perhaps I have missed a 'if' statement and you have activated the condition to turn on that condition.

 

Their is however a closing </div> tag at the bottom of each infobox in a conditional statement. Look for

$categories = "categories";
if ( $categories == "categories" ) {
echo "</div>";
}

 

If my theory is correct then either adding another </div> at the bottom of the categories box or substracting the one that is there now will 'fix' the issue(s).

Edited by npn2531

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

Thanks for your reply.

 

Here is what I have tried

 

$categories = "categories";
if ( $categories == "categories" ) {
//	echo "</div>";
echo "";	
}

 

The result is the page layout remains ok but the categories box is wrong. Here is the code it outputs now:

 

<div class="infobox">
<div class="infoboxcontents">
<a href="http://server01/catalog/books-c-21.html?osCsid=f3be5d0c6de6029735123b8bb606db5a">Books</a> (20)<br />
<a href="http://server01/catalog/dvds-c-25.html?osCsid=f3be5d0c6de6029735123b8bb606db5a">DVDs</a> (1)<br />
<a href="http://server01/catalog/music-c-26.html?osCsid=f3be5d0c6de6029735123b8bb606db5a">Music</a> (1)<br /></div>

<a href="http://server01/catalog/all_products.php?osCsid=f3be5d0c6de6029735123b8bb606db5a" title="View All Products">View All Products</a></div>

 

Resulting look:

 

categories.jpg

 

I have not changed the categories.php file other than by adding this code:

 

  /* ALL PRODUCTS CODE */
 $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>');

Link to comment
Share on other sites

I struggled with this same issue when I created the design. The solution is most likely going to be manipulating the CSS and the background images that form the box sides, images/tp-boxbody.gif. and the box bottom, images/tp-boxfooter.gif. What is happening is that there is an extra bit of margin or padding between the elements that hold those background images. It is probably going to be a matter of altering, then, a margin or padding in the stylesheet.

 

The relevant CSS in the stylesheet is probably:

 

.infobox{
background-image: url('images/infobox/tp-boxfooter.gif');background-repeat:no-repeat;background-position: bottom;
margin:0px 0px 0px 0px ;padding:0px 0px 10px 0px;
}

.infoboxcontents{
font-family: Verdana, Arial, sans-serif;font-size: 10px; margin:0px 0px 0px 1px;padding:5px 5px 5px 5px;
background-image: url('images/infobox/tp-boxbody.gif');background-repeat: repeat-y;
}

.infoboxheading{
font-family: Helvetica,sans-serif;font-size: 12px;font-weight: bold;color: #333333; padding:5px 0px 6px 5px;margin:10px 0px 0px 1px;    
background-image: url('images/infobox/tp-boxheader.gif');
background-repeat:no-repeat;
}  

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...