Shopify / theme-tools

Everything developer experience for Shopify themes
https://shopify.dev/docs/themes
MIT License
78 stars 24 forks source link

content_for_layout rendered before section group #476

Open stijns96 opened 2 months ago

stijns96 commented 2 months ago

Describe the bug content_for_layout is rendered before the section group if you do a check for something inside. In the source below you can see that I only check for something in the content_for_layout, but somehow it's also put above the actual group in the theme editor. In the frontend itself it renders at the right position

Image

Source

{%- liquid
  # Automatically add microdata to the HTML element if the content contains the section with the class 'section--faq-sections'
  if content_for_layout contains 'section--faq-sections'
    assign microdata = 'itemscope itemtype="https://schema.org/FAQPage"'
  endif
-%}

{%- sections 'header-group' %}

<main {{ microdata }}>
  {{ content_for_layout }}
</main>

Expected behaviour Render the content_for_layout at the right position in the theme editor and not where I've added an if statement.

Actual behaviour It renders the content_for_layout in the theme editor at the position where the if statement is placed.

Debugging information

Additional context Add any other context about the problem here.

charlespwd commented 4 weeks ago

Unfortunately, the ruby code that defines the order doesn't have the same luxury we have in theme-tools. They don't have a HTML+Liquid AST to play with. I suspect they use some form of regex to find the order.

This can be solved by rewriting the section like this:

{%- sections 'header-group' %}

{%- liquid
  # Automatically add microdata to the HTML element if the content contains the section with the class 'section--faq-sections'
  if content_for_layout contains 'section--faq-sections'
    assign microdata = 'itemscope itemtype="https://schema.org/FAQPage"'
  endif
-%}

<main {{ microdata }}>
  {{ content_for_layout }}
</main>