Forum

Thread tagged as: Question, Shop

Product filtering

Hi, I've tried reading the docs and forum posts, but I really don't know where to start when it comes to sorting and filtering products! Any help would be appreciated! The product listing page has a sidebar with the below code, but I don't understand how to create the sorts and filters.

<div class="sidebar-block">
                                                <div class="block-title">
                                                    <span>Sort</span>
                                                    <div class="toggle-arrow"></div>
                                                </div>
                                                <div class="block-content">
                                                    <ul class="category-list">
                                                    <li><a href="#">A to Z</a></li>
                                                        <li><a href="#">Z to A</a></li>
                                                        <li><a href="#">Price ascending</a></li>
                                                        <li><a href="#">Price descending</a></li>
                                                    </ul>
                                                    <div class="bg-striped"></div>
                                                </div>
                                            </div>
                                            <div class="sidebar-block">
                                                <div class="block-title">
                                                    <span>Filter by Brand</span>
                                                    <div class="toggle-arrow"></div>
                                                </div>
                                                <div class="block-content">

                                                    <ul class="category-list">
                                                        <li><a href="#">Adidas</a></li>
                                                        <li><a href="#">Bargear</a></li>
                                                        <li><a href="#">Boxercraft</a></li>
                                                        <li><a href="#">Cold Store Clothing</a></li>
                                                            <li><a href="#">Craghoppers</a></li>
                                                        <li><a href="#">Denny’s Chef Wear</a></li>
                                                            <li><a href="#">Dickies</a></li>
                                                        <li><a href="#">Helly Hansen</a></li>
                                                        <li><a href="#">JCB</a></li>
                                                        <li><a href="#">Mascot</a></li>
                                                        <li><a href="#">Nike</a></li>
                                                        <li><a href="#">Nike Golf</a></li>
                                                        <li><a href="#">Rhino</a></li>
                                                        <li><a href="#">Snickers</a></li>
                                                    </ul>
                                                    <div class="bg-striped"></div>
                                                </div>
                                            </div>
Jade Marling

Jade Marling 0 points

  • 4 years ago

Just like the CMS, think about Shop as a framework of functions rather than a system you can "skin". If you're trying to skin the supplied files then I think you're going to struggle.

Decide how do you want to organise your products: i.e. By category or brand etc.

Then work out your url structure. i.e. /shop/category/category-name/product or perhaps even more simple /shop/brand-name/product.

Then set up the main page templates for each of those slugs as Perch calls them - i.e. shop landing page + brand page + product detail page.

For each page's location set a route that tells Perch where the page lives. So shop/brand might have a pattern of shop/[slug:brand] while shop/brand/product might have a pattern of shop/[slug:brand]/[slug:product].

So your brand page template might then have the following function:

        perch_shop_products([
            'template' => 'products/product_list.html',
            'variants' => true,
            'filter' => 'brand.slug',
            'match' => 'eq',
            'value' => perch_get('brand')
        ]); 

That will list any products that match the brand slug in the URL. (You could add sort to the code above if you like.)

The product_list.hml template would then have the following link inside it which generates the correct URL for displaying the product page.

<a href="/shop/<perch:shop id="brand" type="shop_brand" output="slug"/>/<perch:shop id="slug" type="slug" />/">

The URLs will be generated using whichever brand is associated with the product. Obviously if your product is in more than one brand you will struggle with the example above so you'd need to work a different way.

I hope this helps you get started.

Jon

Hi Jon, > Thanks for that! I'll try and get my head around it. At the moment the products are being shown on the products.php after they have been narrowed down with sub categories, so in the URL does contain the catPath however has nothing to do with brands. So saying that, if I'm in the 'disposables' category the URL is products.php?cat=products/clothing/disposable/ The issue I'm having from there is trying to filter down the products in that category to a particular brand.

Add the brand slug to your URL query and filter on that too (if it exists). Or you can create a category page template that lists products based on the category and filter again from there if the brand exists.

So this is the filter by brand function

<?php   perch_shop_brands([
    'template' => 'brands/brands_list.html',

]) ?>

and this is the brands_list.html

<a href="?brand=<perch:shop id="brand" type="shop_brand" output="slug"/><perch:shop id="slug" type="slug" />"><li><perch:shop id="title" type="text" /></li></a>

That just seems to show all of the products

That function doesn't filter products by brand. That lists brands.

You need to filter your product list by category and then by brand. I've hinted at two ways to go about it off the top of my head, and I'm sure there are more that better people than I can suggest. There's no real one way to do anything in Perch. It's entirely down to you. The templates are only there for a guide.

Okay, thanks. How would the sort work then? I've got four links A to Z, Z to A, Price ascending, Price descending, Obviously you can do the sort automatically but I'm not sure how to make them user defined.

You'd tie the relevant query URL string (e.g. sort-by=asc etc ) to the button, refresh the page (or use js to automate the submission) and then pass that new variable into the function displaying the products which then sorts them by that particular variable.

Rachel Andrew

Rachel Andrew 394 points
Perch Support

To work with shop you need to understands the basics of PHP (really just variables and simple arrays). I wrote up some info here https://docs.grabaperch.com/perch/building/servers/how-do-i-get-started-with-php/