Forum

Thread tagged as: Question, Runway, Shop

Dynamically List and Display Shop Products By Categories.

I want to have a page /shop that displays a list of product categories. Then when you click on the category it takes you to a page that displays all the products in that category.

I have created a page /shop/category/ that does this for a single category using:

  <?php perch_shop_products([
      'category' => 'products/washers',
    ]);
    ?>

This works fine.

I want to avoid having to create a new master page for each category and hard coding the product category like this each time.

A: How can I generate the links dynamically for the categories on the /shop page? so shop/category becomes shop/category/washers or shop/washers

B: How can I take the value from the link to dynamically change the perch_shop_products category query?

If this is too general to answer here could we have something similar added to the examples section in the shop docs (I am living in them at the moment) please.

Perch Runway: 2.8.31, PHP: 7.0.10, MySQL: mysqlnd 5.0.12-dev - 20150407 - $Id: 241ae00989d1995ffcbbf63d579943635faf9972 $, with PDO
Server OS: Darwin, apache2handler
Installed apps: content (2.8.31), assets (2.8.31), categories (2.8.31), perch_blog (5.0), perch_forms (1.8.3), perch_shop_orders (1.0.8), perch_shop_products (1.0.8), perch_shop (1.0.8), perch_members (1.5)
App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_forms', 'perch_blog', 'perch_members', 'perch_shop', );
PERCH_LOGINPATH: /perch
PERCH_PATH: /Users/greg/Sites/millers/trunk/perch
PERCH_CORE: /Users/greg/Sites/millers/trunk/perch/core
PERCH_RESFILEPATH: /Users/greg/Sites/millers/trunk/perch/resources
Image manipulation: GD
PHP limits: Max upload 32M, Max POST 32M, Memory: 128M, Total max file upload: 32M
F1: 2edba60ed1f613d6dd804feb202456a2
Resource folder writeable: Yes
HTTP_HOST: millers
DOCUMENT_ROOT: /Users/greg/Sites/millers/trunk
REQUEST_URI: /perch/core/settings/diagnostics/
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php
Greg Riley

Greg Riley 1 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

You'd generate the links by using perch:categories in your template:

<perch:categories id="category" set="products" label="Category">
    <a href="/shop/category/<perch:category id="catSlug" />">
        <perch:category id="catTitle" />
    </a>
</perch:categories>

You'd create a route for your master page:

shop/category/[slug:cat]

and then you'd read the value of cat back in on your page:

perch_shop_products([ 
    'category' => 'products/'.perch_get('cat'), 
]);

Thanks Drew that answer is fantastic.

Not sure I have followed it all correctly but it is working great.

on the master page template for the /shop page I have added a content region:

<?php perch_content('cat_list'); ?>

This uses a template product_cat_list.html

<perch:before><ul></perch:before>

<li>
<perch:categories id="category" set="products" label="Category"> <a href="/shop/category/<perch:category id="catSlug" />"> <perch:category id="catTitle" /> </a> </perch:categories>

</li>
<perch:after></ul></perch:after>

The end result is not what I was expecting at all but is actually a bonus as I can select which categories to display on the list of links from inside Perch admin so if a product category is empty I can choose not to display it.

Drew McLellan

Drew McLellan 2638 points
Perch Support

So is it all good?

Yes it is working nicely thanks Drew. I have added a custom category template so I can add a thumbnail image to each product category:

<perch:before><ul></perch:before>
<li style="margin-left: <perch:category id="catDepth" type="hidden" />0px;">
    <h4><perch:category id="catTitle" type="smarttext" label="Title" required="true" /></h4>
    <perch:category id="catSlug" type="slug" for="catTitle" suppress="true" />
    <perch:category id="desc" type="textarea" label="Description" editor="markitup" markdown="true" size="s" />
    <img src="<perch:category id="image" type="image"  label="Image" width="200" />" alt="<perch:category type="text" id="alt" label="Description" required="true" help="e.g. Picture to describe category" />" />
</li>
<perch:after></ul></perch:after>

Then added that to the /shop page content region template.

<perch:before><ul></perch:before>
    <li>
<perch:categories id="category" set="products" label="Category"> <a href="/shop/category/<perch:category id="catSlug" />"> <perch:category id="catTitle" title="true" />
<img src="<perch:category id="image" type="image"  label="Image" width="200" />" alt="<perch:category type="text" id="alt" label="Description" required="true" help="e.g. Picture to describe category" />" />
    </a> </perch:categories>
    </li>
<perch:after></ul></perch:after>

Changed the region to allow multiple items so they are not all listed as one. I can now add an entry for each product category I require and reorder them as desired all from within Perch admin.

Next task is to do something similar for brands.