Zeus

1{% comment %}
2    The contract every React section goes through. It renders a mount
3    point and the section's data beside it; islands.jsx finds the element
4    and mounts the .jsx whose filename matches `component`.
5
6    min_height holds the right shape open before the bundle runs. A mount
7    point contains only a script tag, so until React commits it is zero
8    pixels tall and the page assembles collapsed, then shoves everything
9    down. Liquid already knows the height — a slideshow's is a setting —
10    so it passes it through.
11  {% endcomment %}
12
13  <div
14    data-react-component="{{ component }}"
15    class="{{ class }}"
16    {% if min_height %}style="--island-min-h: {{ min_height }}"{% endif %}
17  >
18    {% comment %} Typed, or the browser would execute it as JavaScript. {% endcomment %}
19    <script type="application/json">
20      {% render 'json--section',
21        section: section,
22        with_product: with_product,
23        with_collection: with_collection,
24        product_variants: product_variants
25      %}
26    </script>
27  </div>