CS-Cart Headless Theme provides CS-Cart store with headless architecture and improves its overall performance and efficiency.

It’s built using a headless ecommerce approach, using Next.js (which is based on React) for the front end. Additionally, it connects to CS-Cart via REST APIs.

CS-Cart Headless Development helps separate the front-end and back-end of the CS-Cart e-commerce platform. They are therefore independent and can be modified without impacting each other.

Note: This theme is compatible with CS-Cart by default and is also well integrated with CS-Cart Multi Vendor.

• ISR, or incremental site regeneration, is used for product pages.
• SSG, which stands for static site generation, is applied to CMS and other static content.
• The theme integrates Tailwind and PostCSS for styling.
• Website performance is improved.
• WebCore Vitals is improved.
• CS-Cart version updates require minimal maintenance.
• Overall website performance is improved.
• Next.js improves your website’s SEO capabilities.
• Third-party integrations are simplified using APIs.
• The combination of these technologies provides a more efficient web experience.
• The headless architecture uses the REST API.

Prerequisites

• Node >= 16.0.0
• MNP >= 8.1.0 OR FIL >= 1.22.0

Manual installation

1) Unzip the corresponding extension zip, then move it NextJs folder in the directory where you want to install it.

2) Configure the environment

• Double .env.model rename the duplicate to .env.
• Update the values ​​mentioned in .env deposit.

NO_SECRET: Set to NO_SECRET for development mode.

FASHION: Set to PRODUCTION for the production environment.

NEXTAUTH_SECRET: Your NextAuth.js secret to sign session tokens.

API_VERSION: The version of the API you want to use.

NEXTAUTH_URL: THE base auth URL of your NextAuth.js application.

BASE_URL: THE base URL for your application.

CSCART_ENDPOINT: Endpoint_URL for the CS-Cart API.

CSCART_COMPANYID: Company_ID for CS-Cart operations.

CSCLIENT_TOKEN: Authorization token for the CS-Cart client API.

IMAGE_DOMAINS: Allowed image domains (for example, flagcdn.com,other_domains).

FAVICON_ICON: Path to the fallback favicon icon (for example, /favicon/apple-icon-144x144.png).

3) Run the following command through the terminal:

npm install OR yarn install

npm run build OR yarn build

npm run start OR yarn start

4) It will be served on port 3000 of your server for example: localhost:3000.

Use Vercel

1) Unzip the zip of the corresponding extension, then download it NextJs folder in your private Github repository.

2) Go to Vercel (create account/log in).

3) Select Add new project.

4) Select your repository under Import Git Repository.

5) Add the project name.

6) Then select environment variables and add ENV variables mentioned in .env.template.

For Apache

Access-Control-Allow-Origin header set:

Access-Control-Allow-Headers set:

For Nginx

Access-Control-Allow-Origin header set:

Access-Control-Allow-Headers set:

Note: To allow all origins you can simply pass _ for example: Header set Access-Control-Allow-Origin “_” OR add_header

The admin will navigate to the dashboard and then navigate to Headless. unfold menu. From there they can access the Headless settings. It is displayed according to the picture below,

Let’s check below the types of configurations available for the administrator,

Headless banner type

In this section, the admin can set the banners as per their requirement. Now the complete list of created banner types will be listed on this page.

They have the option to use different types of banners, for example those that can be added by the administrator,

• Banner
• Carousel
• Corner Offers
• Recently viewed products

Headless banner

In this type, admin can add banners with images and also set their names. Here the banners they create in this section will be listed as below,

Headless Benefits

The headless Benefits section allows the admin to create and list the benefits on the storefront as per their choice.

They can add images to it with Local, Server or URL and also set the status to Active or Disabled whenever required.

Headless homepage

Headless homepage section is used by the admin to add various blocks on the homepage. Here they can add Featured Products Or Explore products through it and display them on the store front.

Headless notifications

Admin can set notifications based on product, category and other types from the headless notification section. Additionally, its configuration is shown as below,

Headless footers

The showcase footer is editable for the administrator. Here they can add different footers. They can also define the Title, Position and choose Page Or Category.

T

Headless AR

Products can be displayed in augmented reality on the storefront using the CS-Cart Headless theme. Here admin can add products and add their respective files in .glb And .usdz format.

Clear cache

THE Clear cache The button allows the admin to clear the cache in this headless theme.

Now let’s take a look at the Headless theme showcase below,

CS-Cart Headless theme is compatible with CS-Cart Multi Vendor. Therefore, sellers can also register on the platform and start selling.

To register as a seller, a user will navigate to Home>All sellers then press Become a seller button. So it is displayed according to the picture below,

Once the user presses the Become a Seller button, a registration page appears where they need to enter the following information:

• Business: Enter the company name
• E-mail: Enter email address

Fill in the details then tap Submit button to register as a seller.

An effectively structured home page with a navigation menu, categorized sections, featured products, a space dedicated to special offers and a banner with a call to action button.

Search option

Visitors can quickly and effortlessly locate products using the search function located on the right side of the menu.

Category page

Showcase a selected range of products in a specific category. Use layered navigation to help visitors easily find and filter the items that interest them.

Catalog List

Customers can sort products using the various filter options located in the upper right corner. They can arrange products based on any of the choices shown in the screenshots below.

Product page

Make your product pages stand out by including engaging descriptions, showcasing related items, and allowing customer reviews.

Additionally, customers can check the Related Products as well as the section below,

Cart page

A shopping cart icon located in the upper right corner of the website. It allows customers to view and check their cart whenever they want.

Additionally, it includes a Check button that redirects customers to the payment page.

Checkout page

Users can easily access a simplified and efficient checkout page. Additionally, it includes options for delivery address, shipping method, billing address, payment, and order review.

Login page

Now from this page customers can login via their email and password from the login page.

So that’s it for CS-Cart headless theme. Additionally, if you need further assistance, please do not hesitate to contact us via [email protected] or raise a ticket.