Skip to main content

​
Overview

Salesive storefronts use a hybrid routing model where certain routes are handled by your frontend application, while others are automatically managed by the Salesive platform. This allows you to maintain full control over your product catalog and browsing experience while delegating authentication, checkout, and account management to Salesive.

​
Manual Routes

These routes must be implemented in your frontend application using your router of choice (React Router, Next.js App Router, etc.). You have complete control over the UI, data fetching, and user experience.

​
Home and Products

​
/
route
Homepage - Display featured products, banners, and promotional content. Typically shows a curated selection of products using the Products API.
​
/products
route
All Products - List all available products with filtering, sorting, and pagination. Use the GET /products endpoint with query parameters for search and filters.
​
/product/[id-or-slug]
route
Product Detail - Display detailed product information, images, variants, pricing, and add-to-cart functionality. Accepts either product ID or URL slug.

​
Categories

​
/category
route
All Categories - Display all product categories as a browsable list or grid. Use the Categories API to fetch the category tree.
​
/category/[id-or-slug]
route
Category Products - Show all products within a specific category with filtering options. Accepts either category ID or URL slug.

​
Automatic Routes

These routes are automatically handled by the Salesive platform. When users navigate to these paths, Salesive provides the complete UI and functionality. You should link to these routes from your application, but do not need to implement them.
​
/privacy-policy
automatic
Privacy Policy - Displays your shop’s privacy policy configured in the Salesive dashboard.
​
/terms-and-conditions
automatic
Terms and Conditions - Shows your shop’s terms and conditions configured in the Salesive dashboard.
​
/about-us
automatic
About Us - Displays information about your business configured in the Salesive dashboard.
​
/return-policy
automatic
Return Policy - Shows your shop’s return and refund policy configured in the Salesive dashboard.

​
Checkout and Payment

​
/checkout
automatic
Checkout Flow - Complete checkout experience including shipping address, payment method selection, and order review. Salesive handles the entire checkout process.
​
/payment
automatic
Payment Processing - Payment gateway integration and transaction processing. Salesive manages payment collection and verification.

​
Account Management

​
/account
automatic
Account Dashboard - User account overview including profile information, order history, and saved addresses.
​
/settings
automatic
Account Settings - User preferences, notification settings, and account configuration.
​
/orders
automatic
Order History - Complete list of user orders with status tracking and order details.
​
/logout
automatic
Logout - Handles user session termination and redirects to the appropriate page.

​
Implementation Guide

​
Setting Up Manual Routes

Use your preferred routing library to implement manual routes. Here’s an example with React Router: 
import { BrowserRouter, Routes, Route } from "react-router-dom";
import HomePage from "./pages/Home";
import ProductsPage from "./pages/Products";
import ProductDetailPage from "./pages/ProductDetail";
import CategoriesPage from "./pages/Categories";
import CategoryProductsPage from "./pages/CategoryProducts";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/products" element={<ProductsPage />} />
        <Route path="/product/:slug" element={<ProductDetailPage />} />
        <Route path="/category" element={<CategoriesPage />} />
        <Route path="/category/:slug" element={<CategoryProductsPage />} />
      </Routes>
    </BrowserRouter>
  );
}

​
Linking to Automatic Routes

Link to automatic routes from your application without implementing the pages: 
import { Link } from "react-router-dom";

function Footer() {
  return (
    <footer>
      <nav>
        <Link to="/about-us">About Us</Link>
        <Link to="/privacy-policy">Privacy Policy</Link>
        <Link to="/terms-and-conditions">Terms & Conditions</Link>
        <Link to="/return-policy">Return Policy</Link>
      </nav>
      
      <nav>
        <Link to="/account">My Account</Link>
        <Link to="/orders">Order History</Link>
        <Link to="/settings">Settings</Link>
        <Link to="/logout">Logout</Link>
      </nav>
    </footer>
  );
}

​
Cart to Checkout Flow

When users are ready to checkout, redirect them to the automatic /checkout route: 
import { useNavigate } from "react-router-dom";

function CartPage() {
  const navigate = useNavigate();
  
  const handleCheckout = () => {
    // Ensure cart has items
    if (cartItems.length > 0) {
      navigate("/checkout");
    }
  };
  
  return (
    <div>
      {/* Cart items display */}
      <button onClick={handleCheckout}>
        Proceed to Checkout
      </button>
    </div>
  );
}

​
Dynamic Routes with Next.js

If you’re using Next.js App Router, organize your routes as follows: 
app/
├── page.tsx                          # /
├── products/
│   ├── page.tsx                      # /products
│   └── [slug]/
│       └── page.tsx                  # /product/[slug]
└── category/
    ├── page.tsx                      # /category
    └── [slug]/
        └── page.tsx                  # /category/[slug]
Next.js Note: Automatic routes are handled by Salesive’s platform, not your Next.js application. Configure your Next.js middleware or routing to allow these paths to pass through to Salesive.

​
Best Practices

SEO Optimization

Use URL slugs instead of IDs in manual routes for better SEO. Generate slugs from product and category names.

Loading States

Implement skeleton screens and loading indicators in manual routes while fetching data from the API.

Error Handling

Handle 404 errors gracefully when products or categories are not found. Suggest alternative products or redirect to relevant pages.

Authentication Guards

Check authentication status before showing links to automatic routes like /account or /orders. Use the Auth API to verify user sessions.

​
Route Protection

Some automatic routes require authentication. Check user authentication status in your frontend: 
import { useEffect, useState } from "react";
import { auth } from "salesive-api-axios";
import { Link } from "react-router-dom";

function Header() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  
  useEffect(() => {
    const checkAuth = async () => {
      try {
        // Verify if user has a valid session
        const token = localStorage.getItem("salesive_token");
        setIsAuthenticated(!!token);
      } catch (error) {
        setIsAuthenticated(false);
      }
    };
    checkAuth();
  }, []);
  
  return (
    <header>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/products">Products</Link>
        <Link to="/category">Categories</Link>
        
        {isAuthenticated ? (
          <>
            <Link to="/account">Account</Link>
            <Link to="/orders">Orders</Link>
            <Link to="/logout">Logout</Link>
          </>
        ) : (
          <button onClick={() => window.location.href = "/login"}>
            Login
          </button>
        )}
      </nav>
    </header>
  );
}

​
Next Steps

Store API Reference

Explore Products, Categories, and Cart endpoints for implementing manual routes.

Salesive API Axios Client

Use typed API wrappers for seamless integration with your routing logic.

Development Guide

Learn about Salesive dev tools and configuration management.

Quickstart

Get started with a complete Salesive storefront setup.