Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

A CSS based Menu Support Thread


gaaalmp

Recommended Posts

great contribution :) tested on a stock osc install, and it does everything i was hoping...

 

except for one thing:

 

my store uses simple template system. it seems that this contribution is not compatible with sts. when i installed it, the images are not generated and the menu links are screwed up. im not sure but it may have something to do with the fact that sts modifies the "column_left.php" by adding a reference to a new page called "sts_inc/sts_column_left.php". of coarse i might be wrong. im going to try a few things to see if i can get it to work but i know very little about php so im not so sure i will be successful. hopefully somebody has solution to this

 

thanks for you help

 

 

also one last thing:

 

i noticed you only have the option to create a 2 level category options. how do you create a 3rd level category option in this menu? when i create one in admin, it just displays the text link with no image. thanks in advance

 

First Point: STS - No idea! I don't use it nor looked into it before.

Second Point: You can create as many levels as you want. You just need to add the corresponding CSS code manually. For example that 3rd level deep category might have a class="item26" (view html source) just add the corresponding CSS code for that class and it will be displayed as configured per your CSS code.

 

Until I try and work out how this could be done automatically then unfortunately it is a manual process.

 

Regards

George

Link to comment
Share on other sites

First Point: STS - No idea! I don't use it nor looked into it before.

Second Point: You can create as many levels as you want. You just need to add the corresponding CSS code manually. For example that 3rd level deep category might have a class="item26" (view html source) just add the corresponding CSS code for that class and it will be displayed as configured per your CSS code.

 

Until I try and work out how this could be done automatically then unfortunately it is a manual process.

 

Regards

George

 

 

Thank you for taking the time to help me with this issue. Im not sure I understand what you are talking about. I understand that I have to add code to the css, the question is what code do I enter where? Please understand I dont know enough about css or php to understand how to add tree menu categories and have them linked to the categories.php.

 

Example of what im trying to achieve:

 

 

Standard tree from this menu:

 

hardware(button)
    |_cd rom drives(item)
    |_graphics cards(item)
    |_keyboards(item)

 

what im trying to create:

 

hardware(button)
    |_cd rom drives(item)
               |_test sub category(subitem)
               |_test sub category2(subitem)
    |_graphics cards(item)
    |_keyboards(item)

 

When I open the file categories.php I see some code that appears to be referencing to the css code. Notice where it says “button” and “item” on lines 27 and 29. These obviously reference to the css. The problem is, that is only two levels deep. What code to I add to add a third category?

 

// original code
  //$categories_string .= '<a href="';

//changed to
//$mark = $tree[$counter]['parent'];

if ($tree[$counter]['parent'] == 0) {
     $mark = "button" . $counter;
   } else {
     $mark = "item" . $tree[$counter]['parent'];
   }


$categories_string .= "<a class=\"$mark\" href=\"";



   if ($tree[$counter]['parent'] == 0) {
     $cPath_new = 'cPath=' . $counter;
   } else {
     $cPath_new = 'cPath=' . $tree[$counter]['path'];
   }

   $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">';

   if (isset($cPath_array) && in_array($counter, $cPath_array)) {
     $categories_string .= '<b>';
   }

 

this is an example of how I tried editing the code with minimal knowledge of php, I tried something like this on line 30:

 

 


if ($tree[$counter]['parent'] == 0) {
     $mark = "button" . $counter;
   } else {
     $mark = "item" . $tree[$counter]['parent'];
   }else {
     $mark = "subitem" . $tree[$counter]['parent'];
   }

 

Obviously I have no idea of what im doing. notice it says “subitem”. This gave me a “Parse error: parse error in C:\xampp\htdocs\catalog\includes\boxes\categories.php on line 30” message. I even added the code to the css which referenced to the new “subitem” .

 

 

.subitem1 {
display: block;
color: #6c6c6c;
font-size: 10px;
text-decoration:none;
line-height: 20px;
list-style: none;
padding:0px 5px 10px 5px;
margin:0px 0px -10px -5px;
width: 180px;
height: 20px;
text-align: center;
background-image: url(images/infobox/itemblue.gif); 
background-repeat: no-repeat;
}

.subitem1:hover {
       display: block;
color: #00ffff;
font-size: 10px;
text-decoration:none;
background-image: url(images/infobox/itemblueh.gif);
line-height: 20px;
list-style: none;
padding:0px 5px 10px 5px;
margin:0px 0px -10px -5px;
width: 180px;
       height: 20px;
text-align: center;
} 


 

but nothing. Just error messages. I hope you can clarify this for me. Just a suggestion, im sure im not the only one trying to figure this out, It would be nice to add a detailed tutorial to one of the next releases of this menu on how to add more next level deep sub categories. If I get this working, I could even write one for you. Thanks in advance.

 

Im still going to try and get this menu to work with sts. Many people use sts. I noticed that bkellum (the creator os sts) commented here. Perhaps he might be able to find a solution. Anyway, if I find a solution I will create an updated tutorial for it.

Link to comment
Share on other sites

Thank you for taking the time to help me with this issue.

 

Don't change anything in the categories.php file. Don't make any php changes. No need.

 

Simple steps:

1) Add the third level menu from the admin panel. (yes this will show up incorrectly)

2) Browse to that category in your web browser. Right click the webpage, click view source or view HTML (whatever the browser caption says). Use CNTL-F find and find the new menu in the source code. Before the menu in the source code there should be a class="xyz" label. Note this down.

**** If you cant understand this step. Please paste only the relevant source code from the menu section only into this thread and I will tell you what is the value you need. ****

3) Open up your stylesheet.css file add in the new code for that new class.

**** If you don't know how to do this then paste in the CSS code you are using for your menu and I will tell you what to use for the third level buttons. ****

 

If you could understand the above steps then you should have it working. If not Ill tell you what to change it presuming you give me the correct outputs mentioned above.

 

Please have a read of the install_guide_READ_ME troubleshooting section, it specifically talks about lining up the CSS to the class values which you can find via "view HTML source" in your browser.

 

Regards

George

 

PS: If the troubleshooting section is not clear then let me know how it can make more sense and ill change it in the next revision. (time/public demand pending)

Link to comment
Share on other sites

 

I'm still going to try and get this menu to work with sts. Many people use sts. I noticed that bkellum (the creator os sts) commented here. Perhaps he might be able to find a solution. Anyway, if I find a solution I will create an updated tutorial for it.

 

Regarding STS, I don't have the spare time to take a look at it and get it working with this menu right now. Yes Bill has commented here before and was going to test drive it (assuming with his STS)?

 

If Bill can get it working and gives it his stamp of approval, then I would be more than happy to have him add it to the add on section.

 

Time pending Ill try and add many types of menus. Also I will have a look into other future enhancements I think are viable for future releases. It comes down to public demand and time, no point if people don't find this contribution valuable.

 

It is quite simple once you get the CSS right as there is no changes required to any OSC files after the initial install. One of the disadvantages I found with other contributions like this is the amount of HTML errors created. As far as my tests show this contribution is error free from a HTML perspective (not that this concerns many people)

 

Regards

George

Edited by gaaalmp
Link to comment
Share on other sites

  • 4 months later...
  • 2 years later...

Hello,

I am installating this contribution, very nice work,

but there's a problem I still can't solve:

the css changes I make don't change the style at all...

and I don't know why, but when viewed with firefox, everything is ugly...

Someone had these problems before me ?

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