Simple Product Listing Pages by Category Slug

Question

I'm new to Craft and I'm trying to create very basic product listing pages based on Categories and I'm not sure where to start.

First, it doesn't look to me like you can create separate templates for each category, only the Category group, correct?

If that's true, then I need that template to be dynamic and list the products in a category that may be nested. The idea being that I will have navigation that will resolve to each category page.

I've gone through the page on Querying Categories and I think querying by Slug is what I want. I altered the code on that page based on this post in order to get whatever the last segment is:

{# Get the requested category slug from the URL #}
{% set requestedSlug = craft.app.request.segments|last %}


{# Fetch the category with that slug #}
{% set category = craft.categories()
    .slug(requestedSlug|literal)
    .one() %}

{% set entry = category %}

{% for entry in entries %}
    {{entry.title}}
    {{entry.url}}
    {{entry.image}}
{% endfor %}

For clarity I didn't put the entry items in HTML.

I feel like my problem is the second bit, setting the entry to category (which I cobbled together from posts here and in the docs) but I can't figure out how to get at the entry details from items in a category.

I also need to paginate the listings if that makes a difference.

Thanks in advance for any advice or pointers to good tutorials on using Categories to generate product listings.

Answer 1

You're nearly there! You are missing the part that fetches the entries related to your category.

With your current set up, you would need to do:

{# Get the requested category slug from the URL #}
{% set requestedSlug = craft.app.request.segments|last %}


{# Fetch the category with that slug #}
{% set category = craft.categories()
    .slug(requestedSlug|literal)
    .one() %}

{# Fetch the entries related to your category #}
{% set entries = craft.entries()
    .section('yourSectionHandle')
    .relatedTo(category)
    .all()%}

{% for entry in entries %}
    {{entry.title}}
    {{entry.url}}
    {{entry.image}}
{% endfor %}

Replace yourSectionHandle with, well... your section handle :)

Alternatively, Craft provides a way to simplify the process a bit.

First, it doesn't look to me like you can create separate templates for each category, only the Category group, correct?

You can manually create a template for each category by making a file named as your category slug but this is tedious to maintain.

The way you could handle that would start when you define your category group's settings.

This is only an example but you should get the gist of it.

First, define Settings → Categories → Your Group → Category URI Format to be categories/{slug}, the Template to categories and make a categories.twig template at the root of your templates folder.

Now, when you access yoursite.com/categories/category-slug (category-slug being an actual category slug), Craft will auto-inject a category variable to the template (like the entry variable on entry pages) allowing you to only have the following in the template:

{# Fetch the entries related to your auto-injected category variable #}
{% set entries = craft.entries()
    .section('yourSectionHandle')
    .relatedTo(category)
    .all()%}

{% for entry in entries %}
    {{entry.title}}
    {{entry.url}}
    {{entry.image}}
{% endfor %}

Hopefully, that makes sense for you!