Replies: 2 comments 1 reply
-
RIP section.js -- LONG LIVE USEFUL ABSTRACTION |
Beta Was this translation helpful? Give feedback.
0 replies
-
This is a really cool abstraction congrats, do you have an example snippet for |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
See archetype-themes/reference-components#22 for implementation.
Note
TL;DR: Working with theme editor events can be annoying. Let's make it easy.
Any custom element can extend the
HTMLSectionElement
class to benefit from the following:section.id
directly in Liquid anymore, unless you want to.onSectionSelect
,onBlockDeselect
, etc.HTMLSectionElement
The
HTMLSectionElement
class is a composite element designed to work seamlessly with the Shopify theme editor. It incorporates bothSection
andThemeEditorEventHandlerMixin
functionalities into a single class and provides a robust foundation for custom elements in Shopify themes.Usage
To use
HTMLSectionElement
, you can extend it from your own custom elements. For example:Properties
sectionId
A read-only property that returns the section ID associated with the custom element. The section ID is derived from the closest parent element with the
.shopify-section
class.Methods
connectedCallback()
This method is automatically called when the element is connected to the DOM. It sets up theme editor event listeners only within the context of the theme editor.
disconnectedCallback()
This method is automatically called when the element is removed from the DOM. It cleans up the theme editor event listeners, if any were added.
Warning
If these lifecycle methods already exist in your custom element, ensure that you call
super.connectedCallback()
orsuper.disconnectedCallback()
in each respective method so you don't overwrite the parent's lifecycle method.Event Handling
The class listens for the following Shopify theme editor events:
shopify:section:select
shopify:section:deselect
shopify:section:reorder
shopify:block:select
shopify:block:deselect
To handle these events, define methods in your custom element following the naming convention
on[EventName]
. For example, to handleshopify:section:select
, define a method namedonSectionSelect
.Event object structure
The event object passed to each handler method contains properties like
event.target
andevent.detail
.The
event.detail
property contains useful information that can be used within your custom elements. The contents of this property vary from one event to the next, and it's recommended you review the theme editor events table for more context.Example
Here's a simple example of how to use
HTMLSectionElement
:Load and unload events
You may have noticed that the
shopify:section:load
andshopify:section:unload
events aren't listed above. That's because, by default, these events are mapped to the custom element's lifecycle methods.For example, if you prefer to include all of your "load/unload" code in each of the lifecycle methods, you can do so:
Otherwise, if you prefer to isolate this functionality into their own methods leading to more of a separation of concerns as these will only run in the theme editor, you can do so:
There isn't a preferred way. The way you approach this depends entirely on your own preferences and the needs and setup of your custom element.
Warning
If for some reason you need to combine both examples above, know that the order at which things are executed is the following: parent's lifecycle method -> event handler -> lifecycle method.
Beta Was this translation helpful? Give feedback.
All reactions