Dynamic sections

obsolete: check how this is referenced now

not implemented

SALVO-TS supports Shopify's Section Rendering API.

info

Note that the Cart AJAX API and Product Recommendations API also support rendering sections simulatenously, which helps avoid an extra API call if you're planning to use dynamic sections on the cart page or for recommended products. Check out the docs on those features for more information.

Rendering a new section

ts
await sections.append(['social-1', 'social-2'], { after: 'header' })

ts
await sections.append(['social-1', 'social-2'], { after: 'header' })

Replacing an existing section

Dynamic sections allow you to replace a section (i.e. the cart table) without refreshing the entire page. The process for replacing a section is identical to adding a new one, but you must specify the section ID to replace:

ts
await sections.replace(['footer'])

ts
await sections.replace(['footer'])

Loading section data directly

If you need direct access to the section (i.e. because you're using it to generate JSON), SALVO-TS can give you the raw response from Shopify, or automatically parse out the section wrapper for you:

ts
const res = await sections.render(['header', 'footer']);
// => {
//     header: {
//         sectionId: 'header',
//         sectionWrapperId: 'shopify-section-header',
//         sectionWrapperClass: 'shopify-section',
//         contents: '<!-- section content -->'
//     },
//     footer: {
//         sectionId: 'footer',
//         sectionWrapperId: 'shopify-section-footer',
//         sectionWrapperClass: 'shopify-section',
//         contents: '<!-- section content -->'
//     },
// }
const res = await sections.render(['header', 'footer'], { raw: true });
// => {
//     header: "<div id=\"shopify-section-header\" class=\"shopify-section\">\n<!-- section content -->\n</div>",
//     footer: "<div id=\"shopify-section-footer\" class=\"shopify-section\">\n<!-- section content -->\n</div>",
// }

ts
const res = await sections.render(['header', 'footer']);
// => {
//     header: {
//         sectionId: 'header',
//         sectionWrapperId: 'shopify-section-header',
//         sectionWrapperClass: 'shopify-section',
//         contents: '<!-- section content -->'
//     },
//     footer: {
//         sectionId: 'footer',
//         sectionWrapperId: 'shopify-section-footer',
//         sectionWrapperClass: 'shopify-section',
//         contents: '<!-- section content -->'
//     },
// }
const res = await sections.render(['header', 'footer'], { raw: true });
// => {
//     header: "<div id=\"shopify-section-header\" class=\"shopify-section\">\n<!-- section content -->\n</div>",
//     footer: "<div id=\"shopify-section-footer\" class=\"shopify-section\">\n<!-- section content -->\n</div>",
// }