Hi guys. I found the way how to dynamically load Section with parameter by using a query string via fetch. By dynamically loading the section on demand, we can save our resources and boost rendering speed. If you have a better solution please share the information for all Shopify developers. Thank you.
Fetching the section as follows:
<script>
async function renderSection() {
var appendToBody = await fetch(`/?sections=your-section-name&optional-key=optional-value-to-pass`)
.then(response => response.json()) // It returns a promise which resolves with the result of parsing the body text as JSON.
.then(data => {
$('body').append( data["your-section-name-as-key"] ); // Append the contents to the body with JQuery
});
}
</script>
Then call this function and parse the query string in the Section.
Shopify Discussion
Partners and Developers