This Next.js project provides a minimal example site to demonstrate basic usage of various Wix Headless APIs. The implementation focuses on simplicity and readability, rather than feature richness, performance, or completeness. This repository can be used as a quick reference for bootstrapping a Wix Headless application.
For a more comprehensive example of Wix Headless integration, we recommend checking out our starter templates.
You can view the latest version of this repo deployed at https://wix-headless-example.vercel.app/.
There are two ways to experiment with the example site functionality:
- Fork the CodeSandbox project by click Fork in the top right corner.
- In constants/constants.js, replace the existing client ID with your own. You can find your client ID under headless settings in your project dashboard.
- Make sure you save any changes in order to see their effect
-
Clone the github repo.
-
Run the following commands:
cd wix-headless-example npm install -
In constants/constants.js, replace the existing client ID with your own. You can find your client ID under headless settings in your project dashboard.
-
Run the development server:
npm run dev
Open http://localhost:3000 in your browser to see the result.
This project demonstrates the usage of various Wix Headless APIs. Here's a brief overview of each:
The pages/booking.js file demonstrates how to use
the Wix Bookings API to fetch a list of
services and their availability from your site.
Wix Bookings API: This API allows you to manage bookings for a site's services. It holds information about the customer and the session or schedule they have booked.
The pages/store.js file demonstrates how to fetch a list of products from your site using
the Wix Stores API. It also demonstrates how to use
the Wix eCommerce API to manage carts and checkouts.
Wix Stores API: This API allows you to manage your store inventory, orders, and collections. It provides a comprehensive set of services for customizing store functionality.
Wix eCommerce API: This API provides a comprehensive set of services for customizing eCommerce functionality on your sites. It allows you to manage a site visitor's cart, handle checkout and payment flow, create and manage discount rules, promote items, and manage orders.
The pages/tickets.js file demonstrates how to use
the Wix Events API to fetch a list of events and
their available tickets from your site.
Wix Events API: This API provides functionality for creating, updating, and managing events. It allows you to manage event details like location, scheduling, registration, tickets, RSVPs, online conferencing, messaging customization, and basic registration form customization.