Docs
Guides
Data for development

Sample data for local development

You can put product, collection etc. data in javascript files in the data directory and then use a special notation in props to refer to that data.

Consider the following section

sections/FeaturedCollection.jsx
import React from 'react';
import {Prop, Link} from "builderoo";
 
export default function FeaturedCollection({collection}) {
  return (
    <section className="featured">
      <div className="featured-collection">
        <Link to={collection}>
          <div>
            <img src={collection.image} />
            <h3>{collection.title}</h3>
          </div>
        </Link>
      </div>
    </section>
  );
}
 
export const props = {
  collection: Prop.collection().label("Featured Collection"),
}

And consider the page where it’s going to be used

pages/index.json
{
  "sections": [
    {
      "component": "FeaturedCollection",
      "props": {
        "collection": null
      }
    }
  ]
}

To provide value for the collection prop above, create a file in collections.js in the data directory and paste the following:

export default [
  {
    _id: 'xyz',
    title: 'T-Shirt Summer Vibes',
    image: 'https://picsum.photos/200/320',
    products: []
  }
]

Now update the prop value to refer to this data

pages/index.json
{
  "sections": [
    {
      "component": "FeaturedCollection",
      "props": {
        "collection": "data:collections:0"
      }
    }
  ]
}

We used a special syntax data:collections:0 to refer to the 0th index of the default export in collections.js file.

pages/index.json
{
  "sections": [
    {
      "component": "FeaturedCollection",
      "props": {
        "collection": {
          "_id": "xyz",
          "title": "T-Shirt Summer Vibes",
          "image": "https://picsum.photos/200/320",
          "products": []
        }
      }
    }
  ]
}

Examples

Some more examples of data: syntax

SyntaxMeaning
data:productsThe default export in data/products.js file
data:products:3Value at index 3 of the default export in data/products.js file
data:collectionsThe default export in data/collections.js file
data:shoesThe default export in data/shoes.js file

Special data files

Apart from the arbitrary data files like above, there are some special data files.

data/menu.js

data/menu.js
export default {
  main: [{title: "Products", url: "/products"}, {title: "Collections", url: "/collections"}],
  footer: [{title: "Products", url: "/products"}, {title: "Collections", url: "/collections"}]
}

data/user.js

data/user.js
export default {
  _id: "1",
  firstName: "John",
  lastName: "Doe",
  email: "[email protected]"
}

data/cart.js

data/cart.js
import products from "./products";
export default {
  items: products.map(p => {
    return {product: p, quantity: 1, variant: p.variants[0]}
  })
}
<Link>Linking pages