Every block has its own JS which you can access in the bottom right corner once the block is open.
> Note: All JS code will be lumped together in a single JS file, which means it might conflict with other parts of the website.
Available Resources
jQuery library included by default
Code Patterns
Block Selector Template
Use the {sf-block-selector} placeholder that translates to unique block classes:
$('{sf-block-selector}').find('.my-element').addClass('active');
// Translates to: $('.sf-block-123').find('.my-element').addClass('active');
Edit Mode Detection
Check if the page is in edit mode:
if (typeof isInEditMode !== 'undefined' && isInEditMode) {
// Code for edit mode only
}
Learning Recommendation
Examine default implementations like slider or FAQ blocks for practical examples.