This guide assumes you have a basic familiarity with:
Building WebApp and Module Layouts on Siteglide using Liquid tags
HTML, including data-attributes
Using a ready-made SiteBuilder Layout
The quickest way to get started with the SiteBuilder Live Updates API is to install a SiteBuilder layout which already uses it. Look out for the teal 'Live-updates ready' tag on the layouts, install and modify at will.
Having said that, if you want to modify any other layout to start fetching live updates with the API, we'll show how to do that next.
Basic Markup Example
The following markup example would work well in the wrapper.liquid file of a webapp or module layout. The layout and _model variables will then be inherited from the tag used to output the layout in the page.
{% comment %}Generate the public key as above and pass it to the main element of the HTML code as a data-attribite. Another data-attribute, data-sg-live-update-section, may optionally be used to supply a unique ID to the HTML section which will be referenced in the initialised Object.{% endcomment %}
{% if context.exports.sitebuilder.live_update_JS_loaded ==blank %} <scriptasyncsrc="{{'modules/module_86/js/v1-2/sitegurus_live_update_javascript_api.js' | asset_url }}"></script> {% assign live_update_JS_loaded = true %} {% export live_update_JS_loaded, namespace: sitebuilder %}{% endif %}{% function public_key = "modules/module_86/front_end/functions/v1/live_update_params_encode", layout: layout, model: _model %}
<sectiondata-sg-live-update-key="{{public_key}}"class="bg-white dark:bg-gray-900"> <divdata-sg-live-update-component="main_results"> {% comment %} This HTML tag and its contents are marked with the data-attribute as a component which will live update. {% endcomment %}
{%- include'modules/siteglide_system/get/get_items', item_layout: 'item' -%} </div> <formdata-sg-live-update-controls="sort_and_filters">{% comment %} 1) Hidden fields {% endcomment %} <inputtype="hidden"name="per_page"value="20">{% comment %} 2) Ordinary HTML Form Elements{% endcomment %} {% for category in context.exports.categories.items %} <label> <inputtype="checkbox"name="category"value="{{category[0]}}"> <span>{{category[1].name}}</span> </label> {% endfor %}{% comment %} 3) Custom Toggle Buttons {% endcomment %} {% assign month_start = 1682895600 %} {% assign month_end = 1685574000 %} <button data-sg-live-update-control-params="/blog?range_gte={{month.start}}&range_lt={{month.end}}&range_type=month" data-sg-live-update-control-group="month">{{month.start | date: "%b" }}</button>
{% comment %} 4) Sort buttons {% endcomment %} <div> Weighting <button data-sg-live-update-sort-order="unsorted" data-sg-live-update-sort-type="properties.weighting" type="button" class="ml-1">
<svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 20 20"fill="currentColor"class="w-5 h-5"> <path fill-rule="evenodd" d="M2.24 6.8a.75.75 0 001.06-.04l1.95-2.1v8.59a.75.75 0 001.5 0V4.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.1 0L2.2 5.74a.75.75 0 00.04 1.06zm8 6.4a.75.75 0 00-.04 1.06l3.25 3.5a.75.75 0 001.1 0l3.25-3.5a.75.75 0 10-1.1-1.02l-1.95 2.1V6.75a.75.75 0 00-1.5 0v8.59l-1.95-2.1a.75.75 0 00-1.06-.04z" clip-rule="evenodd" />
</svg> </button> </div> </form> {% comment %} Wrapping a component with aria-live alerts screen readers to changes in the number of results. {% endcomment %}
<divaria-live="polite"> <divdata-sg-live-update-component="total_results"> {% capture exports_key %}webapp_{{id}}{% endcapture %} {% assign per_page = per_page | default: context.params.per_page | default:20 %} {% assign total_entries = context.exports[exports_key].data.result.total_entries %} {% assign total_pages = total_entries | plus:0.0 | divided_by: per_page | ceil %} {% assign current_page = context.params.page | default:1 %} <spanclass="text-sm font-normal text-gray-500 dark:text-gray-400"> Showing Page <spanclass="font-semibold text-gray-900 dark:text-white">{{current_page}}</span> of <spanclass="font-semibold text-gray-900 dark:text-white">{{total_pages}}</span> </span> </div> </div> {% comment %} Our pre-built pagination solution when combined with a SiteBuilder pagination_layout which supports live-updates {% endcomment %}
{% include"modules/module_86/front_end/includes/v1/pagination", live_updates: 'true', lock_per_page: 'false' %}{% comment %} A form example to allow users to change number of results per page {% endcomment %} <formclass="flex flex-wrap space-x-2 space-y-2 items-center"data-sg-live-update-controls="per_page"> <labelfor="rows"class="text-sm font-normal text-gray-500 dark:text-gray-400"> Rows per page </label> <select name="per_page" id="rows" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block py-1.5 pl-3.5 pr-6 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
<optionselectedvalue="{{per_page}}">{{per_page}}</option> <optionvalue="25">25</option> <optionvalue="50">50</option> <optionvalue="100">100</option> </select> </form></section>