Skip to main content

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;