Uhuu Restore

Templates relying on various data sources may have distinct refresh requirements.
While retrieving a document's fresh data, developers might want to keep users' recent changes.

In this case, developers can leverage uhuu_restore reserved key storage, which will be kept even after fresh data is fetched from data sources.

{
    "uhuu_restore" : {
       // each key will be initialized with defined binding.
    }
}

Configure template

Specify how uhuu should start initial binding of template.
templateSetup function is responsible for initializing the template according to the specified configuration settings.

let setup = {
    "uhuu_restore" : {       
       "listing_title" : { path: 'listing.title', value: 'Default title'}
    }
};
$uhuu.templateSetup(setup);

The setup object is given a property called uhuu_restore.
Each element has a key (e.g., "listing_title") and a corresponding configuration object that specifies how to retrieve using path or set the element's initial value.

let setup = {
    "uhuu_restore" : {       
       "listing_title" : { path: 'listing.title', value: 'Default title'},
       "message" : {  value: 'My message'}
    }
};

Following code sets up the configuration for initializing a template using the uhuu SDK.
It defines how various elements within the template should be initialized, including custom filtering logic for images and options related to the template setup.

// Initialize an Empty Setup Object:
let setup = {};

// Define 'uhuu_restore' configuration for various payload bindings.
setup.uhuu_restore =  {
    "cover_image" : { filter: 'imgWithTagAtIndex', args: {tag: 'Hauptbild', index:0} },
    "layout_image_1" : { filter: 'imgWithTagAtIndex', args: {tag: 'Bild', index:0} },
    "layout_image_2" : { filter: 'imgWithTagAtIndex', args: {tag: 'Bild', index:1} },
    "floor_image_1" : { filter: 'imgWithTagAtIndex', args: {tag: 'Grund', index:0, startsWith: true} },
    "floor_image_2" : { filter: 'imgWithTagAtIndex', args: {tag: 'Grund', index:1, startsWith: true} },
    "feature_page_title" : { value: 'Die wichtigsten Fakten im Überblick' }
}

// Custom Filter Function: Logic to filter and retrieve images based on arguments
const imgWithTagAtIndex = (payload, args) => {
    const images = payload?.listing?.media?.images ?? [];
    const {tag, index, startsWith} = args;
    let imagesWithTagCounter = 0
    for (const image of images) {
        if (image.tags) {
            for (const imageTag of image.tags) {
                if ((startsWith && imageTag.startsWith(tag)) || imageTag === tag) {
                    if (index === imagesWithTagCounter) {
                        return image
                    }
                    imagesWithTagCounter++
                }
            }
        }
    }
    return null;
}

// Initialize Filters:
// This allows the template initialization process to use this filter when needed.
setup.filters = {imgWithTagAtIndex};

// Enable Options:
setup.options = {
    imageGalleryPath : 'listing.media.images' // path to look for images in the payload
}

// Finally, call templateSetup function and pass the setup object as an argument. 
$uhuu.templateSetup(setup);