Examples

This section contains end-to-end examples of Custom Blocks.

Each example includes:

Mock Data (optional)

When developing locally, you can add a mockData.json file next to code.jsx in a block folder.

This is read by the local dev server and makes data available via useVariables().

{
  "customer": {
    "id": "<UUID>",
    "firstName": "Taylor"
  },
  "device": {
    "locale": "en-US"
  },
  "cart": {
    "items": []
  }
}

Notes:

mockData.json helps when your block uses useVariables().
mockData.json does not mock network-backed hooks (for example, useCollection). Those hooks fetch from Tapcart APIs.

Learn more: