Search


Search something to see results

DynamicBlock

A dynamic block defines an area of dynamic content within the HTML.

1.15.0

interface DynamicBlock {
    appendTo?: string;
    detectChanges?: boolean | ChangeDetection[];
    idAttribute?: string;
    idFunction?: ElementToIdFunction;
    insertBefore?: string;
    isMainBlock?: boolean;
    merge?: false | MergeFunction;
    mergeFunction?: MergeFunction;
    removeIfMissing?: boolean;
    selector: string;
}

Index

Properties

Properties

appendTo?: string

Specifies a CSS selector that is used to find an element of the local document to which to append the dynamic block that exists only in the remote document.

2.10.0

detectChanges?: boolean | ChangeDetection[]

Provides the possibility to define a list of ChangeDetection, to inspect the cached version and the origin version of the current block for differences. In case the option is set to true a default change detection will be executed, which consists of inspecting all image tags within the block and comparing their src attribute and inspecting all anchor tags within the block and comparing their href attribute.

2.5.0

idAttribute?: string

The HTML tag attribute to get a unique ID for this block from.

With this property the Dynamic Fetcher receives the HTML attribute's name to get the unique block ID of this dynamic block's HTML element.

Each dynamic block needs a unique ID in order to be replaced with the right content. This tag attribute is where the Dynamic Fetcher can find this ID. You can use a data attribute or just element IDs for example.

If a dynamic block has no such attribute and you cannot add them, you can use a function to generate a unique ID from the dynamic block as an input value. See therefore the idFunction property.

Note: This property is overriden by the idFunction property.

By default, the ID is taken from either DynamicBlockConfig.defaultIdFunction or DynamicBlockConfig.defaultIdAttribute.

1.15.0

idFunction?: ElementToIdFunction

The function to get a unique ID from this dynamic block.

Each dynamic block needs a unique ID in order to be replaced with the right content. This function should return a unique ID which the Dynamic Fetcher can use. The function receives the HTML element as parameter and returns a string.

If no idFunction is given, Speed Kit will use the idAttribute.

Note: This property overrides the idAttribute property.

Parameter Description
element The dynamic block to get the ID from.

By default, the ID is taken from either DynamicBlockConfig.defaultIdFunction or DynamicBlockConfig.defaultIdAttribute.

1.15.0

insertBefore?: string

Specifies a CSS selector that is used to find an element of the local document before which the dynamic block should be inserted that exists only in the remote document.

The dynamic block will be inserted right before the element found by the selector.

2.10.0

isMainBlock?: boolean

Specifies if the dynamic block is the main block or not.

false

2.13.0

merge?: false | MergeFunction

A function to merge this downloaded block of dynamic content into the DOM.

Either defines a custom function to merge the dynamic content for this block loaded from the origin into its cached counterpart or ist set to false which means the defined block will not be merged.

Parameter Description
localBlock The dynamic block from the current DOM (the cached version of the site).
remoteBlock The corresponding dynamic loaded from the origin (personalized version of the site).

By default, the merge function is taken from DynamicBlockConfig.defaultMergeFunction.

2.5.0

mergeFunction?: MergeFunction

A function to merge this downloaded block of dynamic content into the DOM.

use merge instead

1.15.0

removeIfMissing?: boolean

Whether to remove a dynamic block that is only present in the cached version of the site.

A common example for this is a cookie banner that is always present in the anonymous cached version, but is missing in the origin version once the user has accepted the cookie terms.

false

2.9.0

selector: string

The CSS Selector to identify this dynamic block.

You can use any valid CSS Selector. Please ensure to use a unique selector for each block.

1.15.0