@bagisto-native/core

@bagisto-native/core is the foundation module for Bagisto Native, enabling seamless communication between web applications and native applications using Hotwire technology.

It is built to work seamlessly with Open Source Headless eCommerce, and any React.js/Next.js setup allowing developers to connect a headless storefront with native mobile apps.

This module provides:

• Core Web Components for native interaction
• Hotwire bridge bundle (bundle.js)
• Utility functions for web ↔ native communication

Note: To create Bagisto Headless Commerce, use the following command:

npx -y @bagisto-headless/create your-storefront

📦 Installation

Install the module via npm:

npm install @bagisto-native/core

Note: This module must be used alongside @bagisto-native/react if you're using React/Next.js.

🛠️ Setup

1. Add the Hotwire Bridge Bundle

The Hotwire bridge bundle (bundle.js) is required for native communication.

Steps:

1. Navigate to node_modules/@bagisto-native/core/public
2. Copy bundle.js
3. Paste it into your project's public directory
4. Include it in your HTML:

<script src="/bundle.js"></script>

5. Or, include this as a static script in Next.js or similar frameworks.

🌐 Web Components

@bagisto-native/core provides the following Web Components:

| Component | Description | | -------------------- | ----------------------------------------------------------------- | | DynamicButton | Handles native buttons for cart, share, barcode, and image search | | HotwireToast | Trigger native toast messages | | HotwireSearch | Trigger native search events | | HotwireLocation | Auto-fill checkout address using native location | | HotwireHistorySync | Send current page URL to native apps | | HotwireThemeMode | Send current theme mode (light/dark) |

These components are primarily used in web projects but are wrapped by React components in @bagisto-native/react.

⚡ Utility Functions

@bagisto-native/core provides several helper functions:

triggerHotwireNativeToast(message: string)

Trigger a native toast message:

import { triggerHotwireNativeToast } from "@bagisto-native/core";

triggerHotwireNativeToast("Hello World!");

triggerHistorySyncEvent(url: URL)

Send the current URL to the native app:

import { triggerHistorySyncEvent } from "@bagisto-native/core";

const url = new URL(window.location.href);
triggerHistorySyncEvent(url);

triggerThemeModeEvent(mode: "light" | "dark")

Send the current theme mode:

import { triggerThemeModeEvent } from "@bagisto-native/core";

triggerThemeModeEvent("light");

triggerCartCountValue(cartCount: number)

Send the cart count to the native app:

import { triggerCartCountValue } from "@bagisto-native/core";

triggerCartCountValue(3);

isTurboNativeUserAgent(userAgent?: string): boolean

Check if the current environment is a Turbo Native app:

import { isTurboNativeUserAgent } from "@bagisto-native/core";

// Client-side
if (isTurboNativeUserAgent()) {
    console.log("Running in Turbo Native");
}

// Server-side
isTurboNativeUserAgent(req.headers['user-agent']);

Build the Native iOS App

After completing the setup of Bagisto Native, you can proceed to build the native iOS application using the official open-source repository.

🔗 Bagisto Native iOS App:
https://github.com/SocialMobikul/BagistoNative_iOS

📋 Requirements

• Node.js >= 18
• Works with any web project; for React/Next.js, use @bagisto-native/react for wrappers

🆘 Support

Open an issue or discussion in the repository if you need help.

📄 License

MIT License