Odoo Headless E-Commerce User Guide

Introduction

Odoo Headless E-commerce allows you to separate the front and back end of an eCommerce website. Odoo Headless E-commerce means separating the front and back end of the E-commerce platform.

This user guide will walk you through the steps to use this feature effectively. Similarly, admin can also track Odoo Ecommerce New Product Request in the storefront.

Features:

1. It helps to create a unique brand based interface for Odoo eCommerce websites.
2. Users can customize the design and features of Odoo e-commerce store with the help of Odoo Headless E-commerce.
3. User can customize the front end of the e-commerce website without changing the backend code.
4. Odoo Headless E-commerce easily integrates with third-party applications.
5. It helps to improve the user interfaces of e-commerce websites without overhauling the software infrastructure by using Headless technology.

ASSEMBLY

After you purchase the app from the Webkul store, you will receive a link to download the zip file of the module.
Unzip the file on your system after the download is complete. You will be able to see a folder named- ‘MODULE_TECHNICAL_NAME (you can get the technical name from the respective module’s Odoo application)’
Copy and paste this folder inside the Odoo plugins path.
Now open the Odoo application and click on the Settings menu. Here, click on Activate Developer Mode.
Then open the Applications menu and click on “Update module list”.
In the search bar, remove all filters and search for “MODULE_TECHNICAL_NAME”
You will be able to see the module in the search results. Click on ‘Install’ to install it.

Before you move on, explore our Odoo development services and the extensive range of quality Odoo applications.

Frames

To create a unique Odoo Ecommerce NextJS theme, we used Rest API storefront API development to establish a seamless connection between Odoo backend and front end.

Additionally, we used the frameworks below to create this mind-blowing eCommerce theme:

Next.JS (React Js)
typescript
Tailwind CSS

Header request

You must allow Request Origin as well as Request headers to work with the theme. Please follow the instructions below.

# For Apache

Header set Access-Control-Allow-Origin “https://your-theme-url.com/ “

Set of headers Access-Control-Allow-Headers “Accept, Content-Type, Authorization, Authenticate, lang, currency”

# For Nginx

add_header ‘Access-Control-Allow-Origin’ ‘https://your-theme-url.com/’;

add_header ‘Access-Control-Allow-Headers’ ‘Accept, Content-Type, Authorization, Authenticate, lang, currency’;

Installation procedure

Headless theme installation

Prerequisites
Node >=16.0.0
NPM >=8.1.0 OR EARLY >=1.22.0

Users can install the theme in two ways:

Vercel
Manual installation

1. Vercel

Vercel is a native Next.js (ReactJs) platform, designed to enhance the Next.js experience. It’s the best way to host the following js (framework). You can import a Git repository from GitHub, GitLab, or BitBucket.

Sign in using Git, you can also sign in with your email, but you must connect to Git. Now follow the steps below to login:

1: Go to Vercel Dashboard and click Add New.

2: Select a Git provider to import an existing project from a Git repository.

3: Now click on the import option as mentioned below in the screenshot:

4: Here you have to enter the environment variables with their values, which you will get after extracting the zip file in .env.template.

5: After you click deploy, you will get a URL from Vercel you can also manage your domain from Vercel > Settings > Domains.

After clicking on Voguish Theme you can check the project dashboard as mentioned below in the screenshot:

2. Manual installation

Customers will receive a zip folder and they have to extract the contents of this zip folder on their system. The extracted folder has a NextJs folder, move the folder to the directory where you want to install it.
Setup env – Duplicate env.template rename the duplicate to .env. Now update the below values in the env file:
NO_SECRET=TEST_VOGUISH
NEXTAUTH_SECRET=TEST_VOGUISH
MODE=PRODUCTION
NEXTAUTH_URL=http://localhost:3000/
APP_URL=
CLIENT_TOKEN=
API_URL=
API_VERSION=
IMAGE_DOMAINS=
Run the following command via terminal:npm install OR yarn installnpm run build OR yarn buildnpm run start OR yarn start. In case you want to change the value of any of the messages, open the locale folder and go to the message.po file inside the en. Enter a value in msgstr relative to msgid. Then run the command build and start.
It will serve on port 3000 on your server for eg: http://localhost:3000/.
You can access Odoo Headless E-commerce theme using your-serverip:3000 and you can also ask your server team to map your 3000 port to any dedicated domain.

A view of the shop window

Odoo eCommerce NextJS theme looks as shown in the screenshots below.

Displaying the customer’s public page on the website.

Homepage

Well organized home page with navigation menu, categorized pages, featured products, special offer section, banner with call to action button.

Organize and display a collection of products or services that users can browse and potentially purchase using catalog.

Add featured products to your home page and make it better and more visually appealing for your visitors.

Category page

Display a collection of products belonging to a specific category with layered navigation, making it easy for visitors to find and filter the products they are interested in.

Catalog list

Users can easily categorize products using various filter options on the top right. Users can sort products using any of the options shown in the screenshots below.