Gets a Shopify section and parses it as JSON

get-shopify-section-as-json.js

/**
 * Get section from the rendering API
 * @see https://help.shopify.com/en/themes/development/sections/section-rendering-api
 *
 * @param {string} section
 *
 * @returns {Promise<Object>}
 */
export async function getSection(section) {
  try {
    // call the rendering API
    const data = await (await fetch(`/?section_id=${section}`)).text();
    // create a DOMParser and get the inside content of the section
    const parser = new DOMParser();
    const node = parser.parseFromString(data.toString(), 'text/html').querySelector('.shopify-section');
    if (!node) {
      console.error('No node found in', data);

      return {};
    }

    const content = (node.textContent || '').trim();

    // parse that content as JSON
    return JSON.parse(content);
  } catch (e) {
    console.error(e);
  }

  return {};
}

shopify-json-section.liquid

{% comment %}https://help.shopify.com/en/themes/development/sections/section-rendering-api{% endcomment %}
{% comment %}request.page_type will be "index" when using the section rendering API{% endcomment %}
{% comment %}content_for_header will contain the query string in the request{% endcomment %}
{%- if request.page_type == 'index' and content_for_header contains 'section_id' -%}
{
  {%- for block in section.blocks -%}
    {%- assign slug = block.settings.title | downcase -%}
    "{{ slug }}": {{- block.settings | json -}}{%- unless forloop.last -%},{%- endunless -%}
  {%- endfor -%}
}
{%- else -%}
  {%- for block in section.blocks -%}
    {%- assign slug = block.settings.title | downcase -%}
    <div id="{{ slug }}">{{ block.settings.title }}</div>
  {%- endfor -%}
{%- endif -%}