Builder IO

A component for displaying banner in your result pages. Those banner can be added in the Fast Simon Dashboard > Collection Merchandising

Reference

https://www.builder.io/c/docs/getting-started

Example: integrating the collection banners

import {useFastState, useFastCategories} from "fast-component-library";
import {useEffect, useState} from "react";
import {Builder, builder, BuilderComponent} from "@builder.io/react";
import {getBuilderKey} from "../../services/builder";
import React from "react";

/*initialize builder*/
builder.init(getBuilderKey())

const BuilderBanner = () => {
    const {query, collectionID} = useFastState();

    const [pageJson, setPage] = useState<any>();
    const [loading, setLoading] = useState(false);

    const isEditingOrPreviewing = Builder.isEditing || Builder.isPreviewing;

    const categories = useFastCategories();

    function fetchPage() {
        setLoading(true);
        builder.get('collection-page-top', {url: categories[collectionID!].u}).toPromise().then(content => {
            setPage(content);
            setLoading(false);
        })
    }

    /* fetch page again every time the collection id changes */
    useEffect(() => {
        if (collectionID && Object.keys(categories).length > 0) {
            fetchPage();
        } else {
            setPage(undefined);
        }
    }, [collectionID, categories])

    if (query || loading) {
        return null;
    }

    if(!pageJson && !isEditingOrPreviewing){
        return null;
    }

    return <BuilderComponent model="collection-page-top" content={pageJson} />
}

export default BuilderBanner;