List items or contacts

[remove]

Hello from Holland,

This is my first post. I love the approach of this CMS, great work!

Is it possible to make a sortable list of items or contacts? Each item links to a detailpage. Is there a module or guide?  I'am no coder. I have included an image. 

[yellowled]

As in most cases with PW, there are multiple ways to accomplish this. That can be scary if you're coming from a module-based system and/or are not a coder, but once you “get” how much freedom it can give you to not have to rely on modules, it's a thing of beauty. Yes, it means you're going to have to write PHP code, but you have the trusty PW API to help you with it. It's really not that big of a deal, trust me. (I'm an idiot in PHP myself.)

Let's assess what you need here and strip it down to very basic concepts. Basic concepts are great, because they are usually generic and thus reusable. As you probably know by now, the most basic concept in PW is a page.  So what you need is a page type to list all the items, a page type for the actual items and a page type for categories. You'll probably want a superordinate page type for categories as well, but since those don't necessarily have to emit frontend markup, they're pretty easy to define. Your page tree for this might look like this:

• Overview
  • Item A
  • Item B
  • Item C
• Categories
  • Category A
  • Category B
  • Category C

Categories as well as its child pages most likely only need a placeholder template since they don't necessarily emit frontend markup. You could have a category.php in your templates folder that looks like this:

<?php
// Placeholder template for categories

Now, in your template for items (let's call it item.php), you would need a field to associate the items with a category, meaning: with a page that is a child page of „Categories“ and/or has the categories template. So you would create a field of the Page fieldtype, call it e.g. “itemcategory” and in its settings limit it to one page (meaning one category), which has to be a child of the page “Categories” and have the categories template. All that is pretty self-explanatory once you see the Page fieldtype in the PW backend. If you add this “Item Category” field to your item template and create a new page with that template in your backend, you can now choose a page representing a category for that item. (Let's skip the actual content of item.php, that's not really relevant for the list here.)

Now, how do we list those items in your format? We need a template for the overview page, let's call it item-list.php. In that template, we can do this:

<?php
// Get all child pages, i.e. items
$items = $page->children;
echo "<ul>";
// For each item in our list
foreach ($items as $item) {
   // Create a list item including a link to the page, the page
   // title and the category title
   echo "<li><a href='{$item->url}'>{$item->title} ({item->itemcategory->title})</a></li>";
}
echo "</ul>";

The filter is a bit more complicated, but mostly because it depends on how you want to implement that. One option would be to just go with a JS-based solution, at least that's what I would do. (I'm a bit more comfortable with JS/jQuery than with PHP, so …)

You would change your item-list.php maybe like this:

<?php
// Get all children of the categories page
$categories = $pages->get('/categories/')->children;

// Create buttons for all categories
<div class="filter">
Filter: 
foreach ($categories as $cat) {
    echo "<button class='show-cat' data-show='" . strtolower($cat->title) . "' type='button'>{$cat->title}</button>";
}
echo "</div>";

// Get all child pages, i.e. items
$items = $page->children;

// List all items
echo "<ul class='items'>";
foreach ($items as $item) {
   echo "<li class='" . strtolower(item->itemcategory->title) . "'><a href='{$item->url}'>{$item->title} ({item->itemcategory->title})</a></li>";
}
echo "</ul>";

So now you have

• a button for each category which stores the lower-case name of said category in the data-show attribute
• list items which have class names which also have the lower-case name of their associated category

which means you can write a little piece of jQuery

$('.show-cat').click(function() {
    var showme = $(this).data('show');
    $('.items > li').hide();
    $('.items > li').hasClass(showme).show();
}

which gets the associated category class of the button and then first hides all the list items and then shows only the ones which have the class associated with the button (i.e. the class matching the selected category). Please note that this JS code a) requires the jQuery library and b) is not perfect for performance, but the easiest way to quickly show you how to do it. It would be better to instead add and remove classes, but for that we would need another code example for the CSS you'd need for those, and I'm already posting a really long example here. 

Also please note that all this is untested and written from scratch off the top of my head on a lazy Sunday evening, so there might be typos. There might even be logical errors in the code. (There probably are. As I said, I'm an idiot in PHP. )

Sorry about that if that's the case, but I hope this example gives you an idea of how simple it can be to write the code for this yourself instead of relying on a module. Yes, other systems might give you a module ready to plug in which gives you about that functionality without having to write a single line of code (well, probably not), but this way you control exactly what code is used. You don't have to have some part of it in one specific way because the module's author decided to do it that way. You can have it your way.

[remove]

WoW, this is a bit scary, but like it a lot. I will try to get this to work.

Is it an idea to put all working pieces of code in a forum called 'snippets'? It could be handy for other people to fond and want to do the same thing.

[yellowled]

WoW, this is a bit scary, but like it a lot. I will try to get this to work.

Is it an idea to put all working pieces of code in a forum called 'snippets'?

I remember somebody mentioning an idea to create a wiki or something for code snippets.

Trust me, this will get a lot less scary once you're used it a couple of times, even if only in “practice templates”. That's usually the best recommendation for people who are new to PW anyway – implement a site that you already have build and/or designed with it. Well, first get to know the docs and the API a little, but then just start working with it. It is so much easier than it sounds in theory …

[yellowled]

For the record, https://processwire.com/talk/topic/7572-processwire-recipes/ is the discussion about a snippets site for PW.

[remove]

I'am starting to get to know how PW is structured. The examples you posted work, thank you for this. However the links are not sortable. This is the Magic I'am looking for. Of course I understand that nobody is going to write the code for me. But it looks to me that I have to build every functionality from scratch with WP.

I believe that other PW users need more functionality, like snippets to get them going. I've posted on the link concerning Snippets page.

[kongondo]

Welcome to PW and the forum toothpaste...

I'am starting to get to know how PW is structured. The examples you posted work, thank you for this. However the links are not sortable. This is the Magic I'am looking for. Of course I understand that nobody is going to write the code for me. But it looks to me that I have to build every functionality from scratch with WP.

I believe that other PW users need more functionality, like snippets to get them going. I've posted on the link concerning Snippets page.

We have a similar ongoing discussion and a great reply from Ryan...PW already has all the functionality you need to get you going...you just need to know how to use the tools it offers...that does require some reading and some work on your part . We have been trying to add more tutorials such as these to get new users started....

[totoff]

However the links are not sortable.

The links (aka: items) are sortable via the PW api:

$items = $page->children(sort=-date);

for example will sort by date. Further reading: http://processwire.com/api/selectors/#sort

[yellowled]

However the links are not sortable.

Oh, that's because I misunderstood. I thought you wanted to filter, i.e. “only show the items that belong to a specific category”. That's because in your mockup, it explicitly says “Filter:”, not “Sort”. Sorry, for sorting you're going to need either completely different JS or what totoff suggested.

[remove]

@yellowled

The listing of items work fine! Thx for the example. For anyone who want to use the code, there was a minor bug in item-list.  

// Get all children of the categories page
				$categories = $pages->get('/categories/')->children;
				
				// Create buttons for all categories
				echo "<div class='filter'>";
				Filter: 
				foreach ($categories as $cat) {
				    echo "<button class='show-cat' data-show='" . strtolower($cat->title) . "' type='button'>{$cat->title}</button>";
				}
				echo "</div>";
				
				// Get all child pages, i.e. items
				$items = $page->children;
				
				// List all items
				echo "<ul class='items'>";
				foreach ($items as $item) {
				   echo "<li class='" . strtolower($item->itemcategory->title) . "'><a href='{$item->url}'>{$item->title} ({$item->itemcategory->title})</a></li>";
				}
				echo "</ul>";

The filter part is a different chapter. The jQuery solution doesn't work for me. Is there an other way to exclude/filter items from the list?