Struggling with blueprints

1

I am having a little trouble getting my head around blueprints. I have made two new templates in my child theme: product and product_list. I have a new blueprint (product.yaml) that adds some extra fields like description and price. That’s all good. But what I need to do is have another blueprint for product_list.yaml that adds the line below to the frontmatter so it knows to show a list of products:

content:
    items: '@self.children'
    order:
        by: date
        dir: desc
    limit: 10
    pagination: true

If I add it manually it works fine, but I can’t find a way to create this automatically when the product_list page is created. Am I wrong in thinking this can be done with blueprints?

2

Got a reply on Discord. Thanks @Karmalakas. It’s not necessary to use a blueprint, it can be done in the page template by using…

{% for child in page.children() %}

Instead of {% for child in page.collection %}

1 Like
3

@ozfiddler, You have already picked an answer, but I wonder if that is what your want to achieve.

The answer you got on Discord is correct as a workaround for the problem you presented: Setting the collection using a blueprint.

However, the answer should depend on what you desire to achieve…

  • Hardcoded:
    Do you always only want to display the direct children of the “list” page, with same ordering and other params? Then the provided solution is fine.
  • Flexible:
    • Could it be that different list pages use different items in its collection? Eg. based on categories, descendants, …
    • Could it be that different list pages use different collection properties, like ordering by price, or popularity instead of the default ordering by folder name?

If you want to provide flexibility you should go for frontmatter.

A collection can be defined in a blueprint. The following is added to the default.yaml blueprint of Quark:

collection:
  type: tab
  title: Collection Items

  fields:
    header.content.items:
      type: text
      label: Items in collection
      default: self@.children
    header.content.order.by:
      type: select
      label: Order by
      options:
        date: Date
        title: Title
        header.price: Price

Note: Above code should be indented so that ‘collection’ exactly aligns with ‘advanced’.

Above definition will give the following page in Admin:

Untitled
Untitled772×368 12.7 KB

The following frontmatter will be generated when ‘Price’ is selected:

---
title: Typography
content:
    items: self@.children
    order:
        by: header.price
---

And of course, you should now use {% for child in page.collection %} in the Twig template.

4

Great! Thanks for the detailed explanation. I’ll give that a try. :+1: