Solved

Passing a value to a section when using the Section Rendering API?

MVS-ONE
Shopify Partner
9 0 1

Is something like this possible? I can get sections, but what I'd like to do is pass some data to it, like a product handle, that I can then access in the section.

 

Eg: 

 

fetch(`${window.Shopify.routes.root}?sections=my-section&handle=my-product`)

 

Accepted Solution (1)
nvchien
Shopify Partner
51 19 12

This is an accepted solution.

@MVS-ONE You only need to pass the "sections" value.

Please note that you can only fetch sections created by theme settings.
You cannot pass data to the section to create and render a new one.

This is documentation: https://shopify.dev/docs/api/ajax/section-rendering.

 

Noted by Shopify:

"You can't specify section setting values through the Section Rendering API. If a requested section exists in a template, or is statically rendered, then the existing section settings apply. Otherwise, any default values are used."

View solution in original post

Replies 5 (5)

nvchien
Shopify Partner
51 19 12

Hi @MVS-ONE 

 

Since Liquid is rendered before HTML, CSS, and JavaScript, you can insert Liquid variables in your code. It will look similar to this:

fetch(`${window.Shopify.routes.root}?sections=my-section&handle={{ product.handle }}`)

 

MVS-ONE
Shopify Partner
9 0 1

Thanks for the reply! The question was more about how I then access the string inside the section that is rendered. 

 

This:

&handle={{ product.handle }}

 works, but I can't seem to access it within the section that is then rendered.

nvchien
Shopify Partner
51 19 12

Hi @MVS-ONE,

 

Sorry, I don't really understand your mean. I'm assuming you're trying to get the HTML of a specific section from a Shopify page.

For example, you want to get specific section on the home page:

const sectionId = 'template--17929141485819__featured_collection'; // REPLACE BY YOUR SECTION ID
fetch(`/?sections=${sectionId}`).then(res => res.text()).then(data => console.log('This is HTML data:', data));

 

Another example, if you want to get section on product page:

const sectionId = 'template--17929141649659__main' // REPLACE BY YOUR SECTION ID
const productHandle = {{ product.handle | json }}
fetch(`products/${productHandle}/?sections=${sectionId}`).then(res => res.text()).then(data => console.log('This is HTML data:', data));

 

So the correct path would be:

`your-page-url/sections=${sectionId}`

 

You can do the same with cart page, collection page,...

Hope this helps.

MVS-ONE
Shopify Partner
9 0 1

I'm trying to pass data to a section that is loaded with the API, as described in the original question: 

 

Eg; If my index.liquid contains

 

fetch(`${window.Shopify.routes.root}?sections=my-section&handle={{ product.handle }}`)

 

 

How can I access the value of &handle= in my-section.liquid?

nvchien
Shopify Partner
51 19 12

This is an accepted solution.

@MVS-ONE You only need to pass the "sections" value.

Please note that you can only fetch sections created by theme settings.
You cannot pass data to the section to create and render a new one.

This is documentation: https://shopify.dev/docs/api/ajax/section-rendering.

 

Noted by Shopify:

"You can't specify section setting values through the Section Rendering API. If a requested section exists in a template, or is statically rendered, then the existing section settings apply. Otherwise, any default values are used."