Related List View inside Single Template

I want to include a list of all other products on a single product page (layouts/product/single.html).

I was hoping I could do something like this in the single template file:

{{ range where .Data.Pages “Type” “product” }}
{{ .Render “summary”}}
{{ end }}

However this will only work in the homepage template and not inside a layout template. (is why explained in the docs because I’m not getting it?)

Attempted Solutions

{{ .Render “summary” }} will render the current item. Is there a function that will list all other content items? After looking through the documentation the closest I can come up with is {{ .Prev.Title }} to list the previous item.

Moving the content files to data directory I can achieve this with the following:

{{ range .Site.Data.product }}
{{ .Title }}
{{ end }}

However I would like to reference the items stored in content/product/

I am new to Hugo and I am probably missing a key point but hopefully this post will help me (and others) to grasp a better understanding of the Hugo template system.

If I understood your questions correctly, you want to list all pages of type “product” on a page (accompanied with something about them like summary or product description).

I did a similar thing a while ago while creating an archive page for my pages of type post, it is documented here. Is this what you are looking for?

You can define where the location of the archive page and any extra items (apart from product descriptions) that appear in the page.

@parsiya yes but instead of an archive page I would like to display the list of other products within the single.html template of a product.

The ‘Recent’ variable is displaying what I want with the following code:

{{ range first 4 (where .Site.Recent “Type” “product”)}}
{{ .Render “list” }}
{{ end }}

It is confusing that ‘Recent’ works inside a layout template and not ‘Pages’ whereas in the homepage ‘Pages’ works just fine.

Now I need to add a filter to remove (this) product from displaying on the single.html template. Think of your recent posts list but excluding the current post from this list.

Ah, I misunderstood your original question. I thought you wanted to make a list of all products. Now I understand what you want to do. My apologies.

If you use Recent you should upgrade to Hugo 0.15. I don’t see how .Pages could work on the home page (maybe your old Hugo version …), but if you use these you should be safe all over:

.Site.Pages => for all pages
.Data.Pages => all pages for that Node (not applicable for single pages; think taxonomy/list pages).

Thanks @bep yes I was on version 0.14 upgrading to 0.15 allows me to call .Data.Pages within the template like so:

{{ range first 4 (where .Site.Pages “Type” “product”)}}
{{ .Render “list” }}
{{ end }}

I still haven’t found a way to exclude the current item from rendering. Hopefully there’s a function that will do this.

Totally untested, in the related range loop:

if ne . $
1 Like

@bep Did the trick :slight_smile: Thanks. Very impressed with the quick response of the Hugo community.

1 Like