Skip to content

Main Navigation User Guide Extensions Community Forum Contact Us

Appearance

Sidebar Navigation

Bagisto Headless eCommerce

Overview

Introduction

What is Bagisto Headless?

Why GraphQL?

Why Next.js?

Architecture Overview

Component Structure

Reusable Components

Layout Components

Feature Components

Prerequisites

Getting Started

Installation

Project Setup

Environment Variables

GraphQL Client Configuration

Apollo Client Setup

Apollo Wrapper Provider

GraphQL Request Utility

Cache Lifetime Options

Authentication & Authorization

NextAuth.js Integration

Authentication Flow

Protected Routes

Customer Authentication

GraphQL Schema & Operations

Understanding the Schema

Organizing Operations

GraphQL Operations

Fragments

Queries

Mutations

E-Commerce Features

Product Catalog

Product Listing

Fetching Products

Implementing Filters

Pagination Strategies

Search Functionality

Performance

Best Practices

Product Details

Fetching single product

Product variants

Product images

Related products

Categories

Category tree structure

Category products

Category filtering

Shopping Cart

Cart State Management

Redux integration

Cart actions and reducers

Cart persistence

Cart synchronization

Cart Operations

Add to cart

Update cart item

Remove from cart

Clear cart

Checkout Process

Checkout Flow

Multi-step checkout

Guest checkout

Registered customer checkout

Checkout validation

Shipping & Billing

Address management

Billing information

Address validation

Shipping methods

Payment Integration

Payment methods

Payment processing

Order confirmation

Advanced Topics

SEO Optimization

Performance Optimization

Caching Strategies

Next.js Caching

GraphQL Caching

Revalidation Strategies

TypeScript

Type Definitions

Typed Queries & Mutations

Component Props Typing

Best Practices

Code Organization

Error Handling

Code Quality

Bagisto Native Framework

Introduction

What is Bagisto Native

Why Bagisto Native

When to Use Bagisto Native

Supported Ecosystems

Bagisto Headless

Any Api Driven Backend

Core Philosophy

Native First

Headless First

Web → Native bridge

Concepts & Architecture

High-level Architecture

Web ↔ Native Communication Flow

Hotwire & Turbo Native

Why WebView + Native Bridge

Integration Guide

Getting Started

Installing Packages

Installing Core

Installing React Wrappers

Package Dependency Rules

Hotwire Bridge Bundle

What is bundle.js

Why It Is Required

How to Include It Safely

Production vs Development Notes

Implementing Native Behaviors

Registering Bridge Components

Enabling Native Events

Native-safe Routing Rules

SSR vs Client-side Considerations

Quick Integration Note

SDK Reference

@bagisto-native/core

What it provides

When to use

Overview

Purpose of Core Module

What Problems It Solves

Web Components

DynamicButton

HotwireToast

HotwireSearch

HotwireLocation

HotwireHistorySync

HotwireThemeMode

When to Use Directly vs React Wrappers

Utility Functions

Toast Events

History Sync

Theme Sync

Cart Count Sync

Turbo Native Detection

Server vs Client Usage

Best Practices

Performance

Event Safety

Avoiding Duplicate Native Actions

@bagisto-native/react

React / Next.js wrappers

Relationship with core

Overview

Why React Wrappers Exist

Relationship with Core

Usage Rules

Client-only Components

Dynamic Imports

SSR Limitations

Components Reference

DynamicButton

HotwireToast

HotwireSearch

HotwireLocation

HotwireHistorySync

HotwireThemeMode

Integration Patterns

App-level Providers

Page-level Integration

Layout-level Integration

Versioning & Compatibility

Mobile App Integration

Integration with IOS App

Introduction

Hotwire vs. Native

Integration Guide

Project URL Concept

What is Project URL

Local vs Production URLs

Network Considerations

iOS App Setup

Repository Overview

Project Structure

Xcode Setup

Configuration Example

Simulator vs Device

Base URL Configuration

Where to Set

Common Mistakes

Environment Switching

Build & Run

How to Run

First Launch Checklist

Verifying Native-Web Communication

Debugging Basics

Bridge Components

Overview

Component Registration

Available Components

Overview

Barcode Scanner

Image Search

Location

Navigation History

Search

Theme Sync

Toast

Dynamic Button

How-to Guides

Install Xcode

Create iOS Project

Install SPM Package

Use SPM Package

Run iOS App

Archive iOS App

Apple Account Setup

Publish to App Store

Add Custom Component

How to Guides

Integration with Bagisto Headless

Overview of the Setup Flow

Step 1: Install Bagisto Headless

Headless concept

CLI command

Generated project structure

Repository reference

Step 2: API & Environment Configuration

Environment variables

Development server

API connectivity check

Step 3: Connect Bagisto Native

Step 4: Component & Bridge Integration

Limitations & Common Pitfalls

Deployment & Environments

Environments

Hosting

CDN Considerations

Native Release Workflow

On this page

Environments

TODO: Documentation content goes here.

Next Steps

Explore CDN Considerations
Learn about Native Release Workflow
Understand Hosting

Help us improve this page on Github.

Last Updated:

Pager

Previous pageLimitations & Common Pitfalls

Next pageHosting

Released under the MIT License.

Copyright © 2026 Webkul