Using Live Updates with Custom Includes and optionally GraphQL

If you want the convenience of the Live Updates JavaScript API to handle event listeners, but wish to customise the kind of content which is re-rendered, you can use a combination of Content Section includes and GraphQL to do this.

Written By Matt Jones

Last updated About 3 hours ago

Pre-requisites

Public Key Parameters

You can also use the Live Updates API with a content_section or code_snippet. Note that these include types don't intrinsically react to changes in the URL e.g. setting a parameter like page would not be natively supported. This can however be a benefit if you intend to write custom code including GraphQl; you will have to write that server-side code yourself, but you can take advantage of the Live Updates JS and event-listeners to quickly implement filter functionality on the client-side.

To use Live Updates with a content_section or code_snippet, you need to add a model_type as mentioned in the Adding Live Updates interactivity to a Module or WebApp Dynamic Section Layout article , selecting the relative path for the include file you intend to use. Then you also need to add an include_id to the ID of the snippet/ section:

{% function public_key = "modules/module_86/front_end/functions/v1/live_update_params_encode", model_type: 'code_snippet', include_id: '1' %}

You can also use a completely custom include Includes with Siteglide CLI .

Let’s say you intend to use Live Updates inside an include at marketplace_builder/views/partials/block/example.liquid, your public key should be:

{% function public_key = "modules/module_86/front_end/functions/v1/live_update_params_encode", model_type: 'block/example' %}

See the collection and creator_id URL parameters for more details about setting collection to 'true' when generating the public key.