Category Listing

miles · 2018-02-22 13:01:33

Hello Textpattern Community

I have been using Textpattern for many many years but can’t get my head around this problem.

A client has a shop website listing products and they need a menu system like this:

Lawnmowers
- Cordless
- Battery
- Used
Chainsaws
- Mountfield Chainsaws
- Used Chainsaws

Etc….

However they obviously only want the sub menu to show when the first category is clicked. So it shortens the massive menu they have.

The products when then show on the right panel.

Can you guys help?

Last edited by miles (2018-02-22 13:02:51)

colak · 2018-02-22 14:04:53

Hi Miles,

Some time ago, I posted a tutorial on creating ul based lists/sublists based on categories and articles on txp tips. Would that be of help? It would of course need to be styled with css and/or jquery to only show the top menu.

jakob · 2018-02-22 22:55:49

If what you’re primarily looking for is a 2-level category tree, where the currently active category is open, this should get you there:

<txp:category_list wraptag="ul" break="" children="0">
	<li<txp:if_category name='<txp:category />'> class="active_cat"</txp:if_category>>
        <txp:category title="1" link="1" />
        <txp:category_list wraptag="ul" break="" parent='<txp:category />' children="0" exclude='<txp:category />'>
        	<li<txp:if_category name='<txp:category />'> class="active_cat"</txp:if_category>><txp:category title="1" link="1" /></li>
        </txp:category_list>
	</li>
</txp:category_list>

This is just a category tree with two assumptions:

You don’t need the articles in the tree, as they’re shown in the product overview.
You always have articles (products) in every category you list. It doesn’t check if there are no articles in a category. If you don’t, you either get a page with no results or you need to remove the category from the parent when you/your client doesn’t need it.

If it’s not quite right, maybe it gets you part-way there. There’s a much more complex example by “Adi” on txp:tips too.

miles · 2018-02-23 22:13:13

Thank you both for your replies. I have been for a few hours on this and I still cant crack it. Here is the site so far – http://www.plymouthgardenmachinery.co.uk/shop

ad you can see the sub category is nested but I need the top child category to have a class and no active link to I can put some java on it so it show/hides the sub menu.

Here is my code:

<txp:category_list children="0" break="li"  link="0" >
  <txp:category title="1" link="1" section="shop" /></li>
  <txp:category_list   parent='<txp:category />'  exclude='<txp:category />' class="sub-menu" break="li" wraptag="ul">
    <txp:category title="1" link="1" section="shop" /></li>
  </txp:category_list>
</txp:category_list>

Hope someone can help as I am losing my mind :(

EDIT: added bc.. to code block.

jakob · 2018-02-23 22:38:32

If you want to collapse and expand the long list using javascript, you need the entire category tree, not just those showing on the current page’s active category.

This is untested, but perhaps this is an approach:

<txp:category_list wraptag="ul" break="" children="0">
	<li<txp:if_category name='<txp:category />'> class="active_cat"</txp:if_category>>
<txp:variable name="child_category_list"><txp:category_list wraptag="ul" break="" parent='<txp:category />' children="0" exclude='<txp:category />'>
    <li<txp:if_category name='<txp:category />'> class="active_cat"</txp:if_category>><txp:category title="1" link="1" /></li>
</txp:category_list></txp:variable>
<txp:if_variable name="child_category_list" value="">
    <txp:category title="1" />
<txp:else />
    <txp:category title="1" wraptag="span" class="has-children" />
    <txp:variable name="child_category_list" />
</txp:if_variable>
	</li>
</txp:category_list>

The principle is:

Start with a category_list of the first level.
For each first-level category, conduct a category_list of sub-categories using the first-level category as a parent and save it as a variable.
If the variable has no content, just show the first-level category’s title.
If the variable has content (= there are child categories), show the category’s title in a span with the class “has-children”. Change this to what you need. Then display the child category_list, this time with linked category titles.
Hook your show/hide script onto the class “has-children” (or rename the class as required). If your sub-category list requires a class too, you can place it in your inner category_list, e.g. txp:category_list wraptag="ul" class="sub-categories".

It may require some experimentation to get it working. If you find, it’s not recognising the variable being empty when it is, it may be because it contains a few spaces or tabs. If so, use smd_wrap immediately within the variable tag (i.e. <txp:variable><txp:smd_wrap> … </txp:smd_wrap></txp:variable>). You could also try with adi_if_content and its txp:else tag instead of the variable and if_variable method.

To test, you can always output the variable to test what it contains, or place messages for the different cases to find where you are…

BTW: It’s a fairly database intensive form, so you might want to investigate caching it (e.g. with aks_cache) to make it speedier once you have it working. You will then, however, lose the “active_cat” class (i.e. highlighting the entry in the category that’s currently showing on the page).

miles · 2018-02-26 18:21:36

jakob thank you so much for your help. worked perfect

etc · 2018-02-27 19:37:59

jakob wrote #309398:

BTW: It’s a fairly database intensive form, so you might want to investigate caching it (e.g. with aks_cache) to make it speedier once you have it working. You will then, however, lose the “active_cat” class (i.e. highlighting the entry in the category that’s currently showing on the page).

For the record, it can be optimized in 4.7, yielding only one db query. Create a category-type recursive form called, say, tree:

<txp:category_list children exclude parent='<txp:yield name="parent" />' wraptag="ul" break="">
<li<txp:if_category name='<txp:category />'> class="active_cat"</txp:if_category>>
<txp:evaluate test="output_form">
    <span class="has-children"><txp:category title /></span>
    <txp::tree parent='<txp:category />' />
<txp:else />
    <txp:category title link />
</txp:evaluate>
</li>
</txp:category_list>

Then just put <txp::tree /> where you want the list to be output.

jakob · 2018-03-02 08:10:52

I love these posts of yours. For me, they’re exciting and mind-boggling at the same time!

I just need to work out a way of noting these little nuggets of yours.

Bloke · 2018-03-02 09:11:55

jakob wrote #309569:

I love these posts of yours… I just need to work out a way of noting these little nuggets of yours.

Me too. TxpTips?

phiw13 · 2018-03-02 12:19:37

jakob wrote #309569:

I love these posts of yours. For me, they’re exciting and mind-boggling at the same time!

Ditto! Even though I have no use for the code above (or in the other thread) right now, I love to read them and analyse them (and I file them in Notes.app…).

etc · 2018-03-02 14:21:03

Thank you, it’s the only enjoyable way to write the docs for me!

Textpattern CMS

Textpattern CMS support forum

#1 2018-02-22 13:01:33