Post by Qphoria » Wed Aug 06, 2008 11:20 am

Released: DOWNLOAD

I've been working on getting the subcategories to list in the Category box.

DEMO. Click on categories on left to expand them

It is set to show the subcategories in between the main categories, recursively down multiple levels.

It will also keep the proper hierarchy open while viewing the products, and hide the ones that don't belong to the category.

It also works based on CSS. I added a "cats" class for the main category and a "subcats_lvl_#" for each lower level.

It works pretty well, but I am currently using one query for each level down. So if are showing Cat 1 -> Sub Cat 1->Sub Sub Cat 1 is uses 3 db queries. I've almost finish redesigning it to use 1 query to make it simpler and more or less improve performance (not that it will be really noticeable).

Keep an eye here for the release in the next day or two.

Q!
Last edited by Qphoria on Wed Sep 10, 2008 3:42 am, edited 1 time in total.

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by fido-x » Wed Aug 06, 2008 4:31 pm

Most of this has already been covered here http://forum.opencart.com/index.php/top ... ml#msg3318.

Fido-X.

Image
Modules for OpenCart 2.3.0.2
Homepage Module [Free - since OpenCart 0.7.7]
Multistore Extensions
Store Manager Multi-Vendor/Multi-Store management tool

If you're not living on the edge ... you're taking up too much space!


User avatar
Expert Member

Posts

Joined
Sat Jun 28, 2008 1:09 am
Location - Tasmania, Australia

Post by JNeuhoff » Wed Aug 06, 2008 5:16 pm

As regards sub-categories: We are using a purely CSS-based solution from ADX Menu, see for for example http://www.vcscleaningsupplies.com.au/ , works great with OpenCart or any other CMS.

MHC Web Design
Override Engine * Integrated VQMod * Unused Images Manager * Instant Option Price Calculator * TrustPilot Reviews * Google Rich Snippets * Google Tag Manager * Export/Import Tool * Template Switcher PHP/Twig


User avatar
Expert Member

Posts

Joined
Wed Dec 05, 2007 3:38 am


Post by Qphoria » Wed Aug 06, 2008 6:04 pm

Ah, thought there were only pay modules for that. The only one I saw was http://forum.opencart.com/index.php/topic,274.0.html which wasn't quite what I wanted.
fido-x wrote: Most of this has already been covered here http://forum.opencart.com/index.php/top ... ml#msg3318.

Fido-X.
It looks as tho this one displays all categories at all times... I managed to get that working as well without so many changes. But mine works on a per main category basis, so you only see the related categories, not all at once. Diff Strokes/Diff Folks :)
JNeuhoff wrote: As regards sub-categories: We are using a purely CSS-based solution from ADX Menu
Is that using the categories extension? or a new one for a top menu?

Thx

I should also mention that mine will support (but not require) my drop-in override code, so there will be no files to manually edit, just drop into an override folder and it will default to that version of the code and circumvent the core.
Last edited by Qphoria on Wed Aug 06, 2008 6:16 pm, edited 1 time in total.

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by JNeuhoff » Wed Aug 06, 2008 8:35 pm

Is that using the categories extension? or a new one for a top menu?
No, although it could support it, too.

I just changed some templates for the header in the files:

/catalog/template//module/header.tpl and
/catalog/template//layout.tpl and of course the
/catalog/template//css/default.css

The header.tpl now calls a newly created viewer helper class with a function which gets all categories from the database and returns a generated nested HTML UL and LI elements for each category. The CSS file uses a 3rd party dropdown menu system from http://aplus.rs/adxmenu/

MHC Web Design
Override Engine * Integrated VQMod * Unused Images Manager * Instant Option Price Calculator * TrustPilot Reviews * Google Rich Snippets * Google Tag Manager * Export/Import Tool * Template Switcher PHP/Twig


User avatar
Expert Member

Posts

Joined
Wed Dec 05, 2007 3:38 am


Post by Qphoria » Wed Aug 06, 2008 9:13 pm

Ah yea I see. That's more for CSS Flyout which is a bit diff than what I'm trying to accomplish here.

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by fido-x » Thu Aug 07, 2008 7:23 pm

It looks as tho this one displays all categories at all times...
Isn't that what yours does? I visited your demo site, and what I saw (without clicking anything) was Category 1 fully expanded.

Fido-X.

Image
Modules for OpenCart 2.3.0.2
Homepage Module [Free - since OpenCart 0.7.7]
Multistore Extensions
Store Manager Multi-Vendor/Multi-Store management tool

If you're not living on the edge ... you're taking up too much space!


User avatar
Expert Member

Posts

Joined
Sat Jun 28, 2008 1:09 am
Location - Tasmania, Australia

Post by Qphoria » Thu Aug 07, 2008 8:57 pm

My link is direct to that page so you can see what it looks like when expanded. But if you click a different main category, you will notice that Cat 1's subs hide. I was trying to show 2 features here: 1) showing subs in the category at all and 2) showing only those relevant to the main.

I've changed the demo to show the default index to be less confusing.
Last edited by Qphoria on Thu Aug 07, 2008 9:01 pm, edited 1 time in total.

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by JNeuhoff » Thu Aug 07, 2008 9:01 pm

Isn't that what yours does? I visited your demo site, and what I saw (without clicking anything) was Category 1 fully expanded.
I think it is still work in progress.

What should be added is this (I am now thinking in terms of category tree nodes):

When you click on a (possibly nested) category, it should toggle its tree expansion state, and it should only affect its own sub-tree branch.

No other category tree branches should be expanded, except for the currently active category tree node where the branch is open up to its top-level parent tree node.

MHC Web Design
Override Engine * Integrated VQMod * Unused Images Manager * Instant Option Price Calculator * TrustPilot Reviews * Google Rich Snippets * Google Tag Manager * Export/Import Tool * Template Switcher PHP/Twig


User avatar
Expert Member

Posts

Joined
Wed Dec 05, 2007 3:38 am


Post by Qphoria » Thu Aug 07, 2008 9:09 pm

JNeuhoff wrote:
Isn't that what yours does? I visited your demo site, and what I saw (without clicking anything) was Category 1 fully expanded.
I think it is still work in progress.

What should be added is this (I am now thinking in terms of category tree nodes):

When you click on a (possibly nested) category, it should toggle its tree expansion state, and it should only affect its own sub-tree branch.

No other category tree branches should be expanded, except for the currently active category tree node where the branch is open up to its top-level parent tree node.
um, isn't that what it does? (aside for the bug with the 1A sub lining up under 1B sub)

I mean

Start at main index. You see 3 Main cats (Main1, Main2, Main3)
Click Main1 you see the 3 main cats, and the 2 subs under Main1 only: Sub Cat 1A, Sub Cat 1B
Click Sub Cat 1A and you see 3 Main cats, 2 subs under Main1, and the sub under Sub Cat 1A (except it shows up under 1B, but that is a display bug that I have fixed in the 1 db query version).

Now Click Main2, and all of Main1's subs hide.
Last edited by Qphoria on Thu Aug 07, 2008 9:13 pm, edited 1 time in total.

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by Qphoria » Thu Aug 07, 2008 10:38 pm

Ok. 99% done:

- 1 Query!
- Dynamic levels!
- tiny tpl change (to add $class variable)
- ~12 lines of code to the category module
- Override system compatible!
- CSS design base!
- No display level bugs
- Works with & without URL Aliasing enabled

Click For Demo

I thought about adding an admin option to enable/disable the view (no subs, relevant subs, or all subs) but that can come later.
Last edited by Qphoria on Fri Aug 08, 2008 1:20 am, edited 1 time in total.

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by Qphoria » Fri Aug 08, 2008 3:03 am

100% Done

Released: DOWNLOAD | DEMO

Let me know if you have any problems.

-EDIT-
Didn't realize *.rtf wasn't supported on Mac, so I here is a pdf version of the readme file if needed:
http://www.unbannable.com/DRS_Readme.zip
Last edited by Qphoria on Fri Aug 08, 2008 5:16 am, edited 1 time in total.

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by SiteE@se » Fri Aug 08, 2008 3:34 am

Qphoria wrote: Released: DOWNLOAD
A cinch to install and initial testing shows this to work exactly as described.  Lots of scope for styling this via CSS.

Hats off to you Qphoria  ;D

Chris

Chris @ SiteE@se Web Design


Active Member

Posts

Joined
Mon Dec 17, 2007 7:40 am
Location - UK

Post by Qphoria » Fri Aug 08, 2008 3:36 am

Thanks! Good to hear it works  ;D

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by JNeuhoff » Fri Aug 08, 2008 9:10 pm

um, isn't that what it does? (aside for the bug with the 1A sub lining up under 1B sub)
It's nearly there. When I mean is this:

Initially, your demo list all the top-level category. When I click on one of them, it expands to a sub-tree. Now, if I click again on the same top-level category, I would have expected it to close the sub-tree, which it doesn't. The sub-tree stays open.

MHC Web Design
Override Engine * Integrated VQMod * Unused Images Manager * Instant Option Price Calculator * TrustPilot Reviews * Google Rich Snippets * Google Tag Manager * Export/Import Tool * Template Switcher PHP/Twig


User avatar
Expert Member

Posts

Joined
Wed Dec 05, 2007 3:38 am


Post by Qphoria » Fri Aug 08, 2008 9:10 pm

You mean to toggle open and close?

Like:
Cat 1
Cat 2
Cat 3

*Click Cat 1*

Cat 1
- Cat1sub1
- Cat1sub2
Cat2
Cat3

*Click Cat 1 again*

Cat 1
Cat 2
Cat 3

Like that? I think that works for something like the sidebar in Windows XP when you want to show details like this WinXP Navigational menu(left side). Maybe not so much for a product menu. Maybe something fancy for a contrib with javascript and dhtml and what not. My design is meant more for a simple core design, something that OpenCart could (and probably should) have by default.
Last edited by Qphoria on Fri Aug 08, 2008 9:20 pm, edited 1 time in total.

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by Luvz2drv » Fri Aug 08, 2008 11:06 pm

it does not respect sort order  either from my testing.

but great work on nice compact solution

Jonathon

Global Moderator

Posts

Joined
Fri Mar 21, 2008 10:58 am

Post by Qphoria » Fri Aug 08, 2008 11:10 pm

Luvz2drv wrote: it does not respect sort order  either from my testing.
Ah that's right. I am sorting by "cpath" instead of "sort_order". I meant to change that back but it was giving me some grief.

I will look at that.
Thx for the heads up
Last edited by Qphoria on Fri Aug 08, 2008 11:13 pm, edited 1 time in total.

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by fido-x » Fri Aug 08, 2008 11:23 pm

Looking pretty good!

Image
Modules for OpenCart 2.3.0.2
Homepage Module [Free - since OpenCart 0.7.7]
Multistore Extensions
Store Manager Multi-Vendor/Multi-Store management tool

If you're not living on the edge ... you're taking up too much space!


User avatar
Expert Member

Posts

Joined
Sat Jun 28, 2008 1:09 am
Location - Tasmania, Australia

Post by JNeuhoff » Sat Aug 09, 2008 6:46 pm

Qphoria wrote: You mean to toggle open and close?

Like:
Cat 1
Cat 2
Cat 3

*Click Cat 1*

Cat 1
- Cat1sub1
- Cat1sub2
Cat2
Cat3

*Click Cat 1 again*

Cat 1
Cat 2
Cat 3

Like that?
Yes, like that. As an example, see
http://www.histpop.org/ohpr/servlet/Bro ... active=yes

While it is not OpenCart (in fact it's a Java servlet) it illustrates the toggling mechanism of sub-trees.

Its behavior is similar to what the user knows from Windows or Linux file explorers.
The toggling of sub-trees should only be triggered by clicking on the icon
(which could be a plus or minus icon, or of a small tri-angular shape).
The content pane should only be re-freshed after clicking on the category name link.
Last edited by JNeuhoff on Sat Aug 09, 2008 6:50 pm, edited 1 time in total.

MHC Web Design
Override Engine * Integrated VQMod * Unused Images Manager * Instant Option Price Calculator * TrustPilot Reviews * Google Rich Snippets * Google Tag Manager * Export/Import Tool * Template Switcher PHP/Twig


User avatar
Expert Member

Posts

Joined
Wed Dec 05, 2007 3:38 am

Who is online

Users browsing this forum: No registered users and 1 guest