Solved

How to use the Section Rendering API?

TomDavies
Shopify Partner
15 1 6

I'm having trouble getting the section rendering API to work properly.

I've read through the docs here for the Section Rendering API: https://shopify.dev/docs/themes/sections/section-rendering-api 

I can get the Section Rendering API to return just a section using Javascript like so:

fetch('/?section_id=product-template')
.then(response => response.text())
.then(data => console.log(data));

However, the response does not have any of the Liquid context setup. For example, the product, collection or cart variables are all blank.

I have a few questions that would help shed some light on this:

1. What is needed to get the section to include Liquid context such as product, collection and cart variables? If you could include an example that includes this that'd be ideal.

2. Will the Section Rendering API work on existing theme sections or only on the sections everywhere developer preview theme sections?

3. Is there a way to pass additional variables to sections called by the Section Rendering API? For example, if I want to pass specific product ids to show in the section, could I pass them as request params?

Thanks,

Tom

️ Flair product badges https://apps.shopify.com/flair ️ Best Sellers - https://apps.shopify.com/best-sellers
Accepted Solution (1)

BenAbbes
Visitor
2 1 2

This is an accepted solution.

I think it's quite normal, as you requested the rendered html of the homepage (root) and there is no product/collection in the liquid context of the homepage, as they aren't global objects that are present everywhere...

 

I suggest you to request a product page by its handle and see if this work for exemple:

fetch('/products/product-handle?section_id=product-template')

.then(response => response.text())

.then(data => console.log(data));

View solution in original post

Replies 5 (5)

BenAbbes
Visitor
2 1 2

This is an accepted solution.

I think it's quite normal, as you requested the rendered html of the homepage (root) and there is no product/collection in the liquid context of the homepage, as they aren't global objects that are present everywhere...

 

I suggest you to request a product page by its handle and see if this work for exemple:

fetch('/products/product-handle?section_id=product-template')

.then(response => response.text())

.then(data => console.log(data));

TomDavies
Shopify Partner
15 1 6

Thanks @BenAbbes! That answers my questions 1 and 2 above. The Section Rendering API examples all hit the root so that tripped me up.

So that just leaves 3. Is there a way to pass additional variables to sections called by the Section Rendering API? 

In a perfect world I'd like to be able to pass in an array of product ids as query params such as 

fetch('/products/product-handle?section_id=product-template&product_ids=1,2,3,4')

This would let me batch process a list of products similar to a collection loop. Otherwise, I will have to make N calls for each product in a collection grid which would be a lesser user experience and consume more Shopify resources. I know Shopify doesn't typically handle query params in Liquid but since this is an "API" I am hopeful there is a way to access custom params in Liquid from the Section Rendering API.

️ Flair product badges https://apps.shopify.com/flair ️ Best Sellers - https://apps.shopify.com/best-sellers
BenAbbes
Visitor
2 1 2

Hi @TomDavies, regarding your 3 question, let's be honest the "Section Rendering Api" is not really an "Api". The Fetch api is a web standard api that is present in the browser context everywhere, All that shopify offers by this so-called Api is a query parameter which allows you to render the liquid of an isolated section, instead of rendering the whole template.liquid....

Now that things are clear, we know that what is possible with liquid without this query parameter, remains possible with that parameter...

Below is a workaround I use to access the query parameter in liquid, I'll leave you the link where you're going to find the code and the explanation of the process :

https://freakdesign.com.au/blogs/news/get-the-url-querystring-values-with-liquid-in-shopify

Note: I don't know if this workaround will work in conjunction with the Section Rendering api. In case it doesn't work, you can use it with alternative template and it will work as expected, since the section rendering api is sort of "alternative template" with "layout none".

Good luck ✌️ 

TomDavies
Shopify Partner
15 1 6

Thanks @BenAbbes. I read about that workaround before I posted this thread. That workaround is not viable for a production setup though since Shopify caches the responses. You may end up with a cached version of the query parameters which makes this not an option for me.

Shopify does process a select few query parameters and exposes them to liquid. For example, you can access the variant by passing the query param variant=<ID> and then get it with product.selected_variant. I don't think there is a way to get random query parameters though so I'll mark your first answer as the answer.

That's interesting the section rendering api is basically an alternative template with layout none. I hadn't made that connection but that is a nice alternative if the Section Rendering API ever goes away.

Thanks again.

- Tom

️ Flair product badges https://apps.shopify.com/flair ️ Best Sellers - https://apps.shopify.com/best-sellers
Mooh07
Shopify Partner
2 0 2

A bit late but I just had same problem, solution is simple, just pass a variant parameter and switch it to a random value in each time, Shopify will ignore the cache if ?variant is present to make sure the latest inventory level is sent back 🙂