Jump to content

Archived

This topic is now archived and is closed to further replies.

burt

Open discussion on Better Navigation and Categories

Recommended Posts

if you are looking for a solution that refreshes the page, you find that code in kymations product specifications contribution.which I also have included on my site.

but I personally think a jquery/css solution would be ideal

for inspiration, this is one:

http://mixitup.io/

 

I don't use options/attibutes anymore, so I'm sorry but I can't help with thta.


KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Share this post


Link to post
Share on other sites
I also wanted to get a filter for options and attributes, so when a person is looking at the list, they can say "show me only size large" (assuming you had size: large as a option/attribute).

 

A good idea, but if this is added to the core it should definitely be a switchable option since for larger shops it would cause a massive slowdown to run such queries on the fly.

 

To get it a bit more scalable, a new table could be made with scheduled indexing of the relations.

Share this post


Link to post
Share on other sites

I also wanted to get a filter for options and attributes, so when a person is looking at the list, they can say "show me only size large" (assuming you had size: large as a option/attribute).

 

 

Ditto that being a good idea. Allowing the shopper to drill down using attributes via maybe a drop down would be a big plus for user experience.

 

So I'm at my Sofa category, and I see many choices over multiple pages..... But I'm only interested in the RED color in LEATHER material covering. Click...Click. Yep, there they are and I see the one I want... :thumbsup:


I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.

I remember what it was like when I first started with osC. It can be overwhelming.

However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.

There are several good pros here on osCommerce. Look around, you'll figure out who they are.

Share this post


Link to post
Share on other sites

Question on "Also Viewed" Module

 

I have installed the above module and it is Fantastic - works great - Thanks to all involved.

 

One small question - is there a way to "tidy-up" the text that is displayed? As you can see from the image below, the text is wrapped and this appears underneath the icon on a new line with a large space which looks rather untidy.

 

Any suggestions?

 

Many Thanks


Now running on a fully modded, Mobile Friendly 2.3.4 Store with the Excellent MTS installed - See my profile for the mods installed ..... So much thanks for all the help given along the way by forum members.

Share this post


Link to post
Share on other sites

I think I only coded it using a line break between each line.

 

You can recode it using the grid system, say 1 grid for the image and the rest (of the column grid size [defined in /includes/classes/osc_template.php for the text), remembering your alpha and omega classes. If you recode it, send it to me for inclusion into the official download.


Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites

I think I only coded it using a line break between each line.

 

You can recode it using the grid system, say 1 grid for the image and the rest (of the column grid size [defined in /includes/classes/osc_template.php for the text), remembering your alpha and omega classes. If you recode it, send it to me for inclusion into the official download.

 

You say that on the assumption that I have any Idea what I am doing - your assumption is flawed (w00t)


Now running on a fully modded, Mobile Friendly 2.3.4 Store with the Excellent MTS installed - See my profile for the mods installed ..... So much thanks for all the help given along the way by forum members.

Share this post


Link to post
Share on other sites

@@burt

 

http://forums.oscommerce.com/topic/387930-off-filter-box-or-sort-by-discount/

 

is it possible to have a look at your piece of code that generates that filter?

 

and one more question, what is going to happen with all the stuff we discuss here in this topic? is some of it going to be implemented inside

osC 2.3.3.5 ? or osC 3.X? or is somebody going to publish something as add-on?

Share this post


Link to post
Share on other sites

I am presently working on a different filtering system, which will have it's own thread when I am ready to release it (or in other words, when it works lol).

 

That new system may or may not be released in a future version of osCommerce, or as an addon (or maybe both), or maybe neither.


Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites

http://template.me.uk/testing/index.php?cPath=1_4

 

This testing site has a category based filtering system using the options and attributes for those products within the category being looked at.

 

I also coded up a grid layout that links into the usual admin > product_listing area.

 

Please provide feedback.


Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites

http://template.me.uk/testing/index.php?cPath=1_4

 

This testing site has a category based filtering system using the options and attributes for those products within the category being looked at.

 

I also coded up a grid layout that links into the usual admin > product_listing area.

 

Please provide feedback.

 

Testing on the graphics cards, the filtering is working well.

 

Brainstorming, can the interactivity be set up that the visitor can "unselect" a category or in "view all" from within the page? Clearing the filters.

 

As well, could the set up be to allow multiple attribute selections at one time? For some shops this may be beneficial. Perhaps a customer might want to do a price comparison just looking at 4 and 8 mb cards all view-able at the same time rather than switching back and forth based on the individual single filter.

 

When going to the standard column layout the filter is gone, I presume as intended?

 

Nice...


I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.

I remember what it was like when I first started with osC. It can be overwhelming.

However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.

There are several good pros here on osCommerce. Look around, you'll figure out who they are.

Share this post


Link to post
Share on other sites

Don't take this to heart, but I don't like the look. I think it may be better having drop down boxes at the top of the standard headings rather than even more stuff at the top of the page. Surely then if a shop owner did not have say manufacturers name showing, then the dropdown list would also not show, and the same with price sort low high, the model number low to high and things like that.

 

I find that on a standard install of OSC customers do not realise that they can click the heading names and alter the order, where a drop down box would let them know something else is available. I also think dropdown boxes are probably the norm on many websites.

 

Like I say its my opinion. By the way its good to see that oscommerce may be moving in the right direction as its little updates like this that will make it better.


REMEMBER BACKUP, BACKUP AND BACKUP

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
Share on other sites

Thanks to both for the feedback.

 

Nothing is set in stone, I am brainstorming ideas and then making prototype code that works..


Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites

very nice grid-list switch! is that "pure" php code or did you use javascript?

 

regarding the filter, i agree with steve. a dropdown looks more lean and nice, plus you can add more sorting options in one space.

but i must say here in japan many stores use similar sorting/filtering styles like you just created a bit smaller and more simpler, like <smalltext> style.

either way i think it would be great to just "have" such a filter function in osC, still better then nothing.

 

one other thing, you (burt) used to work/play around with megamenu about two years ago, is that right? what happened to that project?

Share this post


Link to post
Share on other sites

@@Tsimi

 

Nice work, looks good and very functional.


I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.

I remember what it was like when I first started with osC. It can be overwhelming.

However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.

There are several good pros here on osCommerce. Look around, you'll figure out who they are.

Share this post


Link to post
Share on other sites

@@Tsimi in your sortby video, is the dropdown created dynamically (eg, if shopowner adds "weight" as a display feature, does weight get added to the dropdown, and displayed weight in your grid layout) ?

 

@@Tsimi (again) - in your megamenu is the code that creates the menu coded per the categories box or is it using prototype code ?


Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites

one other thing, you (burt) used to work/play around with megamenu about two years ago, is that right? what happened to that project

 

It was used on a couple of sites but I never truly liked the implementation.


Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites

hi burt

 

@Tsimi in your sortby video, is the dropdown created dynamically (eg, if shopowner adds "weight" as a display feature, does weight get added to the dropdown, and displayed weight in your grid layout) ?

 

no it is not dynamically showing. in the video i have following setup

 

1. Model

2. Image

3. Name

4. Price

5. Buy now

 

so the filter has to be set to 1a, 1d for model sorting, 3a, 3d for name sorting and 4a, 4d for price sorting. so if somebody adds weight let's say to 2. then he has to rewrite the code inside the php. i don't know how much it would take to create something like that dynamically.

 

@Tsimi (again) - in your megamenu is the code that creates the menu coded per the categories box or is it using prototype code ?

 

i use custom code, <ul>, <li> based and direct links like

<a href="<?php echo tep_href_link(FILENAME_DEFAULT, 'cPath=21'); ?>">Gadgets</a>

plus a lot of css coding.

 

i installed various category box add-ons so that i can use $categories_string to set the categories inside the megamenu but i failed over and over again. i came closest with the categories expanded add-on. i just couldn't show the categories horizontally. other than that it worked. the other thing is if i "could" use the $categories_string it would show "all" categories and sub-categories, which is ok if you have few but with a lot categories you gonna need a ubermenu or a "show more..." modification that would hide some of the sub-/categories.

 

best would be to setup the megamenu with links and everything and leave it. if you are a store that has regular changements of categories then i would not recommend it, otherwise it's great because then you could do what you said in this post.

 

http://forums.oscommerce.com/topic/395439-critique-my-site/#entry1687077

 

i like the idea of "less is more".

 

(currently i'm working on a mix between megamenu+images and ubermenu)

Share this post


Link to post
Share on other sites

roger that. :thumbsup:

i wasn't creating anything for the "core" osC for that i lack the skills. :blush:

it should inspire others that have the skills to create "better navigation" for osC though.

Share this post


Link to post
Share on other sites

Maybe you can share with the others who can update it for eventual inclusion ?

 

Which part or code?

Share this post


Link to post
Share on other sites

@@burt

you can find an implementation of mega menu code on my site

 

this is the file ul_categories.php in includes/boxes, an adaptation of an oscommerce contribution added classes, ids to work with a stylesheet from http://wpmegamenu.com/

<?php
/*
$Id: ul_categories.php,v 1.00 2006/04/30 01:13:58 nate_02631 Exp $

Outputs the store category list as a proper unordered list, opening up
possibilities to use CSS to style as drop-down/flyout, collapsable or
other menu types.
osCommerce, Open Source E-Commerce Solutions
http://www.oscommerce.com
Copyright (c) 2006 Nate Welch http://www.natewelch.com
Released under the GNU General Public License
*/
// BEGIN Configuration options
// Set to false to display the unordered list only. Set to true to display in
// a regular box. The former is useful for better integrating the menu with your layout.
$show_ulcats_as_box = false;

// Indicates whether or not to render your entire category list or just the root categories
// and the currently selected submenu tree. Rendering the full list is useful for dynamic menu
// generation where you want the user to have instant access to all categories. The other option
// is the default oSC behaviour, when the subcats aren't available until the parent is clicked.
$show_full_tree = true;

// This is the CSS *ID* you want to assign to the UL (unordered list) containing
// your category menu. Used in conjuction with the CSS list you create for the menu.
// This value cannot be blank.
$idname_for_menu = 'megaUber';

// This is the *CLASSNAME* you want to tag a LI to indicate the selected category.
// The currently selected category (and its parents, if any) will be tagged with
// this class. Modify your stylesheet as appropriate. Leave blank or set to false to not assign a class.
$classname_for_selected = 'selected';

// This is the *CLASSNAME* you want to tag a LI to indicate a category has subcategores.
// Modify your stylesheet to draw an indicator to show the users that subcategories are
// available. Leave blank or set to false to not assign a class.
$classname_for_parent = 'daddy';

// This is the HTML that you would like to appear before your categories menu if *not*
// displaying in a standard "box". This is useful for reconciling tables or clearing
// floats, depending on your layout needs.
$before_nobox_html = '<div class="uber-container clearfix">' . "\n".
					 '<nav id="megaMenu" class="megaMenuContainer megaMenu-nojs megaResponsive megaFullWidth wpmega-preset-black-white-2 megaMenuHorizontal megaMenuOnHover wpmega-withjs wpmega-noconflict megaClear">';

// This is the HTML that you would like to appear after your categories menu if *not*
// displaying in a standard "box". This is useful for reconciling tables or clearing
// floats, depending on your layout needs.
$after_nobox_html = '</nav>'."\n".'</div>'."\n".'<div style="clear: both;"></div>'."\n";
$classname_for_toplevel = ' menu-item ss-nav-menu-item-2 ss-nav-menu-item-depth-0 ss-nav-menu-mega ss-nav-menu-mega-fullWidth mega-colgroup mega-colgroup-6 ss-nav-menu-mega-alignCenter ' ;
// END Configuration options

// Global Variables
$GLOBALS['this_level'] = 0;

// Generate a bulleted list (uses configuration options above)
echo $before_nobox_html;
echo tep_make_cat_ullist();
echo $after_nobox_html;

// Create the root unordered list
function tep_make_cat_ullist($rootcatid = 0, $maxlevel = 3){
global $idname_for_menu, $cPath_array, $show_full_tree, $languages_id;

// Modify category query if not fetching all categories (limit to root cats and selected subcat tree)
/* if (!$show_full_tree) {
 $parent_query = 'AND (c.parent_id = "0"';
if (isset($cPath_array)) {
 $cPath_array_temp = $cPath_array;

 foreach($cPath_array_temp AS $key => $value) {
	 $parent_query .= ' OR c.parent_id = "'.$value.'"';
 }
 unset($cPath_array_temp);
}

 $parent_query .= ')';
} else {
*/	 $parent_query = '';
// }
// end Modify

$result = tep_db_query('select c.categories_id, cd.categories_name, c.parent_id from ' . TABLE_CATEGORIES . ' c, ' . TABLE_CATEGORIES_DESCRIPTION . ' cd where c.categories_status = 1 and c.categories_id = cd.categories_id and cd.language_id="' . (int)$languages_id .'" '.$parent_query.' order by sort_order, cd.categories_name');

while ($row = tep_db_fetch_array($result)) {
$table[$row['parent_id']][$row['categories_id']] = htmlentities($row['categories_name']);
}
$output .= "\n".'<ul id="megaUber" class="megaMenu">';

$output .= "\n" .'<li id="new" class="menu-item"><a style="color:lime;font-style:italic;" href="'. tep_href_link(FILENAME_PRODUCTS_NEW, '', 'NONSSL',false) . '" >'. strtoupper(BOX_HEADING_WHATS_NEW) .'</a></li>' ."\n" . '<li class=" menu-item ss-nav-menu-item-2 ss-nav-menu-item-depth-0 ss-nav-menu-mega ss-nav-menu-mega-fullWidth ss-nav-menu-mega-alignCenter daddy ss-nav-menu-item-depth-0 cat_lev_0"><a class="link_lev_0 daddy " style="color: red;font-style:italic;" href="'.tep_href_link(FILENAME_SPECIALS, '', 'NONSSL',false).'">
SALE</a>
<ul class="sub-menu sub-menu-1 daddy">'
. '<li id="specials" class="ss-nav-menu-item-depth-1 menu-item cat_lev_1"><a class="link_lev_1" href="'.tep_href_link(FILENAME_SPECIALS, '', 'NONSSL',false).'" > '
. strtoupper(BOX_HEADING_SPECIALS) . '</a></li>' ."\n"
. '<li id="solden" class="ss-nav-menu-item-depth-1 menu-item cat_lev_1"><a class="link_lev_1" href="'. tep_href_link('solden.php', '', 'NONSSL',false) . '" >'
. strtoupper(BOX_HEADING_SOLDEN) . '</a></li>'
// . tep_make_cat_ulbranch(200,$table,1, $maxlevel)
. '</ul>'
. '</li>';

$output .= tep_make_cat_ulbranch($rootcatid, $table, 0, $maxlevel);
// Close off nested lists
for ($nest = 0; $nest <= $GLOBALS['this_level']; $nest++) {
//if ($nest == '1') { $output .= '</li>'; } // my change
$output .= "\n" . '</ul>';
}

return $output;
}

// Create the branches of the unordered list
function tep_make_cat_ulbranch($parcat, $table, $level, $maxlevel) {
global $cPath_array, $classname_for_selected, $classname_for_parent, $classname_for_toplevel;

$list = $table[$parcat];

while(list($key,$val) = each($list)){
if ($GLOBALS['this_level'] != $level) {
 if ($GLOBALS['this_level'] < $level) {
 $output .= "\n" . '<ul class="sub-menu sub-menu-'.($GLOBALS['this_level']+1).'">';
 } else {
 for ($nest = 1; $nest <= ($GLOBALS['this_level'] - $level); $nest++) {
	 $output .= "\n".'</ul>'."\n".'</li>';
 }
 }

 $GLOBALS['this_level'] = $level;
}
if (isset($cPath_array) && in_array($key, $cPath_array) && $classname_for_selected) {
 $this_cat_class = $classname_for_selected . ' ';
} else {
 $this_cat_class = 'ss-nav-menu-item-depth-'.$GLOBALS['this_level'] ;
}

if (!$level) {
 unset($GLOBALS['cPath_set']);
 $GLOBALS['cPath_set'][0] = $key;
 $cPath_new = 'cPath=' . $key;
} else {
 $GLOBALS['cPath_set'][$level] = $key;
 $cPath_new = 'cPath=' . implode("_", array_slice($GLOBALS['cPath_set'], 0, ($level+1)));
}

$output .= "\n".'<li class="';
if ($level == 0) {
 // $output .= $classname_for_toplevel .' ';
 $output .= ' menu-item ss-nav-menu-item-2 ss-nav-menu-item-depth-0 ss-nav-menu-mega ss-nav-menu-mega-fullWidth mega-colgroup mega-colgroup-6 ss-nav-menu-mega-alignCenter ' ;
 //force uppercase for top level only
 $val = strtoupper($val);
}

if (tep_has_category_subcategories($key) ) {
 //$this_cat_class .= ' menu-item'; //added to see if it aligns better
 if ($classname_for_parent) {
 $this_parent_class = ' '.$classname_for_parent.' ';
 $output .= $classname_for_parent.' ';
 }
} else {
 $this_cat_class .= ' menu-item';
 $this_parent_class = '';
}

$output .= $this_cat_class . ' cat_lev_'.$level.'"><a class="link_lev_' .$level . $this_parent_class.'" href="';

$output .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">'.$val;
if (SHOW_COUNTS == 'true') {
 $products_in_category = tep_count_products_in_category($key);
 if ($products_in_category > 0) {
 $output .= ' ' .'</a>'. '(' . $products_in_category . ')';
 } else {	
 $output .= '</a>';
 }
} else {
 $output .= '</a>';
}

if ((!tep_has_category_subcategories($key)) or ($maxlevel == $level+1)) {
 $output .= '</li>';
}

if ((isset($table[$key])) AND (($maxlevel > $level + 1) OR ($maxlevel == '0'))) {
 $output .= tep_make_cat_ulbranch($key,$table,$level + 1,$maxlevel);
}
} // End while loop
return $output;
}
?>

 

in the header of the page, I have

<!-- ubermenu -->

 

<link rel='stylesheet' id='ubermenu-basic-css' href='ext/ubermenu/ubermenu_basic.css' type='text/css' media='all' />

<link rel='stylesheet' id='ubermenu-black-white-2-css' href='ext/ubermenu/ubermenu_shinyblack.css' type='text/css' media='all' />

 

 

 

I have apc and file based caching, the menu ul tree is the same for all pages

 

Hope this helps


KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Share this post


Link to post
Share on other sites

Yeah used the something similar but using instead

 

http://www.geektantra.com/2009/09/jquery-mega-menu

 

for the big nav bar

 

and a simple menu for the categorys as a sub

 

using the category as unordered list contribution

nearly the same but ....

 

it is not really a mega menu

 

with a bit of css I could get the categories to float right instead of a long list

 

 

Think the problem or better said goal here is to get a true mega menu for the categories which is what Tsimi has done but hardcoded !!

 

Merged with a categories menu that I have done which is not hard coded populates from admin automatically but just not a mega menu so does needs a bit of help

 

The rest of a mega menu would not be so difficult its my mind getting the cats to appear the way Tsimi has done that is the holy grail


To improve is to change; to be perfect is to change often.

 

Share this post


Link to post
Share on other sites

×