How to use Section Rendering API for dynamic collection display?

Online Store and Theme Development
,
1

Good evening,

I’m trying to use the Section Rendering API to render the feature collection of the Dawn Theme. I want to change dinamically the collection showed.

I’m trying an approach like this:

var appendToBody = await fetch(/?sections=featured-collection).then(response => response.json());

I want to pass to the call the collection name, but I’m not obtaining the correct response.

Case 1:

var appendToBody = await fetch(/?sections=featured-collection&collection=rings).then(response => response.json());

In this case I’m obtaining and empty collection.

Case 2:

const params = { collection_handle: ‘rings’ };

const response = await fetch(‘/sections/featured-collection’,

{ method: ‘POST’, headers: { ‘Content-Type’: ‘application/json’, ‘X-Requested-With’: ‘XMLHttpRequest’ },

body: JSON.stringify(params) });

In this case I’m obtaining a 404 error (resource not found).

What’s wrong? I’d apreciate any help.

2

Hi, you can just simply request the section against a URL, like a collection.

E.g. fetch('/collections/best-sellers?section_id=featured-collection')

This will give you context of the collection object then.

Further information on the Section Rendering API can be found here.