This template is a Next.js project bootstrapped with create-next-app. It uses Wix Headless to leverage the Wix Events, Wix Bookings and Wix Stores business solutions for managing event ticketing, workshop scheduling and a store.
To integrate the Wix Stores, Wix Bookings and Wix Events business solutions with the template, first create and set up a project on Wix:
Create a new Wix Headless project. For instructions on creating a Wix project, see Create a Wix Headless Project.
When prompted to add functionalities to your new project, select eCommerce and Events:
You can also add business solutions to your project later. See Add Apps to a Project.
See Wix Stores, Wix Bookings, Wix Pricing Plans and Wix Events for information on configuring the events, services and products your business needs.
Note: You can add Wix Events, Wix Bookings and Wix Stores functionality to your project for free, but you must upgrade to a Business Premium Plan to accept orders and payments.
There are 2 ways to authorize the template to access your Wix project:
Click the quick start deployment link below to automatically authorize your template and configure your project. You'll be prompted to log in to your Wix account and to authorize the platform to access your project or site.
Authentication credentials are automatically incorporated into the template, making it easy to get started coding and customizing.
For more information, see How to Deploy Next.js Sites to Netlify.
You can also view our live demo site.
For more information, see How to Deploy Next.js Sites to Vercel.
You can also view our live demo site.
In order to view the full flow in the demo site, use the coupon code
FREEto order products, use the coupon codeFREETICKETto "purchase" tickets and use the coupon codeFREESERVICESto "purchase" services. This template actively disables reCAPTCHA on direct login.
If you don't want to use quick-start deployment, begin by forking this repo to your git account.
Read Set Up Authorization in the Wix SDK documentation for instructions on how to manually create an OAuth app and generate a client ID in the Headless Settings menu of the Wix dashboard.
After creating an OAuth app, store the Client ID in a secure location.
Note: Do not push the client ID to your source control.
To set up environment variables for consuming Wix Headless APIs, follow these steps:
- At the terminal, in the template's root folder, type
cp .env.template .env.local. - In the new
.env.localfile, paste the client ID afterNEXT_PUBLIC_WIX_CLIENT_ID=.
In your deployment provider, add an environment variable called NEXT_PUBLIC_WIX_CLIENT_ID containing the client ID.
Once you’ve authorized and configured your client, run the development server:
yarn
yarn devor
npm i
npm run devOpen http://localhost:3000 with your browser to see the template home page.
You can start editing the homepage by modifying app/page.tsx. The page auto-updates as you edit the file.
Similarly, you can edit any other page on the pattern app/<route>/page.tsx. For more information, see Defining Routes in the Next.js documentation.
The template implements checkout by redirecting visitors to a Wix-managed page. You can configure your business's checkout in the eCommerce Settings menu in the Wix dashboard.
To enable online checkout for the template, follow these steps:
To enable the checkout page and accept payments using Wix business solutions, you need to upgrade to a Business Premium Plan.
To change the base URL for Wix-managed checkout pages, follow these steps in the :
- In the project dashboard, click More Actions.
- Click Rename Project.
- Change the editable part of the URL in Site Address (URL) and click Save.
Alternatively, you can connect a custom domain.
To learn how to customize the template and add more functionality using Wix APIs, see the Wix JavaScript SDK reference documentation.
This template is written in Next.js 13 using Next.js app directory. To learn more about Next.js, see the following resources:
- Next.js documentation: Learn about Next.js features and APIs.
- Learn Next.js: An interactive Next.js tutorial.
- Next.js app directory: Information on the Next.js App Router Roadmap.
Additionally, this template uses the following libraries and features:
You can deploy this repository using any platform which supports Next.js Version 13 and the App Router Roadmap.
The repository only requires a single environment variable: NEXT_PUBLIC_WIX_CLIENT_ID, which should contain a client ID authorizing access to a Wix project's data.
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.
This repo is preconfigured with Playwright for both functional and UI (screenshots) testing. It contains GitHub actions (for PRs) for both Netlify: netlify-e2e.yml and Vercel: vercel-e2e.yml.
Feel free to delete the one you are not using.
Note: there is a # TODO: change to your site name in both YAML files, please change the site name to the actual site name in the relevant deployment platform
This repo includes the screenshots to validate the initial site provided by this repo. Obviously, changing it to your needs would break these tests.
To update the screenshots simply delete the failing ones under location, create a pull request and let the PR build fail, then head to Netlify E2E / netlify-e2e/Vercel E2E / vercel-e2e status checks, and under Summary, the screenshots generated by Playwright are available to download and update in the folder location
