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

Solved

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

MVS-ONE
Shopify Partner
17 0 3

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
55 23 14

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."

- If this solution helped you out, please consider accepting it as a solution and giving it a thumbs-up. Your feedback is valuable to me and the community!
- If you're feeling extra generous, you can always buy me a coffee . Your support helps fuel my Shopify knowledge and keeps the solutions flowing!
- You can also follow more tips and tricks from my blog.

View solution in original post

Replies 5 (5)

nvchien
Shopify Partner
55 23 14

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 }}`)

 

- If this solution helped you out, please consider accepting it as a solution and giving it a thumbs-up. Your feedback is valuable to me and the community!
- If you're feeling extra generous, you can always buy me a coffee . Your support helps fuel my Shopify knowledge and keeps the solutions flowing!
- You can also follow more tips and tricks from my blog.
MVS-ONE
Shopify Partner
17 0 3

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
55 23 14

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.

- If this solution helped you out, please consider accepting it as a solution and giving it a thumbs-up. Your feedback is valuable to me and the community!
- If you're feeling extra generous, you can always buy me a coffee . Your support helps fuel my Shopify knowledge and keeps the solutions flowing!
- You can also follow more tips and tricks from my blog.
MVS-ONE
Shopify Partner
17 0 3

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
55 23 14

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."

- If this solution helped you out, please consider accepting it as a solution and giving it a thumbs-up. Your feedback is valuable to me and the community!
- If you're feeling extra generous, you can always buy me a coffee . Your support helps fuel my Shopify knowledge and keeps the solutions flowing!
- You can also follow more tips and tricks from my blog.