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, useProps} from "builderoo";
 
export default function FeaturedCollection() {
  const {collection} = useProps()
  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.

This will translate to the following when run

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

Syntax	Meaning
`data:products`	The default export in `data/products.js` file
`data:products:3`	Value at index 3 of the default export in `data/products.js` file
`data:collections`	The default export in `data/collections.js` file
`data:shoes`	The 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`

Example

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`

Example

data/user.js

export default {
  _id: "1",
  firstName: "John",
  lastName: "Doe",
  email: "[email protected]"
}

`data/cart.js`

Example

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