Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Convert OSCommerce 2.2RC2a to table-less CSS


npn2531

Recommended Posts

Thanks very much.

 

Reference is all I need, and all I can use really since I'm building on git source unless you are too.

 

I'll do a compare and see how I match up.

 

My immediate need is satisfied by the CSS conversion which I love and am very grateful for. I was dreading having to work with the tabled MS2 structure but now I'm wondering if a “Web 2.0” version “2.5” can be built.

 

Update / Edit: I reread your post and realized that we are on the same page since you are building off the github master.

 

If anyone wants my version of OSCommerce 2.2RC2a to table-less CSS I'll upload it and make it available.

 

 

I would love to have your copy of osc 2.2rc2a to table less css. Would it be possible for you to post a link to download it?

 

Thanks so much.

lewisqic

Link to comment
Share on other sites

  • Replies 228
  • Created
  • Last Reply

Top Posters In This Topic

George, have you worked with the product listings enhancement mod by spooks with this addon???

 

Also, you said you tested it with some of the SEO contributions.. would you consider uploading those as "versions" of the respective addons

Edited by lindsayanng

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

I considered including the files with the contributions installed. However, I struggle like everyone else installing these complicated contributions, and although I have gotten them to work, I'm sure I don't have them 100%. If I included them, also, it would be difficult if someone ran into a problem with the contribution to know if it was the conversion or the contribution. Plus which contributions should I include?

 

In reality, the contributions are not that different to install on the conversion than the original. The admin side is the same in any case.

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

George, have you worked with the product listings enhancement mod by spooks with this addon???

 

Also, you said you tested it with some of the SEO contributions.. would you consider uploading those as "versions" of the respective addons

 

 

I am not familiar with the products listings enhancement contribution. However in the OSC to CSS contribution, if you look at includes/modules/product_listing.php you'll see that each aspect of the product listing, now has it own class and matching CSS selector in the stylesheet. For example, the product name is the class 'pl-name', the image is the class 'pl-image' and so on. Look in the stylesheet.css for the matching classes. Thus you have virtually unlimited and precise control from the stylesheet for how you wish to design the product listing, eliminating the need for an additional contribution.

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

Looks like a promising contribution!

 

My issue is minor, and rather silly - but do all the files go in the main 'catalog' folder? I see some files that have the same names as those in the 'boxes' and 'classes' folder.

 

I have a fresh install just waiting to be styled, but I need to know where the files go.

 

I am working with the STS template system as well.

 

Please advise as soon as you can.

 

Thanks!

Link to comment
Share on other sites

Looks like a promising contribution!

 

My issue is minor, and rather silly - but do all the files go in the main 'catalog' folder? I see some files that have the same names as those in the 'boxes' and 'classes' folder.

 

I have a fresh install just waiting to be styled, but I need to know where the files go.

 

I am working with the STS template system as well.

 

Please advise as soon as you can.

 

Thanks!

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

Most files are the top level, but yes, the files in the contribution that are in the boxes folder in the contribution go into the boxes folder on your website, and the files in the classes folder in the contribution go into classes folder on your website.

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

Okay. Was a little confusing, because in the download I got, there are no folders, just a list of all files. So, I went through and checked the php for includes/application_top in the code for pages that go in the 'catalog' folder.

 

I checked with an old site I did and found the appropriate folders. I would put the files in appropriate folders in the download - a suggestion. Or maybe it was just me? I don't know.

 

Thanks again!

Link to comment
Share on other sites

Not sure where to pose this question...

 

Anyway, since the osc to css comes with the ul categories contribution, it works great for my menu. However, I have a client that wants all the products in each category to show right under the category name. And then when a user clicks on the next category, the products from the first category hide, and the products for the just-clicked category all show.

 

For example:

 

Category One

Product One

Product Two

Product Three

Product Four

 

Category Two

 

When user clicks on Category Two, the menu shows:

 

Category One

 

Category Two

Product One

Product Two

Product Three

Product Four

 

Where in ul categories would I adjust this?

 

Thanks.

Link to comment
Share on other sites

It sounds like what you are asking can be done from the stylesheet. Look toward the end for this:

 

/* ul_categories.php */
#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	/*float : left;*/
	width : 11em;
}

#nav li { /* all list items */
	/*position : relative;*/
	/*float : left;*/
	line-height : 1.5em;
	margin-bottom : 0px;
	width: 11em;
	background-color:#FFFFFF; 
	border: 0px solid #FFFFFF;		
}


#nav li ul { /* second-level lists */
	position : absolute;
	left: -999em;
	margin-left : 11.05em;
	margin-top : -1.6em;
	background-color :#DEEAF0;
	border: 0px solid #DEEAF0;
}


#nav li ul ul { /* third-and-above-level lists */
	left: -999em;
}

#nav li a {
	width: 11em;
	w\idth : 10em;
	display : block;
	color : #333333;
	font-weight : normal;
	text-decoration : none;
	border: 0px solid #DEEAF0;
	padding : 0.1em 0.5em;
}

#nav li li a {

	background-color :#DEEAF0;

}


#nav li a:hover {
	color : #333333;
	background-color :#DEEAF0;
	border: 0px solid #DEEAF0;
}


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
	background-color :#DEEAF0;
	border: 0px solid #CCCCCC;
}


#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}


/* Menu items with subcategories */	

#nav a.daddy {
background: url(images/arrow_green.gif) center right no-repeat;
}


/* Selected items with subcategories */	

#nav li.selected {
   background-color: #FFCC00; /* puke orange*/
}

 

This is the CSS from the contribution with modifications and adjusting it is a matter of learning how to mess with unordered lists. Personally I find it confusing and stuggle with it, but that is only because I don't have a lot of experience with it, and use a lot of trial and error. Note there are two ways to hide items in ul.

 

display:none;

or place it so far off the page you don't see it as it is done in this contribution with this sort of stuff:

position : absolute;
	left: -999em; 

 

The only other way to adjust what displays or how it displays is to rewrite the code in the contribution itself in :

includes/boxes/ul_categories.php

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

It sounds like what you are asking can be done from the stylesheet. Look toward the end for this:

 

/* ul_categories.php */
#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	/*float : left;*/
	width : 11em;
}

#nav li { /* all list items */
	/*position : relative;*/
	/*float : left;*/
	line-height : 1.5em;
	margin-bottom : 0px;
	width: 11em;
	background-color:#FFFFFF; 
	border: 0px solid #FFFFFF;		
}


#nav li ul { /* second-level lists */
	position : absolute;
	left: -999em;
	margin-left : 11.05em;
	margin-top : -1.6em;
	background-color :#DEEAF0;
	border: 0px solid #DEEAF0;
}


#nav li ul ul { /* third-and-above-level lists */
	left: -999em;
}

#nav li a {
	width: 11em;
	w\idth : 10em;
	display : block;
	color : #333333;
	font-weight : normal;
	text-decoration : none;
	border: 0px solid #DEEAF0;
	padding : 0.1em 0.5em;
}

#nav li li a {

	background-color :#DEEAF0;

}


#nav li a:hover {
	color : #333333;
	background-color :#DEEAF0;
	border: 0px solid #DEEAF0;
}


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
	background-color :#DEEAF0;
	border: 0px solid #CCCCCC;
}


#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}


/* Menu items with subcategories */	

#nav a.daddy {
background: url(images/arrow_green.gif) center right no-repeat;
}


/* Selected items with subcategories */	

#nav li.selected {
   background-color: #FFCC00; /* puke orange*/
}

 

This is the CSS from the contribution with modifications and adjusting it is a matter of learning how to mess with unordered lists. Personally I find it confusing and stuggle with it, but that is only because I don't have a lot of experience with it, and use a lot of trial and error. Note there are two ways to hide items in ul.

 

display:none;

or place it so far off the page you don't see it as it is done in this contribution with this sort of stuff:

position : absolute;
	left: -999em; 

 

The only other way to adjust what displays or how it displays is to rewrite the code in the contribution itself in :

includes/boxes/ul_categories.php

 

 

Thanks for the response.

 

I looked at the source code, and none of the products are shown (in other words, no <li> for products. Even if the CSS says to show sub ULs, it wouldn't matter, because OScommerce isn't generating the list of products under the category. (See bottom)

 

<div id="pagecolumnleft">
<div class="infoboxheading" nowrap="">
<span class="categories">Categories</span> <div class="divider"></div></div>

<div class="infobox">
<div class="infoboxcontents">
<ul id="nav"><li class="cat_lev_0"><a href="http://www.mystore.com/store/category-c-21.html">Category A</a></li>
<li class="cat_lev_0"><a href="http://www.mystore.com/store/category-c-22.html">Category B</a></li>
</ul></div>


</div>

 

Shouldn't the products be showing in the source code, even if CSS is hiding them?

 

<div id="pagecolumnleft">
<div class="infoboxheading" nowrap="">
<span class="categories">Categories</span> <div class="divider"></div></div>

<div class="infobox">
<div class="infoboxcontents">
<ul id="nav"><li class="cat_lev_0"><a href="http://www.mystore.com/store/category-c-21.html">Category A</a>
<ul><li class=""><a href="#">Product A</a></li>
<li class=""><a href="#">Product B</a></li>
</ul>
</li>
<li class="cat_lev_0"><a href="http://www.mystore.com/store/category-c-22.html">Category B</a>
<ul><li class=""><a href="#">Product C</a></li>
<li class=""><a href="#">Product D</a></li>
</ul>
</li>
</ul></div>


</div>

 

Shouldn't the source look something like that?

 

So, if OScommerce isn't generating the URLs for the products, where in the contrib would I find the code to tweak?

Edited by birdrockdesigns
Link to comment
Share on other sites

No, you would not be able to see the subcategories in the dropdown list. The source code viewed in your browser shows the code for only what you can literally see on the screen. If you could figure out how to mouse over the list which would expand the category tree and simultaneously mouse open the source code, then yes you could. The instant you mouse off the list the category tree contracts, disappears, and thus is no longer in the source code.

 

You have to look at includes/boxes/ul_categories.php to see what is going on.

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

Actually, I think you can use the keypad to generate the source code while simultaneously mousing over the categories tree. I'm trying to now, but just can't figure out what the first symbol is across from 'view source' when I mouse over 'view' in my mac.

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 toyicebear, burt and npn2531.

 

I've tried altering the CSS, but no luck.

 

The contribution does quite do what I need here, toyicebear.

 

 

I know there's a show 'all prods' contribution. But really, instead of listing or showing subcategories, I just need to have the products show up. There are 43, and I have only two categories.

 

So...

 

Category 1

Product 1

#

#

#

Product 43

 

Category 2

Product 1

#

#

#

Product 43

 

That's all I need the menu to do.

 

I can do the show/hide accordion jquery thing later. I just need OSC to show the menu as I described. I'm having a hard time trying to figure out where. It seems like such a simple request. lol >_<

Edited by birdrockdesigns
Link to comment
Share on other sites

You're getting quite off topic here.. but checkout this addon

My link

 

Otherwise i would start a new thread because it has nothing to do with the osc css

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

This may or may not be of any use to people, but I have combined this contribution along with a GitHub snapshot as @26/03/2010. I needed to make a few adjustments to this contribution for HTML validation purposes and remove some of the code left over from testing other contributions (X-Sell, Article Manager etc). So now, the contribution validates across all pages (including all account, checkout pages etc) and is compatible with osCommerce's upcoming release.

 

Due to the difference in base code, I haven't 'polluted' this contribution, but attach a link to where I'm further developing:

 

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

 

James

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

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

This may or may not be of any use to people, but I have combined this contribution along with a GitHub snapshot as @26/03/2010. I needed to make a few adjustments to this contribution for HTML validation purposes and remove some of the code left over from testing other contributions (X-Sell, Article Manager etc). So now, the contribution validates across all pages (including all account, checkout pages etc) and is compatible with osCommerce's upcoming release.

 

Due to the difference in base code, I haven't 'polluted' this contribution, but attach a link to where I'm further developing:

 

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

 

James

Great work. I'm going to take a closer look at this this weekend.

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

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

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

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

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

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