Version 2.5.3 • Enterprise Ready

Shoppi Framework
Master Guide

The complete manual for building industrialized e-commerce sites on the MyFrame/Shoppi ecosystem.

Merchant Context: ...

ID: |

✓ Active Association

Quick Start

The SDK acts as a bridge between your custom frontend and the Shoppi industrial cluster. It handles authentication, data persistence, and payments out-of-the-box.

<!-- Global Link (Use ?v= for cache busting) -->
<script src="/shoppi/shoppi-sdk.js?v=2.7.1"></script>

SEO & Industrial Metadata

In MyFrame, every page is its own SEO unit. The framework parses the HTML comment block at the top of your file to build the final page shell and meta headers.

1. The Meta Configuration Block

Place this block at the very first line of your .html file. It supports standard variables and multi-dimensional arrays for SEO.

<!--
$_PAGE_TITLE = "Industrial Shoes | Shoppi Store";
$_META['name']['description'] = "Premium multi-tenant e-commerce solution.";
$_META['name']['keywords'] = "shoppi, framework, sdk";

// Social Meta (OpenGraph)
$_META['property']['og:title'] = "Industrial Shoes";
$_META['property']['og:image'] = "/assets/banner.jpg";

$_PLUGINS = "website, checkout";
$_TEMPLATE = "page.html";
-->

2. Reactive TagCodes for SEO

These tags are automatically replaced by the server with the values defined in the block above (or merchant defaults):

Tag	Source
`%_PAGE_TITLE%`	`$_PAGE_TITLE`
`%_META%`	Automated block of `<meta>` tags.
`%_OG_TAGS%`	Automated block of `og:` properties.

Pro Tip: Using %_META% in your <head> is the industrial way to ensure all $_META arrays are rendered correctly without manual coding.

TagCodes & Templating

TagCodes are reactive strings replaced by the framework. They can be used anywhere in your HTML or inside Handlebars templates.

%_PAGE_TITLE%

The current SEO title assigned to the page.

%_PAGE_LOGO%

Merchant brand logo URL.

%_TAG%

Resolves any global or local DEFINE constant.

Routing & Navigation

The SDK implements a High-Speed Router that mirrors the CMS logic. It supports multilingual slugs and state-aware navigation.

1. Conditional Routing (routing.json)

The routing.json file allows you to override the default template selection using specific conditions on URL parameters.

// Correct Industrial Schema (Array based)
[
  {
    "if": { "page": "contacts" },
    "template": "custom_contact.html"
  },
  {
    "if": { "p": ":regex:/^promo-/" },
    "template": "landing.html"
  }
]

2. SEO Metadata Automation

To automate SEO, use the reactive %_META% tag in your template's <head>. This tag will expand the $_META array defined in your page's metadata block.

<!-- Inside your page.html template -->
<head>
    <title>%_PAGE_TITLE%</title>
    %_META%
    %_OG_TAGS%
</head>

2. Programmatic Navigation

// Navigate without refresh
Shoppi.router.navigate('shop/men', 'en');

// SPA Link Attribute
<a href="#" data-shoppi-link="contacts">Get in Touch</a>

JS API Reference

Shoppi.site

Method	Description
`getInfo()`	Fetches merchant data (title, logo, ID).
`getProducts()`	Catalog list with automatic filtering.
`getPage(slug)`	Content fetching for SPA views.
`search(query)`	High-speed multi-lingual catalog search.
`getSuggestions(q)`	Real-time search suggestions (autocomplete).

Shoppi.cart

Method	Description
`add(id, qty, meta)`	Increment item quantity.
`updateQty(id, qty)`	Set exact quantity (e.g., from input).
`remove(id)`	Remove item from cart.
`clear()`	Full cart reset.
`data`	Reactive object: `total`, `count`, `shipping`.

Shoppi.user

Method / Prop	Description
`register(email, pass, first, last)`	Register in tenant database.
`login(email, pass)`	Authenticated session start.
`getProfile()`	Fetch persistent profile data.
`updateProfile(data)`	Update name, phone, etc.
`saveAddress(type, addr)`	Save 'billing' or 'shipping' address.
`logout()`	Clear session and reload.

Shoppi.checkout

Method	Description
`start()`	Begin Stripe Checkout for current cart.
`startDirect(id)`	One-click checkout for services/downloads.
`createOnboardingLink()`	Generate Stripe onboarding URL.

Shoppi.local

Method	Description
`getCities()`	List of active business cities.
`getBusinesses(city)`	Directory of local merchants & services.

Use Case: Perfect for building Local Marketplaces, City Guides, or Multi-location brand portals. If you are building a single-store website, this module can be used to show "Related Businesses" or "Partners" in your area.

User Sessions & Security

The SDK automatically manages authentication tokens. When a user logs in, a session is stored in localStorage and the X-User-Token is injected into every subsequent API request.

Data Isolation: All users created via the SDK are stored in the Tenant Local Database (MongoDB). They are completely isolated from other merchants and the central Shoppi core.

Stripe Connect Ecosystem

Monetize Your Store

Shoppi uses Stripe Connect to isolate merchant funds. All payments created via Shoppi.checkout.start() are automatically routed to your professional Stripe account.

Industrial Backend Plugins

The Shoppi ecosystem is entirely plugin-driven. Every feature—from the product catalog to the user session—is a module located in /mnt/www/myframe/plugins/.

1. Plugin Architecture

A standard Shoppi plugin follows this directory structure for isolation and modularity:

plugins/[plugin_name]/
├── [plugin_name].xmlrpc.php   // Primary Class (API logic)
├── i18n/                    // Multi-language strings (.lng)
├── js/                      // Static JavaScript (Auto-scanned)
└── css/                     // Presentation styles (Auto-scanned)

2. The API Bridge (XML-RPC)

Any method defined in your [plugin]_xmlrpc class is automatically discovered and proxied by the api.php router. The SDK's call() method uses this naming convention to reach your code:

// Mapping: /api/[plugin]/[method]/json
Shoppi.call('/api/frontend_user/register/json', { ... });

3. Auto-Scanning Assets

The MyFrame core recursively scans active plugins for .js and .css files. These resources are automatically injected into the page shell, ensuring that your plugin-specific frontend logic is available globally without manual <script> tags.