I’m new to Builder.io, and I want to create a proper login and registration page. This page should include a header, footer, and form. I need to manage the header and footer in Builder.io, while the login and registration forms are handled in my codebase with API calls and other backend functionality. My goal is to combine these three components into a single page, but I’m having trouble integrating them because the forms are built in my codebase, while the header and footer are managed in Builder.io.
I’m using a Next.js app with the App Router for my base setup.
This can be done in multiple ways, one being that you can add a separate header and footer page model and manage your content between those two components. For this, you will need to add a header and footer in the Builder register component to integrate successfully. Have a look at the link below for finding information on custom components and their usage:
One other thing you can do is add symbols for header and footer, which will allow you to use it in multiple components. Feel free to check out this link below:
I have a nearly identical header for different pages, but one header includes a specific box (symbol). I want to create a header that conditionally displays this box based on the page the user is on. Specifically, the box should be hidden on the /login page, while it should be visible on the /register page.
You can proceed with multiple approaches to display a specific header content for register page and hide it when the user is on login.
You can conditionally render the header component for Login and Register, here you will have to add 2 separate header component and a condition that matches the URL path and display the box if URL path is on “/register”, while hide the block if the path is “/login”.
If you don’t want separate header components, feel free to use a conditional statement inside the header component itself which may take the URL path from window, and display the block accordingly, something like:
Let me try this approach because I attempted to create a section model and fetch it using code. I have a login form displayed below the header, so… i am confused on approaches and way which i can take…
Add a Header and Footer section fields in the Page model. I’d highly encourage you to keep a default / fallback option to improve backwards compatibility with your current pages:
Fetch the Header and Footer section entries using the added fields:
// NOTE: This is my current implementation using Remix
export const loader = async ({ params, request }: LoaderFunctionArgs) => {
const url = new URL(request.url);
const urlPath = `/${params.slug || ""}`;
const city = request.headers.get("cf-ipcity") ?? "Other";
const country = request.headers.get("cf-ipcountry") ?? "Other";
// Fetch the page
const page = await fetchOneEntry({
model: "page",
apiKey: apiKey,
includeRefs: true,
options: getBuilderSearchParams(url.searchParams),
userAttributes: { urlPath, city, country },
} as GetContentOptions);
if (!page && !isPreviewing(url.search)) {
throw new Response("Page Not Found", {
status: 404,
statusText: "Page not found in Builder.io",
});
}
// Fetch the header and footer by querying the related page model field
const header = await fetchOneEntry({
model: "header",
apiKey: apiKey,
query: {
id: page?.data?.header?.id,
},
});
const footer = await fetchOneEntry({
model: "footer",
apiKey: apiKey,
query: {
id: page?.data?.footer?.id,
},
});
/* Return them and use the <Content /> tag to render all three things, like:
return (
<>
<Content
model="header"
apiKey={apiKey}
content={header as BuilderContent}
customComponents={CUSTOM_COMPONENTS}
/>
<Content
model="page"
apiKey={apiKey}
content={page as BuilderContent}
customComponents={CUSTOM_COMPONENTS}
/>
<Content
model="footer"
apiKey={apiKey}
content={footer as BuilderContent}
customComponents={CUSTOM_COMPONENTS}
/>
</>
);
*/
return { page, header, footer };
};
Doing it this way, you can edit the sections visually and in separate editors, have as many variants as you want, and it will add your defaults automatically when you create a new page too.
It would work, but it also implies maintaining the same header twice.
I just read this from one of your earlier messages:
I have a nearly identical header for different pages, but one header includes a specific box (symbol). I want to create a header that conditionally displays this box based on the page the user is on. Specifically, the box should be hidden on the /login page, while it should be visible on the /register page.
If you want this to take advantage of server-side rendering, you could create a symbol for the button and set the targeting rules to match when the URL is /register.
Otherwise, it will return an empty response, and the component should not be rendered at all.
I can’t guarantee that (and neither think of) any other solution will work unless you want the rendering to happen in the browser. In that case, the reply from @builder_akash would be a good choice.
@builder_akash I need to create a section modal, and I want to render part of it dynamically. To do this, I plan to create a symbol and render it dynamically. Can I use the same section modal on two pages, or do I need to create the symbol first?
