Best practice for showing catalog

Kirby 2 Solved ✅
1

Hi all -

I’m currently trying to rework a product catalog website into kirby and wondering the best way to do it.

Generally the products are within a subcategory, such as:

FARM MACHINERY > MOWERS > product name

I was planning on just using parent and child pages, with the final page in the tree being the product itself.
I’d like to be able to give the product a unique template and blueprint for fields such as prince, product specs etc.

However I’m a little unsure how to give a different template and blueprint to that of it’s parent - what I’ve done before has only been two 2 levels - for example a ‘project’ template and a ‘projects’ template for all child items.

Is there another better way of doing things? Or is the way I’m doing it going to the most straight forward? If so, any ideas on the template/blueprint issue would be much appreciated.

2

In the simplest case for this setup you would have:

  • category.yml/php blueprint/template
  • subcategory.yml/php blueprint/template
  • product.yml/php blueprint/template

if you want different product blueprints, you can allow different templates/blueprints as children of subcategory in the subcategory.yml blueprint.

If the subcategories should have different blueprints as well, you define the allowed blueprints in category.yml, and then for each of those subcategory blueprints the allowed children blueprints, all using the

pages:
  template:
   -  template1
   -  template2

subpage settings.

3

Thanks for this. For the sake of making it easy for the user in the panel, I really like the idea of having one subcategory and allowing users to click a relevant category, as per this example:

https://getkirby.com/docs/panel/blueprints/example-blueprints/portfolio-project

I’m having trouble though finding info on 'categories in kirby and how they work. For example, how
does a category affect url, and can they be added to a dropdown in the menu so they appear as sub pages?

4

Categories do not affect the URL as such, unless you use parameters to filter by these categories. However, you can add categories to your menu and then either use these parameters or use routes to get nice clean URLs with the category in it, see also this post: : How to cleanup/remove the (tag:) from url

Edit: I think there are some more examples in the forum if you search around a bit.

5

Just to throw something else out there, although Kirby is a flat file CMS, it does have the ability to connect to a database. If you have a high number of products, it could take a very long time to manually input all the information. With a database, you could import all the data via spreadsheet/CSV.

You can also structure the data such that it will make your templating easier, reducing the need to get clever with blueprints because you will be able to call the data directly from the right place via a snippet. Have a read of this and see if it might be useful: Connecting Kirby to a Database

The only downside is that I don’t know if its possible to directly edit that data from the panel once its been loaded. Does anyone know if you can connect panel custom fields up to the database to allow editing?

6

@jimbobrjames If you use a database, you can’t edit your content from the Panel and would have to find a way of doing that via the frontend, which kind of defeats the purpose.

Also, you can just as well import data from a spreadsheets/CSV and create pages or structure fields from that (I created a plugin for that). You can also use the Kirby database class to quite easily import data from an existing database into Kirby, if you have previously used a CMS like WP or the like.

If you think you need a database for most of the stuff you do in Kirby, I think it would make more sense to use a CMS that was made to work with a database like WP or Processwire or whatever.

Using a database with Kirby can make sense for indexing or for storing data you create from the frontend. It was even suggested in another thread to create content via the Panel (i.e. create normal text files) and then store it in a database using hooks… All possible.

But if the number of products is not really huge, Kirby’s file system should work really well.

@dilby How many products are we talking about?

7

Aweome! Thats the most excellent news I’ve had all morning. CSV import / spreadsheet tag is something I asked for months ago on the forum… looks like somebody up there heard me!

On the database front, thats a shame. Your suggestion to use Wordpress or Processwire for the site is probably a good idea (although personally I would use Textpattern because its awesome). Alternatively, you can still use Kirby i think, but hand off the data to something like Directus because that allows custom data structure and edit fields, and pumps the data out as JSON that you can consume. Just a theory, but I’m assuming you can pull that into Kirbys templates. That way you can have a system for product data, but still use Kirby for the rest of the site.

I should have mentioned that Directus is a paid for product if you use the hosted product, however it is open source and you can download it and install it yourself on your own server free of charge.

8

I must admit, I don’t see the point. You can create JSON from Kirby without any problems and you can have custom data structures and edit fields in Kirby’s Panel via blueprints. In fact, that is one of the many strengths of Kirby.

And yes, you can consume JSON data in Kirby templates. But why output JSON first and then use it again in a PHP template. Then you might as well create a Javascript app? Or am I missing something?

As an example for using Kirby as a backend for the content, check out this project: http://www.creativeapplications.net/js/radio-garden-radio-in-the-age-of-globalisation-and-digitisation/

But we are getting off topic…

9

Sure, I understand that Kirby can in itself act as a headless CMS, however I have built a lot of sites for industries where security is paramount (like the financial industry). The idea of storing certain kinds of information in flat files would drain the colour from their faces! They would be much happier if that information was tucked away in a database on a hardened server. Using something like Directus for that and pairing it up with Kirby or a static site generator like Metalsmith for the presentational side of things would achieve that, and allow easy editing of that data.

10

I don’t have many products - probably about 5 in each category, and about 10 categories.

I don’t want to go down DB route, although I appreciate the suggestion.

What Im confused about is the actual term ‘categories’. The only threads I can find are people looking to do the same thing. Are these categories linked to tags in any way (the article you liked to regarding urls is related to tags)? If not, what are they actually linked to, and how are they called?

11

Well, categories can be both folders or fields in a file.

If you use fields, you can assign categories in different ways:

  • a single category via a select field or checkboxes
  • multiple categories via a multi-select field, via a tags field or a simple text field of comma separated entries

In this way, tags or categories are the same thing.

You can use these categories in a menu or a select to filter your content. For example, to create a virtual “mower” page with a list of all mower products (when you use routes to get rid of page parameters).

So that depending which version you use:

http://your-site.com/products/mowers
or
http://your-site.com/products/category: mowers

would output all products of the mower category

12

That number of products certainly doesn’t require a database.

13

I built a site recently where I simply added a tags field to the blue print and tagged it with what was really a category. That allowed me to pull content out and group it together…

<?php foreach($site->find('news-press')->children()->filterBy('tags', 'Person', ',') as $article): ?>
...
<?php endforeach ?>

The page was displaying testimonials that where attributed directly to certain team members, and i needed to pull them back out in lists by person or by several people. Its a similar scenario to your products.

14

If you use a tags field or checkboxes/select really depends on whether or not you want to limit input.

  • Tags fields allow you to add anything
  • Checkboxes, selects only allow pre-defined options
  • or you can use a field query to combine the advantages of both, flexibility and limit (i.e. you define possible categories in site settings (tags field) and query that field in your select/checkboxes field)
15

You could also put all the categories in a select field so they one can be picked on the article. If you need to pick more than one from the list, I think there is a plugin for that.

16

Thanks for this - I guess I really just need a way of showing the categories within the dropdown toggle of a bootstrap navbar. I’m still a little confused if I don’t use the tags method as described:

<?php foreach($site->find('news-press')->children()->filterBy('tags', 'Person', ',') as $article): ?>
...
<?php endforeach ?>

Then how else it could be done via just categories without tags, and if it can’t, then what the actual purpose of a category is. Apologies for my ignorance.

My nav code is:

<nav class="navbar navbar-default navbar-right">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
          <ul class="nav navbar-nav">
            <?php foreach($pages->visible() as $item): ?>
            <li class="menu-item<?= r($item->isOpen(), ' is-active')?><?php e($item->hasChildren() && $item->intendedTemplate() != 'testimonials', ' dropdown')?>">
              <a id="<?= $item->title()->html() ?>" href="<?= $item->url() ?>" <?php e($item->hasChildren(), ' class="dropdown-toggle disabled" data-toggle="dropdown"')?>><?= $item->title()->html() ?></a>
                <?php if($item->hasChildren()): ?>
                  <ul class="dropdown-menu dropdown-menu-left" role="menu">
                    <?php foreach($item->children() as $child): ?>
                      <li><a href="<?= $child->url() ?>"><?php echo $child->title() ?></a></li>
                    <?php endforeach ?>
                  </ul>
                <?php endif ?>
            </li>
            <?php endforeach ?>
          </ul>
        </div><!--/.nav-collapse -->
    </nav>
17

Do you mind explaining this a bit more?

18

You can get an array of all categories like this:

$categories = page('whatever')->children()->pluck('category_field', ',', true);

Then you can use this array in your navigation. Of course, you would have to create an URL by which to fetch the content, either using a parameter or the category name as slug (with a route).

As I said above, it does not really matter if you call the thing a category or a tag, it is just a way to create a taxonomy. And as I also explained above, it depends on whether you want to add a single or multiple categories/tags.

19

Hmm this seems too advanced for me - I’m not even sure what I’d put in the config as the right route. Thanks - was willing to learn slowly and appreciate the help but maybe bit too out of my depth.

20

Don’t give up on it yet, I think if you play around with it a bit, you’ll get to it. And you don’t have to use routes, you can work with parameters for a start. Check out the blog examples in the cookbook, how to work and filter by tag. That is a good starting point to get the idea.