Data Models in builder.io

Technical Questions
1

I want to create the footer and fetch the data into the column using data models. For eg each col consist 4 links how to link this col to the page in builder.io

2

Hi @Dhanashree

To create a footer in Builder.io and manage its content using data models, follow these steps:

  1. Create a Data Model for Links
  2. Create a Section Model for the Footer
  3. Fetch and Render the Data in the Footer
  4. Link the Footer to Pages in Builder.io

Step-by-Step Instructions

Step 1: Create a Data Model for Links

  1. Go to Models in Builder.io:

  2. Create a Data Model:

    • Click on + Create Model.
    • Select Data as the model type.
    • Name this model as FooterLink and click Save.

  3. Add Fields to the Data Model:

    • Click + New Field.
    • Add fields such as label (Type: Text), url (Type: URL).
    • Save the data model once you’ve added all necessary fields.

Step 2: Create a Section Model for the Footer

  1. Go to Models in Builder.io:

  2. Create a Section Model:

    • Click on + Create Model.
    • Select Section as the model type.
    • Name this model as FooterSection and click Save.

  3. Add this Section to Your Pages:

    • In the Builder Visual Editor, you can now create this section and manage it across your different pages.

Step 3: Fetch and Render the Data in the Footer

  1. Set Up a Next.js Project:

    • Make sure your Next.js project is set up with the Builder.io SDK.
    • Install necessary packages if you haven’t already:
      npm install @builder.io/react

  2. Fetch Data from Builder.io:

    • Create a function to fetch the footer links from the Builder.io data model.
    // src/utils/fetchFooterLinks.js
import { builder } from '@builder.io/react';

builder.init('YOUR_PUBLIC_API_KEY');

async function fetchFooterLinks() {
  const footerLinks = await builder.getAll('FooterLink', {
    cache: 'no-cache', // Ensure fresh data
  });
  return footerLinks;
}

export default fetchFooterLinks;

  3. Create the Footer Component:

    • Create a new component for the footer which fetches and displays the links.
    // src/components/Footer.js
import React, { useEffect, useState } from 'react';
import fetchFooterLinks from '../utils/fetchFooterLinks';

const Footer = () => {
  const [footerLinks, setFooterLinks] = useState([]);

  useEffect(() => {
    const getFooterLinks = async () => {
      const links = await fetchFooterLinks();
      setFooterLinks(links);
    }
    getFooterLinks();
  }, []);

  const columns = [
    footerLinks.slice(0, 4),
    footerLinks.slice(4, 8),
    footerLinks.slice(8, 12),
  ];

  return (
    <footer>
      <div className="footer-columns">
        {columns.map((col, index) => (
          <div key={index} className="footer-column">
            {col.map(link => (
              <a href={link.data.url} key={link.id}>{link.data.label}</a>
            ))}
          </div>
        ))}
      </div>
    </footer>
  );
};

export default Footer;

  4. Render Footer Component in Your Pages:

    // pages/_app.js
import React from 'react';
import Footer from '../components/Footer';
import '../builder';  // Ensure your Builder setup is included

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Footer />
    </>
  );
}

export default MyApp;

  5. Optional: Use the Footer Section in Builder.io:

    • In the case you want more visual editing in Builder.io:
      • Create a blank section in Builder.io and register it in your codebase.
      • Component can be a wrapper and the actual data fetching component inside builder visual component like the footer section.

Example Code

Here is an example of how the complete integration might look:

Footer Component:

// src/components/Footer.js
import React, { useEffect, useState } from 'react';
import fetchFooterLinks from '../utils/fetchFooterLinks';

const Footer = () => {
  const [footerLinks, setFooterLinks] = useState([]);

  useEffect(() => {
    const getFooterLinks = async () => {
      const links = await fetchFooterLinks();
      setFooterLinks(links);
    };
    getFooterLinks();
  }, []);

  const columns = [
    footerLinks.slice(0, 4),
    footerLinks.slice(4, 8),
    footerLinks.slice(8, 12),
  ];

  return (
    <footer>
      <div className="footer-columns">
        {columns.map((col, index) => (
          <div key={index} className="footer-column">
            {col.map(link => (
              <a href={link.data.url} key={link.id}>{link.data.label}</a>
            ))}
          </div>
        ))}
      </div>
    </footer>
  );
};

export default Footer;

Integrating Footer in Your Next.js Application:

// pages/_app.js
import React from 'react';
import { builder } from '@builder.io/react';
import Footer from '../components/Footer';
import '../builder.js';  // Builder.io initialization and component registrations

builder.init('YOUR_PUBLIC_API_KEY');

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Footer />
    </>
  );
}

export default MyApp;

Important Links

By following these steps, you can effectively create a footer with dynamic content rendered based on data models and seamlessly integrate it into your Next.js application.

3

Thank you for your response. Can you please create one video for this explanation.

4

@Dhanashree

Builder has a (consistently growing) high demand of support requests and providing looms and ongoing, hands-on product help for all customers is unfortunately no longer feasible.

A few suggestions for you:

  • Priority Support and access to our customer success team is included in all of our Enterprise plans. If this is an option, I would recommend upgrading your plan so we can continue to support you at the level we have been able to accommodate thus far.
  • If the above is not an option, we strongly recommend taking the Builder 101 crash course. It’s about 30 minutes long but will help with a lot of styling questions you’ve had thus far.
  • Lastly, we can always set you up with a 3rd party contractor for hire who can help you execute your designs. We are closely connected with a network of experts called Storetasker who could help you find someone in no time!

Let us know if you’d like us to help make an introduction to a contractor or if you’re interested in speaking with someone in Sales about our Enterprise options!