JavaScript in blocks
Every block has its own JS which you can access in the bottom right corner once the block is open.
/https://assets.v3.snowfirehub.com/images/120830/10_o_screenshot-2020-12-10-at-144954.png)
All JS code will be lumped together in a single JS file, which means in might conflict with other parts of the website. Please keep that in mind when writing JS.
We include the jQuery library by default, so feel free it use it.
Block selector
To target the the block you might use {sf-block-selector}. This will be translated to a unique selector for the block.
$('{sf-block-selector} .example').mouseover(function() {
console.log('mouse over example');
});
Will be turned into:
$('.sf-block-123 .example').mouseover(function() {
console.log('mouse over example');
});
Check if we are in edit mode or not
The following JS code might be used to detect and apply different logic based on if we're in edit mod.
if (typeof isInEditMode !== 'undefined' && isInEditMode) {
console.log('in edit mode');
}
Examples, examples, examples
The best way to get a feeling on how to code JS for certain blocks is to look at the default blocks. Create a block based on the slider block or the faq block to see how they are coded.