How to create product filters?

[cboetens]

Hi guys

I guess this is the right forum to post my question. If not, do let me know. Ok, I'm fairly new to ProcessWire and so far I really like the CMS! It's magnificent to use and really straight forward. Big thanks to Ryan for that.

Now, the question I have. I have a template called 'products_categories.php' in which I collect and render all the different categories (the categories basically act as a filter) for a variety of products and next to the categories, I render all the products, like so:

<?php include('includes/header.php') ?>
<?php
$categoryName = $sanitizer->pageName($input->urlSegment(1));
$subcategoryName = $sanitizer->pageName($input->urlSegment(2));

pre($categoryName);
pre($subcategoryName);

$categories = $page->get("template=products_categories");
$category = $categories->get("template=products_categories_item, name=" . $categoryName);

if($category->id){
    $session->category = $category->id;
    $subcategory = $category->get("template=products_categories_item, name=" . $subcategoryName);
    
    if($subcategory->id){
        $session->subcategory = $subcategory->id;
    }
}

$selector = "template=products_item";
if($category->id){
    $selector .= ", products_categories=" . $category;
}

if(isset($subcategory->id)){
    $selector .= ", products_categories=" . $subcategory;
}

$products_items = $page->find($selector);

?>
<div class="uk-section">
    <div class="uk-container">
        <?php if(!empty($page->headline)) { ?>
        <h1><?= $page->headline ?></h1>
        <?php } ?>
        
        
        <!-- **** COMMENT: create grid for products **** --->
        <div class="row">
            
            <div class="col-md-3">
                <div class="uk-card mr-3 uk-card-default uk-card-body">
                    <h3 class="uk-card-title">Productcategorieën</h3>
                    <ul class="uk-list">
                        <?php
                        foreach($categories->children() as $c){
                        ?>
                        <li class="<?= ($category->id===$c->id ? 'active ' : '') ?>">
                            <a href="<?= $page->url . $c->name . '/' ?>"><?= $c->title; ?></a>
                            <?php if($c->hasChildren){ ?>
                            <ul>
                                <?php foreach($c->children() as $sc) {?>
                                <li class="<?= ($category->id==$c->id && $subcategory->id==$sc->id ? 'active ' : '') ?>">
                                    <a href="<?= $page->url . $c->name . '/' . $sc->name . '/' ?>"><?= $sc->title; ?></a>
                                </li>
                                <?php } ?>
                            </ul>
                            <?php } ?>
                        </li>
                        <?php
                        }
                        ?>
                    </ul>
                </div>
            </div>
            
            <div class="col-md-9">
                <div class="uk-child-width-1-3@s uk-grid-match uk-grid-margin-small uk-grid-small" uk-grid>
                    <?php
                    foreach($products_items as $product) {
                    ?>
                    
                    <div class="uk-card">
                        <?php if(isset($product->image)) { ?>
                        <div class="uk-card-media-top">
                            <img src="<?= $product->image->URL; ?>" title="<?= $product->title; ?>" alt="<?= $product->intro; ?>">
                        </div>
                        <?php } ?>
                        <?php if(!empty($product->title) || !empty($product->intro)) {  ?>
                        <div class="uk-card-body uk-card-default">
                            <?php if(!empty($product->title)) { ?>
                            <h3 class="uk-card-title"><?= $product->title; ?></h3>
                            <?php } ?>
                            <?php if(!empty($product->intro)) { ?>
                            <p><?= $product->intro; ?></p>
                            <?php } ?>
                            <?php if (!empty($product->price)): ?>
                            <h3 class="uk-card-title">&euro;&nbsp;<?= $product->price; ?>&nbsp;(excl. btw)</h3>
                            <?php endif; ?>
                            <a class="uk-button uk-button-primary" href="<?= $product->url; ?>">Bekijk</a>
                        </div>
                        <?php } ?>
                    </div>
                    
                    
                    <?php } ?>
                </div>
            </div>
        </div>
    </div>
</div>
<?php include('includes/footer.php'); ?>

Now, I can't seem to get the filter to work. The URL behind every (sub)category should go straight back to the template 'products_categories.php', that way I can get a range of products according to the selected/ clicked URL.

What am I missing here? Is this not the correct way to handle things?

Any help is welcome!

Thanks.

Cédric

[cboetens]

Hi everybody

This topic can be closed. I have found the solution.

Thanks anyway!

[gebeer]

Hello and welcome to the forum!

Glad you figured it out. Would be nice if you could also share what the problem was, so that others can learn from it.

Was it this line?

1 hour ago, cboetens said:

$products_items = $page->find($selector);

 

[cboetens]

3 minutes ago, gebeer said:

Hello and welcome to the forum!

Glad you figured it out. Would be nice if you could also share what the problem was, so that others can learn from it.

Was it this line?

 

Hi Gebeer!

Thanks for the kind words! Indirectly that line indeed caused the problem.

If you have a look at the two if-statements just above this line, you will see that I don't check if the values "$category->id" and "$subcategory->id" are set or not and if they are empty or not. With the faulty code the variable "$selector" in the line of code that you mentioned above is empty.

That way, the products are not being loaded when a category is selected. This was problem 1.

I've made a second adjustment. In my code I have renamed the template "products_categories.php" to "products.php". As an alternate template name for "products_categories.php" I have set "products.php". I don't really know if an alternate file name is necessary tough?

That way I can easily grab a category and select all products linking to that category, I guess?

The code that resolved my problem was the following:

if(isset($category->id) && !empty($category->id)){
    $selector .= ", products_categories=" . $category;
}

if(isset($subcategory->id) && !empty($subcategory->id)){
    $selector .= ", products_categories=" . $subcategory;
}

Feel free to post any feedback. It's an interesting subject.

Greetings.

[gebeer]

Thanks for posting the solution to your problem!

16 minutes ago, cboetens said:

if(isset($category->id) && !empty($category->id)){

To test if a full page object was returned by $pages->get() you can use
 

if($category->id) {...}

This is usually enough. When PW doesn't find a page it returns an object NullPage. This NullPage object returns null for id. So the simple test above is sufficient.

Since you get your category and subcategory names from the urlSegments, you could test earlier in your code if these exist. If there is no urlSegment(1),

$categoryName = $sanitizer->pageName($input->urlSegment(1));

will return an empty string. So you could test for that.

I can recommend to start early on using the fabulous debugger module TracyDebugger. It makes dev life easier and can save a lot of time. I use it on every project. Also it is always goo to have the API reference open in a separate tab or browser window ?

[cboetens]

13 minutes ago, gebeer said:

Thanks for posting the solution to your problem!

To test if a full page object was returned by $pages->get() you can use
 

if($category->id) {...}

This is usually enough. When PW doesn't find a page it returns an object NullPage. This NullPage object returns null for id. So the simple test above is sufficient.

Since you get your category and subcategory names from the urlSegments, you could test earlier in your code if these exist. If there is no urlSegment(1),

$categoryName = $sanitizer->pageName($input->urlSegment(1));

will return an empty string. So you could test for that.

I can recommend to start early on using the fabulous debugger module TracyDebugger. It makes dev life easier and can save a lot of time. I use it on every project. Also it is always goo to have the API reference open in a separate tab or browser window ?

Hi gebeer

Thanks for the excellent suggestions! I am going to test these out immediately.

In the meanwhile I've adjusted both of the if-statements. It's the little tips that make a lot of difference to me, thanks for that!

As I'm gaining more and more experience, I am sure I will discover a lot of other small tips.

Thanks again!