Hierarchical multi select checkboxes for taxonomy?

[philipp]

Hey guys
I have some Pages that are already structured hierarchical but i need to apply some more taxonomies to them to specify which are related. In order to do that i want to add the already structured pages to different categories and sub categories.

But it seems that i can only add pages to categories or tags. But i can’t create a category structure like this:

• Category
  • Sub category
  • Sub category
• Category
  • Sub category
  • Sub category
• Category
  • Sub category
  • Sub category

Any other way to do this without creating a plugin?

In addition to the given problem:

• Is there an easy way to add and delete categories in the panel?
• Can i add translations of multi selections to the categories in the blueprints?

[lukasbestle]

So what you need are basically tags you can add to a page but ones that support hierarchy levels? Or do you prefer a folder-based structure that will result in a hierarchy in the URLs?

@philipp

Is there an easy way to add and delete categories in the panel?

There is the tags field, which makes it easy to add and remove tags (or categories) to your pages.

@philipp

Can i add translations of multi selections to the categories in the blueprints?

What do you mean by that? Do you want to translate the category names?

[texnixe]

@philipp

Is there an easy way to add and delete categories in the panel?

Do you mean a place, where a user can add new categories and subcategories?

@philipp

Can i add translations of multi selections to the categories in the blueprints?

You can add translations to select field options like this:

  my_field:
    label: My Selection
    type: select
    options:
      a:
        en: This is the A Option
        de: Das ist die A Option
      b:
        en: This is the B option
        de: Das ist die B option

This will however, just show the label of the category in the user’s language, not add a language specific value to the file.

Edit:

@philipp

In order to do that i want to add the already structured pages to different categories and sub categories.

While you can easily add categories and subcategories to a page, the problem here is to show a subcategory select based on the selected main category. I think you will need a plugin or a custom panel field to achieve this.

[philipp]

Hey guys, thanks for the fast answers!

@lukasbestle

So what you need are basically tags you can add to a page but ones that support hierarchy levels? Or do you prefer a folder-based structure that will result in a hierarchy in the URLs?

Not exactly, more like a this: http://getkirby.com/docs/cheatsheet/panel-fields/checkboxes
http://assets.getkirby.com/content/1-docs/11-cheatsheet/0-panel-fields/0-checkboxes/checkboxes.png

but hierarchical, so i can structure the categories into levels. Optionally it would be awesome if a user could change the hierarchy and add or remove categories.
It should not be a folder structure since the pages i want to categorise are already in a folder structure.

@texnixe

While you can easily add categories and subcategories to a page, the problem here is to show a subcategory select based on the selected main category. I think you will need a plugin or a custom panel field to achieve this.

I will look into creating a plugin for it tomorrow as it seems to be the only option right now.

Do the language labels work with Checkboxes too? I tried this:

category:
  label:
    en: Category
    de: Kategorie 
  type: checkboxes
  options: 
       photography:
           en: Photography
           de: Fotografie
      architecture:
           en: Architecture
           de: Architektur

and it didn’t work. But i will check on that again!

Best of regards! Thanks for the immediate help!

[philipp]

After some digging:
i want to create a plugin to support a multi level level structure of the checkboxes type field.

So i started extending the InputListField but not sure how to go on after that.

[texnixe]

@philipp

So i started extending the InputListField but not sure how to go on after that.

Where exactly did you get stuck?

[philipp]

i am trying to alter the input in the blueprints to sth like:

options:
     parent: 
        categoryname : name
     children: 
        subcategoryname1: name
        subcategoryname2: name
     parent: 
        categoryname : name
     children: 
        subcategoryname: name
        subcategoryname: name

i believe i get a key => value pair from options? so i believe i need to adjust this to recognise new levels in a generic way, but i am not yet sure how to do this.

later i need to adjust the content method to display the levels in their proper hierarchy?

Kind regards

[lukasbestle]

I’d rather extend the tags field with a fixed list of options, because the list of checkboxes can be quite long if you have a lot of categories and subcategories.

[philipp]

but with tags i can’t display, create a hierarchy…

the reason for the hierarchy is that my client wants to

• display a list of categories (parents)
• and it’s subcategories (children).
• When clicking on a subcategory it should open a choosen product page
• This product page must show the related pages regarding to the subcategory that was selected on an the entry page where the categories and subcategories are listed…

Therefore i need to query pages regarding to the page that was last visited since products can be in multiple categories…

[lukasbestle]

You could use a syntax like Category/Sub Category or Category - Sub Category with the tags field. By using a collection filter that splits the category names by the delimiter, you can then tell whether the page is member of the category and subcategory.

[philipp]

could be an alternative

would i need to create a custom collection filter for this?

Edit: it is also possible to have multiple categories (not only sub-categories…).
So the order of the tags will be important to properly work as substitute solution i guess?

[lukasbestle]

@philipp

would i need to create a custom collection filter for this?

Yes, but if you post what exactly you need to filter, I can help you with this.

@philipp

Edit: it is also possible to have multiple categories (not only sub-categories…). So the order of the tags will be important to properly work as substitute solution i guess?

Yes, the tags field allows to have 0 to n values. It’s not a problem to have more than one main category. The order shouldn’t matter as well.

[philipp]

Hey Lukas, appreciate you help.

There you go:

https://docs.google.com/spreadsheets/d/1Bfu_ASl4WAdmCY7KrDllVtPrPu5PNueXBNyEdEVSqr4/edit?usp=sharing

as transparent as possible

[lukasbestle]

Thanks a lot for the overview. It all makes sense now.

Your product pages need two fields: A select field to allow selecting the subcategory this page represents (or none) and a tags field with a fixed set of possible values for the subcategories this product is in (you will need to extend the tags field because it currently does not support a fixed list set in the blueprint).

The overview page would then use a “tagcloud” to fetch the subcategories that are currently being used. But instead of displaying them directly, you would split the names by the delimiter to create the columns.
By using findBy(), you can then find the page for each subcategory that was selected as the representing product.

The product page could then use filterBy() on the tags field to get all other pages that share the same category to display them as related.

[texnixe]

Hm. Judging from the list above, a single product can belong to several main categories, so a simple select would not be enough here, but rather a multi-select. Also, a product can belong to several subcategories, so the list of possible subcategories would depend on the selected main categories?

[philipp]

@lukasbestle

allow selecting the subcategory this page represents (or none)

As you can see from the table you can have multiple sub categories for a product and therefore also multiple categories.

The key point is that when you browse a field of interest you want see the products related to THIS SPECIFIC field of interest. If the field of interest changes the related products change.

@texnixe

Also, a product can belong to several subcategories, so the list of possible subcategories would depend on the selected main categories?

A product can belong to several sub categories and therefore to multiple main categories too. The main categories are to structure the sub categories on a separate isolated overview page from which to navigate to the products e.g. the frontpage.

---

I will probably just try to extend the multi-select checkboxes to display each Main category with it’s sub categories so that the user can select which categories the product belongs to.

On the isolated page (e.g. frontpage) i can then hopefully query the categories with it’s children. When navigation i can maybe attach a query parameter to the url so that the product page knows which related pages to show…

Not sure if this is the best way to go though since i am not experienced at all with plugins in kirby ;D

good evening everyone and thanks for the suggestions.

[lukasbestle]

No no, the select field is only used to select which subcategory is being represented by the product (the colored table cells in the spreadsheet). Main categories are implied by adding the name of the subcategory to the second field, the tags field.

If I understood the problem correctly, my proposed solution should work. If you have any further questions, don’t hesitate to get back to me.

[philipp]

Yo, i slept over it and until now ended up with this:

As suggested i implemented a select box for the landing page, thanks for the idea @lukasbestle .
For the related pages i am trying to adjust the tags field to my needs and allow it to autocomplete url’s.

<?php

// Lets adopt the right class...
class RelatedPagesField extends TextField {

  static public $assets = array(
    'js' => array(
      'tags.js'
    )
  );

  public function __construct() {

    $this->icon        = 'chain';
    $this->label       = l::get('fields.page.label', 'Page');
    $this->placeholder = l::get('fields.page.placeholder', 'path/to/page');
    //$this->icon      = 'tag';
    //$this->label     = l::get('fields.tags.label', 'Tags');
    $this->index     = 'siblings';
    $this->separator = ',';
  }

  public function input() {

    $input = parent::input();
    $input->addClass('input-with-tags');
    $input->data(array(
      'field'     => 'tags',
      'url'   => panel()->urls()->api() . '/autocomplete/uris',
      'lowercase' => $this->lower ? 'true' : false,
      'separator' => $this->separator,
    ));

    if(isset($this->data)) {

      $input->data('url', html(json_encode($this->data), false));

    } else if($page = $this->page()) {

      empty($this->field) ? $field = $this->name() : $field = $this->field;

      $query = array(
        'uri'       => $page->id(),
        'index'     => $this->index(),
        'field'     => $field,
        'yaml'      => $this->parentField,
        'separator' => $this->separator(),
      );

      $input->data('url', panel()->urls()->api() . '/autocomplete/uris?' . http_build_query($query));

    }

    return $input;

  }

}

so,i have one last question, currently i would have to enter the complete url path to a product: e.g.

loesungen/psinova-channel/invoice-channel
or
loesungen/psinova-components/dyn-taskmanager
or
loesungen/psinova-crossapps/randomotherapp

can i adjust this so i only need to type the product name and the url is added automatically to the tag?

Thanks

[lukasbestle]

Why do you need the product page URLs? Didn’t you want to put subcategory names into the adapted tags field?

[philipp]

Yeah i thought so,

But this morning i realised that i can always query the related pages from the landing page (select box category).

If user clicks for example on "Sap Kreditorenrechnungen"he will be navigated to “Invoice Channel” and “Invoice Channel” contains the urls for all related pages of “SAP Kreditorenrechnungen”.

Therefore every product that is coloured holds the related pages…

But yeah, some products are coloured twice and that might be a problem…