# Online Store Studio

Vexlora includes an admin-only Online Store suite inside eCommerce. It is designed for ThemeForest buyers who already have, or plan to build, their own Next.js storefront. The suite manages reusable storefront content and navigation data; it does not ship a customer-facing storefront, database, CMS server, or secret-bearing API implementation.

## Navigation

The eCommerce sidebar exposes seven permanent workspaces above Reports:

- **Overview** — publishing readiness, quick actions and the storefront integration boundary.
- **Menus & Navigation** — multiple menus, display locations, three-level nesting, drag/drop ordering and configurable mega-menu columns.
- **Pages** — reusable static pages with portable HTML editing, inline/featured media, SEO, visibility and publication controls.
- **Blog** — editorial posts with categories, archives, media, social-link handoff, filtering and publication status.
- **Testimonials** — reusable customer proof with rating, ordering, media and active state.
- **Contact us** — contact-page presentation, optional form fields, business details and configurable map handoff.
- **Popups** — newsletter, promotion and announcement campaigns with audience, timing, frequency, image and preview controls.

## Mega Menu Builder

The Menu Builder is intentionally data-driven rather than tied to one storefront header implementation. It is a frontend sample/configurator; buyers connect the saved structure to their own storefront renderer, REST API, GraphQL layer or database.

### Menu sources

The source library can add or drag:

- Website pages
- Products
- Blog posts
- Blog categories
- Blog archives
- Product categories
- Product brands
- Custom links
- Custom image blocks with upload/replace/remove

Categories and brands created through the eCommerce catalog quick-create workflow are registered in the same browser-safe catalog-navigation source store, so they become available to the Menu Builder without maintaining a second hardcoded list.

### Structure and columns

- Drag vertically to reorder.
- Drag toward an item to nest it, or use explicit indent/outdent controls.
- Nesting is capped at three levels.
- Top-level items can become mega menus.
- Each mega menu can use 2, 3, 4, 5 or 6 columns.
- Image blocks can act as a direct mega-menu column or as content inside a nested column.
- The admin preview illustrates hierarchy and density only; the buyer's storefront owns animation, hover behavior and final responsive rendering.

### Display locations

Menus carry a storefront-neutral location contract:

- Header
- Vertical
- Footer
- Mobile

These values are hooks/keys for buyer integration. Vexlora does not assume a specific customer-facing header component.

## Static Pages

The Pages workspace supports common static pages such as About Us, Contact, Privacy Policy, Terms & Conditions and campaign/information pages.

Each page includes:

- Title, slug and editorial category
- Portable HTML editor with source and sandboxed preview modes
- HTML snippets for headings, paragraphs, bold, italic, lists and links
- Inline image upload and remove-last-image action
- Featured image upload, replace and remove
- Publication and visibility controls
- SEO title, meta description and canonical URL
- Example storefront URL handoff such as `https://store.example.com/pages/privacy-policy`
- Optional component blocks for advanced buyers who prefer mapping data to React components

Vexlora does not execute scripts in the HTML preview. Production buyers should apply their own HTML sanitization policy before rendering stored HTML in a storefront.

## Blog

Blog records include title, slug, category, archive, author, excerpt, Markdown-ready content, publication state, featured image and optional social URLs.

The Blog workspace also includes:

- Category creation, activation and deletion
- Archive creation, activation and deletion
- Featured image upload/replace/remove
- Neutral Facebook, X/Twitter and Instagram icon-handoff preview slots
- Published post, category and archive sources for the Menu Builder

Vexlora does not bundle a blog/CMS backend. Buyers can serialize these records to their own content API or database.

## Testimonials

Testimonials keep customer name, category, title, content, rating, sort order, active state and customer image separate so the same record can be reused by multiple storefront sections. Customer images can be uploaded, replaced and removed from the sample media adapter.

## Contact us

The Contact workspace manages customer-facing copy and optional field policy while keeping inquiry execution outside the template. It supports:

- Email, phone, address and business hours
- Optional order-number and phone collection
- Success message
- Map enable/disable
- Direct map/share/embed URL mode
- Latitude/longitude + zoom mode
- Resolved map link preview
- Support ticket handoff example

The buyer's storefront decides which map library/provider to render.

## Popups

Popup campaigns support:

- Newsletter, promotion and announcement types
- Active/disabled state
- Delay in milliseconds
- Session, daily or one-time frequency
- All, new or returning visitor audience
- Headline, message, CTA label and destination
- Upload/URL image with replace/remove actions
- Admin-side live preview

The buyer's storefront remains responsible for animation, consent, analytics, delivery rules and durable campaign storage.

## Data and persistence

Online Store sample state uses the shared quota-safe browser storage adapter and `productConfig.storagePrefix`. The state loader hydrates older stored Online Store data with newer defaults so adding fields such as blog categories/archives, HTML page content or map settings does not crash existing browser sample state.

Production buyers can replace the browser-state layer with their own REST API, GraphQL service, database-backed CMS or external content platform without changing the visual page composition.

## Key files

```text
src/features/ecommerce/online-store/
├── components/
│   ├── menu-preview.tsx
│   ├── menu-source-panel.tsx
│   ├── menu-structure.tsx
│   ├── online-store-blog-page.tsx
│   ├── online-store-contact-page.tsx
│   ├── online-store-menu-builder-page.tsx
│   ├── online-store-overview-page.tsx
│   ├── online-store-page-editor.tsx
│   ├── online-store-pages-page.tsx
│   ├── online-store-popups-page.tsx
│   ├── online-store-shared.tsx
│   ├── online-store-testimonials-page.tsx
│   └── store-html-editor.tsx
└── data/
    ├── online-store-data.ts
    └── online-store-store.ts

src/features/ecommerce/data/catalog-navigation-source-store.ts
src/config/navigation/ecommerce.ts
scripts/check-online-store-suite.mjs
```

## Validation

Run:

```bash
npm run check:online-store
npm run check
npm run test:critical
```

When dependencies are installed, also certify the release with:

```bash
npm run typecheck
npm run lint
npm run build
```


## Navigation behavior and browser media uploads (v1.0.0)

Top-level navigation items explicitly declare one of three storefront intentions: **Direct link**, **Dropdown (1 column)**, or **Mega menu (2–6 columns)**. Nesting a first child beneath a Direct link promotes it to Dropdown automatically, while Mega Menu remains an explicit editor choice. This keeps ordinary submenus distinct from large merchandising mega menus.

Online Store image pickers accept common image files up to 8 MB. Raster files are optimized in the browser before being stored as frontend sample data so Blog featured images, Testimonial/Popup/Page media and Menu custom-image blocks can preview reliably without exhausting local/session storage. Buyers should replace this sample adapter with their own media upload/CDN API in a production integration.