How can I query site information in custom block js template?

Hi!

I’ve just created a minimal custom block that functions as a product teaser. The editor can choose one of any published product pages to display. I used this query for the blueprint:

name: Product
icon: tag
fields:
  product:
    label: Product
    type: select
    options: query
    query: site.find('products').children.published

Now I would love to have a little preview of the product in the layout view in the panel. At the moment the template looks like this:

panel.plugin("lkssmnt/product-block", {
  blocks: {
    product: {
      template: `
        <div>
          <p>{{content.product}}</p>
        </div>
      `
    }
  }
});

which—as expected—only renders the /product/product-xyz to the block preview. I would like to get the fields of the selected product page like image and price, but I don’t know how to query for that. Something like:

{{site.find(content.product).price}}

Is that possible?

No, you would have to make an api call, see this example:

1 Like