Wix Headless Examples

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/.

Getting Started

There are two ways to experiment with the example site functionality:

Code Sandbox

1. Fork the CodeSandbox project by click Fork in the top right corner.
2. In constants.js, replace the existing client ID with your own. You can find your client ID under headless settings in your project dashboard.

Copy the project to your local workspace

1. Clone the github repo.

2. Run the following commands:

   cd wix-headless-example
   npm install

3. In constants.js, replace the existing client ID with your own. You can find your client ID under headless settings in your project dashboard.

4. Run the development server:

   npm run dev

Open http://localhost:3000 in your browser to see the result.

Wix Headless APIs Usage

This project demonstrates the usage of various Wix Headless APIs. Here's a brief overview of each:

Authentication

The authentication process is handled in the following files:

• pages/members.js: This file contains the Login/Logout button implementation. It demonstrates how to use the Wix Members API to get the current user's information.
• pages/login-callback.js: This file handles the login callback process. It demonstrates how to use the Wix OAuthStrategy API to authenticate users.
• middleware.js: This file generates a visitor cookie if no session exists. It demonstrates how to use the Wix OAuthStrategy API to generate a visitor cookie.

Wix Members API: This API allows you to manage a site's members, including creating, updating, deleting members, retrieving member's information, and managing a member's community status.

Wix OAuthStrategy API: This is an authentication strategy used with a Wix Client to authenticate API calls using OAuth tokens. It helps in identifying the requester's identity and their assigned roles.

Headless Bookings

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.

Headless Store

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.

Headless Tickets

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.

Headless Subscriptions

The pages/subscriptions.js file demonstrates how to use the Wix Pricing Plans API to fetch a list of plans provided by your site.

Wix Pricing Plans API: This API allows you to create and manage your plans and orders. It supports different pricing models like subscription, single payment for duration, and single payment unlimited. It also allows you to manage plan visibility, handle free plans and trial periods, and manage orders and subscriptions.

Package dependency management

To ensure this repo always uses the latest APIs from the Wix JavaScript SDK, the repo is preconfigured with Dependabot, GitHub's automated dependency management system. Due to the numerous pull requests generated by Dependabot, the repo also includes a preconfigured GitHub Action called " Combine PRs." This action can be executed manually to merge all of Dependabot's pull requests into a single PR, allowing for sanity checks to be performed only once. If the sanity check fails, each Dependabot PR can be inspected individually.