11 replies to this topic

[contramundi]

Hi there,

i was hoping someone could help me out a bit with the following:

i'm trying to create a webshop with a horizontal menu in the header section of the website above the breadcrumb trail. Wich when you have selected a main category, will show the subcategories below that,

the idea is to get a similar sort of menu as on http://www.112ink.nl

As the 112ink website is made on OSC 2.2, with a STS custom made layout, i can't figure out wich code does that, or where the code is located to begin with

Now i'm thinking a bit simplistic, but is there for example a code i could use to call upon the childcategories from a certain subcategory if its selected in the menu?

My header.php code looks as follows:

(i know its messy, gonna try and get rid of the table tonight/tomorrow)

<?php
  if ($messageStack->size('header') > 0) {
	echo '<div class="grid_24">' . $messageStack->output('header') . '</div>';
  }
?>
<!-- Main Table 1 logo/searchbar/klantinfo e.d.-->
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="50%">

<!-- Table on left side -->
<table width="75%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td><div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></div></td>
</tr>
</table>
<!-- END -->
</td>
<td width="50%">

<!-- Table on right side -->
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td align=right>
<?php echo '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image (DIR_WS_IMAGES . 'cart.png') . '</a>'; ?>
<?php echo '<a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING) . '">' . tep_image (DIR_WS_IMAGES . 'checkout.png') . '</a>'; ?>
<?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT) . '">' . tep_image (DIR_WS_IMAGES . 'login.png') . '</a>'; ?>
<?php
  if (tep_session_is_registered('customer_id')) {
echo '<a href="' . tep_href_link(FILENAME_LOGOFF) . '">' . tep_image (DIR_WS_IMAGES . 'logout.png') . '</a>';
	}
?>
</td>
</tr>
<tr align=right>
<td>  <div id="searchbox">
<?php echo tep_draw_form('search', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get') . tep_draw_hidden_field('search_in_description','1') . tep_draw_input_field('keywords', '', 'size="10" maxlength="100" style="width: ' . (130) . 'px"') . ' ' . tep_hide_session_id() .'<input type="submit" name="Submit" value="Search">' . '</form>';

?>
  </div></td>
</tr>
<tr align=right>
<td><a href="advanced_search.php">Geavanceerd zoeken</a></td>
</tr>
</table>
<!-- END -->
</td>
</tr>

</table>

<!-- END OF MAIN TABLE 1-->
<table border="0" cellspacing="0" cellpadding="0">
<tr align="left">
<td><img src="./images/menu_start_empty.png"></td>
<td><img src="./images/menu_red_start.png"></td>
<td>
<a href="index.php?cPath=1"><img src="./images/brother_new.png"></></a>
</td>
<td><img src="./images/menu_spacer.png"></td>
<td>
<a href="index.php?cPath=2"><img src="./images/canon_new.png"></></a>
</td>
<td><img src="./images/menu_spacer.png"></td>
<td>
<a href="index.php?cPath=3"><img src="./images/epson_new.png"></></a>
</td>
<td><img src="./images/menu_spacer.png"></td>
<td>
<a href="index.php?cPath=4"><img src="./images/hp_new.png"></></a>
</td>
<td><img src="./images/menu_spacer_2.png"></td>
<td>
<a href="contact_us.php"><img src="./images/contact_new.png"></a>
</td>
<td><img src="./images/menu_spacer.png"></td>
<td><a href="conditions.php"><img src="./images/voorwaarden_new.png"></a></td>
<td><img src="./images/menu_blue_end.png"></td>
</tr>
</table>

<div class="grid_24 ui-widget infoBoxContainer">
  <div class="ui-widget-header infoBoxHeading"><?php echo '&nbsp;&nbsp;' . $breadcrumb->trail(' &raquo; '); ?></div>
</div>

<?php
  if (isset($HTTP_GET_VARS['error_message']) && tep_not_null($HTTP_GET_VARS['error_message'])) {
?>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
  <tr class="headerError">
	<td class="headerError"><?php echo htmlspecialchars(stripslashes(urldecode($HTTP_GET_VARS['error_message']))); ?></td>
  </tr>
</table>
<?php
  }

  if (isset($HTTP_GET_VARS['info_message']) && tep_not_null($HTTP_GET_VARS['info_message'])) {
?>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
  <tr class="headerInfo">
	<td class="headerInfo"><?php echo htmlspecialchars(stripslashes(urldecode($HTTP_GET_VARS['info_message']))); ?></td>
  </tr>
</table>
<?php
  }
?>

I hope someone can help me make a submenu between the category menu and the breadcrumb trail, doesn't need to be anything fancy as long as it would for example show in text " Subcategory 1 | Subcategory 2 | etc"

Kind regards,

Robert

[multimixer]

There are addons available that will create an unordered list from your category tree, that you can style then with css or add some js etc

What you have right now is wrong, you can't create links in plain html manner, you need to use the tep_href_link() function. Similar issue here

[contramundi]

multimixer,  i've already said above that i'm gonna switch the code to tep_ functions tonite / tomorrow, the html code including the table part is hurting my eyes

i couldn't find any addon that would do what i wanted it to do, at least not for OSC 2.3 or i just might have overlooked, i've been looking around for something like it for a few weeks now, but most of the things i seem to find are last updated in 2006 to 2008, wich isn't bad in general, unless your a bit of a newbie like me and the coding of 2.2 is in some ways a huge difference of that of 2.3)

its not the main menu part i'm currently informing about though, its about a way to create a line with the submenu's in a selected category.

I've looked at the "similar issue" you've linked to, but i'm afraid i have to say that i already read through that before posting my own question, apart from that, apart from that, he's talking about a dropdown menu, and i don't want a dropdown menu, but a static one (if thats the correct way to put it)

i hope the attached screenshot will explain my question a bit better.

the menu in that screenshot is not a dropdown menu, when you click the main category, in this case "inktpatronen" or "toners" the line below that will switch the subcategories according to the selected parent.

Once i've gotten the html menu transformed into a menu using tep_href_link, how would i get the subcategories to show then? and let them switch based on the main categorie selected?

Kind regards,

Robert

Attached Files

•  menu.png   7.97K   9 downloads

Edited by contramundi, 06 July 2012 - 02:58 PM.

[14steve14]

Did your search reveal this  http://addons.oscommerce.com/info/8155/v,23 mine did. I am sure it will be possible to make it look like you want as its css based.

[multimixer]

Well, before you said that you plan to change the tables, so I thught it's worth to mention that your links are wrong too, anyway, if you know this, then it's fine.

Startpoint for each menu is an unordered list, doesn't matter if you want it to drop down, or to be in a line, circle, or whatever: You need a unordered list for this

<ul>
  <li> abc
	<ul>
	  <li>ert</li>
	</ul>
  <li>def</li>
</ul>

Having such a list, you can then style it with css in any way you want,there are many tutorials over the net and no difference to plain html/css

Steve just posted a link to an addon, there are more

Edited by multimixer, 06 July 2012 - 03:12 PM.

[contramundi]

steve, that addon did come up in my search, but i couldn't figure out how to edit it so it wasn't dropdown but more or less static.

Multimixer, i still don't quite get it though,

i didn't know about the list, but about the tep_ i did, however, does it mean if i put all the categories and subcategories in an unordered list they will apear when i click on a main category?

Edited by contramundi, 06 July 2012 - 03:21 PM.

[multimixer]

contramundi, on 06 July 2012 - 03:17 PM, said:

does it mean if i put all the categories and subcategories in an unordered list they will apear when i click on a main category?

Well, yes and no

The list is just the base to start working on. How this list will appear, depend on the styling. There are really many tutorials and ready scripts all over.

You need to go on in 2 steps

1) You get all your categories and products in such a list. For this you can use any addon (like the linked one), doesn't matter how the menu it creates look like. All you need from this addon is the list. If you get this (unstyled) list to your screen, you can go on

2) Search the net for the menu type you want. This is not strickly osCommerce anymore, so you can borrow anything you'll find on the net. You will see that all that menu scripts and tutorials are based on a list, but this you have then already from step 1

[contramundi]

ok,

so if i understand correctly

1) install a menu addon, like the one that was linked,
2) pull the unordered list from the addon and use that as a basis.

However, can't i just go on and about and use for example cPath=1 - 2 - 3 - etc for the main categories, and cPath=1_22 / 1_23 / 2_22 / 2_23 for the subcategories? Because from what i could tell oscommerce is pretty simple in the naming of categories and its subcategories.

Using an unordered list would mean i have to manually add the categories/subcategories anyway, and knowing how OSC handles the naming would make it a bit quicker.

I'll look into all this as quickly as possible, but first on the list is redesigning the header i think i got some sort of code from your site a few days ago concerning a picture as a background wich i also like to implement in this new site, makes the banner itself a bit more sexy , apart from that i still have some links to alter as well.

So far thanks for the help, its a lot clearer to me at this point. I'll get back to you as soon as i've done some tinkering with the code and the list.

btw, the accordion menu for 2.3, would that addon do the trick as well? (http://addons.oscommerce.com/info/7847)

[multimixer]

@contramundi

If you want to type in each category manualy, then yes, thats also possible, a bit inflexible I would say, but possible yes.

What you need to do, regarding step (1) - the list creation, is exactly the same as on the "similar topic" linked above

Only difference is then step 2, since you need a different styling

The accordion menu you found creates the necessary structure for accordion, that's a bit different than a plain unordered list

[contramundi]

using the addon linked by steve only messes things up badly for me, the category box shows up in the header, but the looks of it are the same as when it was still in the left column. Not to mention that its infobox header is streched across the screen in 3 rows+

Also using an unordered list doesn't quite make sense for me for the menu i'm using for my main categories, would make sense for the subcategories though, and then use the css to specify the layout of the subcategories. As i've got no intention to actually make them fancy, just a list of text with "SUB1" | "SUB2" | etc.

<ul>
<li><?php echo tep_image(DIR_WS_IMAGES . 'menu_start_empty.png')?>

<li><?php echo tep_image(DIR_WS_IMAGES . 'menu_red_start.png')?>

<li><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . '1') . '">' . tep_image (DIR_WS_IMAGES . 'brother_new.png') . '</a>'; ?>

<li><?php echo tep_image(DIR_WS_IMAGES . 'menu_spacer.png')?>

<li><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . '2') . '">' . tep_image (DIR_WS_IMAGES . 'canon_new.png') . '</a>'; ?>

<li><?php echo tep_image(DIR_WS_IMAGES . 'menu_spacer.png')?>

<li><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . '3') . '">' . tep_image (DIR_WS_IMAGES . 'epson_new.png') . '</a>'; ?>

<li><?php echo tep_image(DIR_WS_IMAGES . 'menu_spacer.png')?>

<li><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . '4') . '">' . tep_image (DIR_WS_IMAGES . 'hp_new.png') . '</a>'; ?>

<li><?php echo tep_image(DIR_WS_IMAGES . 'menu_spacer_2.png')?>

<li><?php echo '<a href="' . tep_href_link(FILENAME_CONTACT_US) . '">' . tep_image (DIR_WS_IMAGES . 'contact_new.png') . '</a>'; ?>

<li><?php echo tep_image(DIR_WS_IMAGES . 'menu_spacer.png')?>

<li><?php echo '<a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . tep_image (DIR_WS_IMAGES . 'voorwaarden_new.png') . '</a>'; ?>

<li><?php echo tep_image(DIR_WS_IMAGES . 'menu_blue_end.png')?>
</ul>

only makes a long list of images with bullets before them,

its easier and makes more sense to me to put that part of the menu not inside an unordered list, as its just a bunch of images

For the subcategory menu, i'm giving up for the time being, as the only way i can figure out how to show the subcategories is to make a list manually for each main category, and then i still don't have a clue how to make them apear seperately from eachother, depending on what main category is clicked.

Edited by contramundi, 06 July 2012 - 07:20 PM.

[14steve14]

Did you add the css to your stylesheet. That is what makes the look horizomtal.

[contramundi]

steve,

no at this point i'm not using css and <ul>, this because the code withouth it does exactly the same as when i use the css / <ul> combination, so in my eyes at this point its a bit of obsolete coding.

i might put the menu in a <ul>  and add css for it once i figure out the subcategory thing. But now, use code to first tell the images they are in a vertical list with bullets, and then use some more code to tell them they should be aligned horizontal withouth bullets, while just using the images without a <ul>  gets exactly the same result but with a lot less coding required,

now, somewhat back to the main question at hand,

as stated previously, i'm a huge noob when it comes to actual coding, and creating php myself, but i was thinking something along the lines of:

<?php if $parent_id = 1
echo tep_get_subcategories(&$subcategories_array, $parent_id = 1); ?>

the code basically has to do the following:

1) figure out the main category
2) get a list of available subcategory names
3) show the list on screen, preferably as links.

the code doesn't need to look get past child 1, so if  "Hardware" has 2 subcategories, it should only show those 2 when browsing through hardware, it shouldn't show the categories below those subcategories.

Another php related question, also concerning the code, once the above is working for for example parent_id 1, is it possible to continue the coding bit, with IF statements?

Or should it be coded as an If / else/ else?

i think something along those lines would be easiest when it comes to getting a list of subcategories, and make it possible so they switch if you switch to another category.

What i want to do with my category structure should be something along the lines of:

Printer Manufacturer
|
Cartridges - Ink - Other - More
|
Printer Models

i've looked at several php sites concerning the tep_function, and also found http://forums.oscommerce.com/topic/45274-can-somebody-help-me-out-with-a-function/ but so far the above piece of code is the best idea i can come up with myself. I'm gonna look into this further once i'm home tonite and got some real time to look at it.

At this time it took me around 4 hours to write this piece of text due to phone ringing, customers entering my shop, etc, so not really ideal to look at all the available information

Edited by contramundi, 09 July 2012 - 01:58 PM.