Request for improvements: Liquid slot tag to render contents in predefined places
#1854
Comments
|
yield? content_for? a couple patterns from rails-land that feel related |
benjaminsehl
changed the title
slot tag to render contents in predefined placesslot tag to render contents in predefined places
|
Hi ! Slot is a long needed feature in Liquid. I've actually raised the idea back in 2022 (#1530) and actually for even longer in a old private GitHub repo targetted at theme partners. Now that theme blocks have landed, this gave me some more ideas for syntax. Snippets are now nearly equivalent to theme blocks, so I think it would make sense to extend snippets to give them some unique power, slot being the perfect use case. As @isaacbowen , I think the correct syntax would be to use Usage: drawer.liquid: This make the whole thing consistent with how theme block and static theme blocks work. There are a few open questions: Default slotsShadow DOM for instance allows a default slot. I think that for simplicity and to prevent introducing too much surface syntax, we should limit to named slots only. Syntax for checking if emptyIn this example I have captured the slot content to output conditionally the header. This avoids creating another syntax, while still allowing to do it with an extra capture. |
Other platforms and frameworks have the ability to place code within a placeholder element somewhere else on the theme.
October CMS does this using
{% placeholder xyz %}, Astro does this using<slot name="xyz" />.It makes sense for Shopify to allow this due to the hugely dynamic nature of sections and blocks.
Right now, to include dynamic styles on a section, I need to write them within the section file, which means the style and script definitions are littered everywhere.
A Liquid
slottag would allow developers to better optimise their themes by allowing specific blocks of code to go in specific areas.Examples
Styles
slider.liquid{%- if section.blocks.size > 0 %} {{ 'slider.css' | asset_url | preload_tag: as: 'style', slot: 'head_preloads' }} <section class="shopify-section" id="shopify-section-slider"> {% slot head_styles %} <style> .slide { background-color: {{ section.settings.slide_background_color }}; } </style> {% endslot %} </section> {%- endif -%} <head> ... head things {{ slots.head_preloads }} {{ slots.head_styles }} </head>The text was updated successfully, but these errors were encountered: