dwindown/woonoow-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit of WooNooW Docs

Browse Source
This commit is contained in:
Dwindi Ramadhana
2026-02-01 00:10:31 +07:00
parent 217310888c
commit 259496bc86
37 changed files with 1879 additions and 628 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
contents/docs/api-reference/delete/index.mdx
View File

@@ -1,63 +0,0 @@
---
title : Delete
description : example api DELETE
date : 10-12-2024
---
## Heading 2
this is regular text written in markdown format with `inline code`, **bold**, and *italic*
### Heading 3
example of ordered list format :
- list one
- sub list
- list two
- list three
#### Heading 4
Below is an example of how to write a code block :
````plaintext
```javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
// Check if the rocket is stable
if (!isStable()) {
NoCrash(); // Prevent the crash
}
}
```
````
example note :
```plaintext
<Note type="note" title="Note">
This is a general note to convey information to the user.
</Note>
```
displaying an image in markdown format :
```plaintext
![Alt text for the image](/images/example-img.png)
```
render as :
![Alt text for the image](/images/example-img.png)
For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
<Note type="warning" title="Warning">
every page that is indexed in a folder will have an `index.mdx` file with metadata :
```plaintext
---
title : Introduction
description : overview or synopsis of a project
date : 10-12-2024
image : example-img.png
---
```
</Note>

63
contents/docs/api-reference/fetch/index.mdx
View File

@@ -1,63 +0,0 @@
---
title : Fetch
description : example api FETCH
date : 10-12-2024
---
## Heading 2
this is regular text written in markdown format with `inline code`, **bold**, and *italic*
### Heading 3
example of ordered list format :
- list one
- sub list
- list two
- list three
#### Heading 4
Below is an example of how to write a code block :
````plaintext
```javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
// Check if the rocket is stable
if (!isStable()) {
NoCrash(); // Prevent the crash
}
}
```
````
example note :
```plaintext
<Note type="note" title="Note">
This is a general note to convey information to the user.
</Note>
```
displaying an image in markdown format :
```plaintext
![Alt text for the image](/images/example-img.png)
```
render as :
![Alt text for the image](/images/example-img.png)
For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
<Note type="warning" title="Warning">
every page that is indexed in a folder will have an `index.mdx` file with metadata :
```plaintext
---
title : Introduction
description : overview or synopsis of a project
date : 10-12-2024
image : example-img.png
---
```
</Note>

63
contents/docs/api-reference/get/index.mdx
View File

@@ -1,63 +0,0 @@
---
title : Get
description : example api GET
date : 10-12-2024
---
## Heading 2
this is regular text written in markdown format with `inline code`, **bold**, and *italic*
### Heading 3
example of ordered list format :
- list one
- sub list
- list two
- list three
#### Heading 4
Below is an example of how to write a code block :
````plaintext
```javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
// Check if the rocket is stable
if (!isStable()) {
NoCrash(); // Prevent the crash
}
}
```
````
example note :
```plaintext
<Note type="note" title="Note">
This is a general note to convey information to the user.
</Note>
```
displaying an image in markdown format :
```plaintext
![Alt text for the image](/images/example-img.png)
```
render as :
![Alt text for the image](/images/example-img.png)
For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
<Note type="warning" title="Warning">
every page that is indexed in a folder will have an `index.mdx` file with metadata :
```plaintext
---
title : Introduction
description : overview or synopsis of a project
date : 10-12-2024
image : example-img.png
---
```
</Note>

87
contents/docs/api-reference/licensing/index.mdx Normal file
View File

@@ -0,0 +1,87 @@
---
title: Licensing API
description: Endpoints for activating, validating, and managing licenses
date: 2024-01-31
---
## Overview
The Licensing API allows external applications to interact with the WooNooW licensing system.
**Base URL**: `https://your-domain.com/wp-json/woonoow/v1`
---
## Public Endpoints
### Activate License
Activates a license key for a specific domain.
```http
POST /licenses/activate
```
#### Activation Parameters
| Body Params | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| `license_key` | `string` | **Yes** | The license key to activate |
| `domain` | `string` | **Yes** | The domain where the software is installed |
| `activation_mode` | `string` | No | Set to `oauth` to trigger OAuth flow |
#### Responses
```json
{
"success": true,
"activation_id": 123,
"license_key": "XXXX-YYYY-ZZZZ-WWWW",
"status": "active"
}
```
If OAuth is required:
```json
{
"success": false,
"oauth_required": true,
"oauth_redirect": "https://vendor.com/my-account/license-connect/...",
"state": "abc12345"
}
```
---
### Validate License
Checks if a license key is valid and active for the current domain.
```http
POST /licenses/validate
```
#### Validation Parameters
| Body Params | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| `license_key` | `string` | **Yes** | The license key to validate |
| `domain` | `string` | **Yes** | The domain to check against |
---
### Deactivate License
Deactivates a license for the current domain.
```http
POST /licenses/deactivate
```
#### Deactivation Parameters
| Body Params | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| `license_key` | `string` | **Yes** | The license key to deactivate |
| `domain` | `string` | **Yes** | The domain to remove |

5
contents/docs/api-reference/meta.json Normal file
View File

@@ -0,0 +1,5 @@
{
"pages": [
"licensing"
]
}

63
contents/docs/api-reference/post/index.mdx
View File

@@ -1,63 +0,0 @@
---
title : Post
description : example api POST
date : 10-12-2024
---
## Heading 2
this is regular text written in markdown format with `inline code`, **bold**, and *italic*
### Heading 3
example of ordered list format :
- list one
- sub list
- list two
- list three
#### Heading 4
Below is an example of how to write a code block :
````plaintext
```javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
// Check if the rocket is stable
if (!isStable()) {
NoCrash(); // Prevent the crash
}
}
```
````
example note :
```plaintext
<Note type="note" title="Note">
This is a general note to convey information to the user.
</Note>
```
displaying an image in markdown format :
```plaintext
![Alt text for the image](/images/example-img.png)
```
render as :
![Alt text for the image](/images/example-img.png)
For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
<Note type="warning" title="Warning">
every page that is indexed in a folder will have an `index.mdx` file with metadata :
```plaintext
---
title : Introduction
description : overview or synopsis of a project
date : 10-12-2024
image : example-img.png
---
```
</Note>

16
contents/docs/changelog/index.mdx Normal file
View File

@@ -0,0 +1,16 @@
---
title: Changelog
description: Latest updates and changes to WooNooW
date: 2024-01-31
---
## Initial Release
<Release version="1.0.0" date="2024-01-31" title="Initial Public Release">
<Changes type="added">
- Core plugin functionality for WooCommerce enhancement.
- Licensing module with OAuth activation flow.
- Subscription management and payment gateway integration.
- Extensive hook system for developers.
</Changes>
</Release>

49
contents/docs/changelog/version-1/index.mdx
View File

@@ -1,49 +0,0 @@
---
title : Version 1
description : changelog version
date : 10-12-2024
---
## Render as
<Release version="1.0.0" date="2025-08-10" title="Release version 1.0.0">
<Changes type="added">
- add components
</Changes>
<Changes type="fixed">
- fix globals.css
</Changes>
<Changes type="improved">
- improved search components
</Changes>
<Changes type="deprecated">
- deprecated footer components
</Changes>
<Changes type="removed">
- removed utility class
- removed unused hooks
</Changes>
</Release>
## Output Markdown
```
<Release version="1.0.0" date="2025-08-10" title="Release version 1.0.0">
<Changes type="added">
- add components
</Changes>
<Changes type="fixed">
- fix globals.css
</Changes>
<Changes type="improved">
- improved search components
</Changes>
<Changes type="deprecated">
- deprecated footer components
</Changes>
<Changes type="removed">
- removed utility class
- removed unused hooks
</Changes>
</Release>
```

49
contents/docs/changelog/version-2/index.mdx
View File

@@ -1,49 +0,0 @@
---
title : Version 2
description : changelog version
date : 10-12-2024
---
## Render as
<Release version="2.0.0" date="2025-08-10" title="Release version 2.0.0">
<Changes type="added">
- add components
</Changes>
<Changes type="fixed">
- fix globals.css
</Changes>
<Changes type="improved">
- improved search components
</Changes>
<Changes type="deprecated">
- deprecated footer components
</Changes>
<Changes type="removed">
- removed utility class
- removed unused hooks
</Changes>
</Release>
## Output Markdown
```
<Release version="2.0.0" date="2025-08-10" title="Release version 2.0.0">
<Changes type="added">
- add components
</Changes>
<Changes type="fixed">
- fix globals.css
</Changes>
<Changes type="improved">
- improved search components
</Changes>
<Changes type="deprecated">
- deprecated footer components
</Changes>
<Changes type="removed">
- removed utility class
- removed unused hooks
</Changes>
</Release>
```

49
contents/docs/changelog/version-3/index.mdx
View File

@@ -1,49 +0,0 @@
---
title : Version 3
description : changelog version
date : 10-12-2024
---
## Render as
<Release version="3.0.0" date="2025-08-10" title="Release version 3.0.0">
<Changes type="added">
- add components
</Changes>
<Changes type="fixed">
- fix globals.css
</Changes>
<Changes type="improved">
- improved search components
</Changes>
<Changes type="deprecated">
- deprecated footer components
</Changes>
<Changes type="removed">
- removed utility class
- removed unused hooks
</Changes>
</Release>
## Output Markdown
```
<Release version="3.0.0" date="2025-08-10" title="Release version 3.0.0">
<Changes type="added">
- add components
</Changes>
<Changes type="fixed">
- fix globals.css
</Changes>
<Changes type="improved">
- improved search components
</Changes>
<Changes type="deprecated">
- deprecated footer components
</Changes>
<Changes type="removed">
- removed utility class
- removed unused hooks
</Changes>
</Release>
```

135
contents/docs/configuration/appearance/index.mdx Normal file
View File

@@ -0,0 +1,135 @@
---
title: Appearance Settings
description: Customize the look and feel of your WooNooW store
date: 2024-01-31
---
## Accessing Appearance Settings
Go to **WooNooW → Appearance** in the WordPress admin.
---
## General Settings
### Logo
Upload your store logo for display in the header.
- **Recommended size**: 200x60 pixels (width x height)
- **Formats**: PNG (transparent background recommended), SVG, JPG
- **Mobile**: Automatically resized for smaller screens
### SPA Page
Select which page hosts the WooNooW SPA. Default is "Store".
> **Note**: This page should contain the `[woonoow_spa]` shortcode.
### SPA Mode
Choose how WooNooW handles your store pages:
| Mode | Description |
|------|-------------|
| **Full** | All WooCommerce pages redirect to SPA |
| **Disabled** | Native WooCommerce templates are used |
---
## Colors
### Primary Color
The main brand color used for:
- Buttons
- Links
- Active states
- Primary actions
**Default**: `#6366f1` (Indigo)
### Secondary Color
Secondary UI elements:
- Less prominent buttons
- Borders
- Subtle backgrounds
**Default**: `#64748b` (Slate)
### Accent Color
Highlight color for:
- Sale badges
- Notifications
- Call-to-action elements
**Default**: `#f59e0b` (Amber)
---
## Typography
### Body Font
Font used for general text content.
**Options**: System fonts and Google Fonts
- Inter
- Open Sans
- Roboto
- Lato
- Poppins
- And more...
### Heading Font
Font used for titles and headings.
**Options**: Same as body fonts, plus:
- Cormorant Garamond (Serif option)
- Playfair Display
- Merriweather
### Font Sizes
Font sizes are responsive and adjust automatically based on screen size.
---
## Layout
### Container Width
Maximum width of the content area.
| Option | Width |
|--------|-------|
| Narrow | 1024px |
| Default | 1280px |
| Wide | 1536px |
| Full | 100% |
### Header Style
Configure the header appearance:
- **Fixed**: Stays at top when scrolling
- **Static**: Scrolls with page
### Product Grid
Columns in the shop page grid:
- Mobile: 1-2 columns
- Tablet: 2-3 columns
- Desktop: 3-4 columns
---
## Saving Changes
1. Make your changes
2. Click **Save Changes** button
3. Refresh your store page to see updates
> **Tip**: Open your store in another tab to preview changes quickly.

141
contents/docs/configuration/spa-mode/index.mdx Normal file
View File

@@ -0,0 +1,141 @@
---
title: SPA Mode
description: Understanding and configuring WooNooW's SPA mode
date: 2024-01-31
---
## What is SPA Mode?
SPA Mode controls how WooNooW handles your WooCommerce pages. It determines whether visitors experience the modern SPA interface or traditional WooCommerce templates.
---
## Available Modes
### Full Mode (Recommended)
**All WooCommerce pages redirect to the SPA.**
When a visitor navigates to:
- `/shop` → Redirects to `/store/shop`
- `/product/example` → Redirects to `/store/product/example`
- `/cart` → Redirects to `/store/cart`
- `/checkout` → Redirects to `/store/checkout`
- `/my-account` → Redirects to `/store/my-account`
**Benefits**:
- Instant page transitions
- Modern, consistent UI
- Better mobile experience
- Smooth animations
**Best for**:
- New stores
- Stores wanting a modern look
- Mobile-focused businesses
### Disabled Mode
**WooCommerce uses its native templates.**
WooCommerce pages work normally with your theme's templates. WooNooW admin features still work, but the customer-facing SPA is turned off.
**Benefits**:
- Keep existing theme customizations
- Compatibility with WooCommerce template overrides
- Traditional page-by-page navigation
**Best for**:
- Stores with heavy theme customizations
- Testing before full rollout
- Troubleshooting issues
---
## Switching Modes
### How to Switch
1. Go to **WooNooW → Appearance → General**
2. Find **SPA Mode** setting
3. Select your preferred mode
4. Click **Save Changes**
### What Happens When Switching
**Switching to Full**:
- WooCommerce pages start redirecting
- SPA loads for shop experience
- No data is changed
**Switching to Disabled**:
- Redirects stop immediately
- WooCommerce templates take over
- No data is changed
> **Note**: All your products, orders, and settings remain unchanged when switching modes.
---
## URL Structure
### Full Mode URLs
```
https://yourstore.com/store/ → Home/Shop
https://yourstore.com/store/shop → Shop page
https://yourstore.com/store/product/slug → Product page
https://yourstore.com/store/cart → Cart
https://yourstore.com/store/checkout → Checkout
https://yourstore.com/store/my-account → Account
```
### Disabled Mode URLs
Standard WooCommerce URLs:
```
https://yourstore.com/shop/ → Shop page
https://yourstore.com/product/slug → Product page
https://yourstore.com/cart/ → Cart
https://yourstore.com/checkout/ → Checkout
https://yourstore.com/my-account/ → Account
```
---
## SEO Considerations
### Full Mode SEO
- WooCommerce URLs (`/product/slug`) remain in sitemaps
- When users click from search results, they're redirected to SPA
- Meta tags are generated dynamically for social sharing
- 302 (temporary) redirects preserve link equity
### Disabled Mode SEO
- Standard WooCommerce SEO applies
- No redirects needed
- Works with Yoast SEO, RankMath, etc.
---
## Troubleshooting
### Redirects Not Working
1. **Flush Permalinks**: Go to Settings → Permalinks → Save Changes
2. **Check Store Page**: Ensure the Store page exists and has `[woonoow_spa]`
3. **Clear Cache**: Purge all caching layers
### Blank Pages After Enabling
1. Verify SPA Mode is set to "Full"
2. Clear browser cache
3. Check for JavaScript errors in browser console
### Want to Test Before Enabling
1. Keep mode as "Disabled"
2. Visit `/store/` directly to preview SPA
3. Switch to "Full" when satisfied

79
contents/docs/developer/addons/bridge-pattern/index.mdx Normal file
View File

@@ -0,0 +1,79 @@
---
title: Bridge Pattern
description: Integrating third-party plugins with WooNooW
date: 2024-01-31
---
# Addon Bridge Pattern
## Philosophy
**WooNooW Core = Zero Addon Dependencies**
We don't integrate specific plugins into WooNooW core. Instead, we provide:
1. **Hook system** for addons to extend functionality
2. **Bridge snippets** for compatibility with existing plugins
3. **Addon development guide** for building proper WooNooW addons
---
## The Problem
Example: **Rajaongkir** (Indonesian Shipping Plugin).
It removes standard fields and adds custom dropdowns, storing data in WooCommerce sessions.
It doesn't work with WooNooW OrderForm out of the box because the OrderForm uses standard fields and API-based validation.
---
## Solution: Bridge Snippet
### Option A: Standalone Bridge Plugin
Create a tiny bridge plugin that makes the third-party plugin work with WooNooW.
```php
/**
* Plugin Name: WooNooW Rajaongkir Bridge
* Description: Makes Rajaongkir plugin work with WooNooW OrderForm
* Version: 1.0.0
*/
// Hook into WooNooW's shipping calculation
add_filter('woonoow_before_shipping_calculate', function($shipping_data) {
if ($shipping_data['country'] === 'ID' && !empty($shipping_data['city'])) {
// Search API and set session data
$api = Cekongkir_API::get_instance();
$results = $api->search_destination_api($shipping_data['city']);
if (!empty($results[0])) {
WC()->session->set('selected_destination_id', $results[0]['id']);
}
}
return $shipping_data;
});
```
### Option B: Frontend Injection
Inject script to handle UI changes.
```typescript
import { addonLoader, addFilter } from '@woonoow/hooks';
addonLoader.register({
id: 'rajaongkir-bridge',
init: () => {
addFilter('woonoow_order_form_after_shipping', (content, formData, setFormData) => {
if (formData.shipping?.country !== 'ID') return content;
return (
<>
{content}
<div className="custom-field">
{/* Custom Destination Select */}
</div>
</>
);
});
}
});
```

50
contents/docs/developer/addons/module-integration/index.mdx Normal file
View File

@@ -0,0 +1,50 @@
---
title: Module Integration
description: Integrating Addons usage with Module Registry
date: 2024-01-31
---
# Addon-Module Integration
## Vision
**Module Registry as the Single Source of Truth.**
Functionality extensions—whether built-in Modules or external Addons—should live in the same UI.
## Registration
Addons register themselves via the `woonoow/addon_registry` filter.
```php
add_filter('woonoow/addon_registry', function($addons) {
$addons['my-shipping-addon'] = [
'id' => 'my-shipping-addon',
'name' => 'My Shipping',
'description' => 'Custom shipping integration',
'version' => '1.0.0',
'author' => 'My Company',
'category' => 'shipping',
'icon' => 'truck',
'settings_url' => '/settings/shipping/my-addon',
'spa_bundle' => plugin_dir_url(__FILE__) . 'dist/addon.js',
];
return $addons;
});
```
This ensures your addon appears in the **WooNooW Modules** list with a consistent UI, toggle switch, and settings link.
## Settings Pages
Addons can register their own SPA routes for settings pages.
```php
add_filter('woonoow/spa_routes', function($routes) {
$routes[] = [
'path' => '/settings/shipping/my-addon',
'component_url' => plugin_dir_url(__FILE__) . 'dist/Settings.js',
'title' => 'My Addon Settings',
];
return $routes;
});
```

79
contents/docs/developer/addons/react-integration/index.mdx Normal file
View File

@@ -0,0 +1,79 @@
---
title: React Integration
description: Using React within WooNooW Addons
date: 2024-01-31
---
# Addon React Integration
## The Challenge
External addons cannot bundle React because WooNooW already ships with a React runtime. Bundling it again would cause conflicts and bloat.
## Solution: Exposed Runtime
WooNooW exposes its React instance and Component library on the `window` object.
### Core Setup (How it works internally)
```typescript
// WooNooW Core
window.WooNooW = {
React: React,
ReactDOM: ReactDOM,
components: {
Button: Button,
Input: Input,
Select: Select,
},
hooks: { addFilter, addAction }
};
```
### Addon implementation
#### Level 1: Vanilla JS (No Build)
Good for simple injections.
```javascript
(function() {
window.addEventListener('woonoow:loaded', function() {
window.WooNooW.addFilter('woonoow_order_form_after_shipping', function(container) {
// Manual DOM manipulation
return container;
});
});
})();
```
#### Level 2: React with Build (Recommended)
Use `vite` or `webpack` and configure React as an **external**.
**vite.config.js**
```javascript
export default {
build: {
rollupOptions: {
external: ['react', 'react-dom'],
output: {
globals: {
react: 'window.WooNooW.React',
'react-dom': 'window.WooNooW.ReactDOM'
}
}
}
}
};
```
**Index.tsx**
```typescript
const { React, hooks, components } = window.WooNooW;
const { Button } = components;
function MyAddonComponent() {
return <Button>Click Me</Button>;
}
```

143
contents/docs/features/checkout/index.mdx Normal file
View File

@@ -0,0 +1,143 @@
---
title: Checkout
description: Streamlined purchasing experience in WooNooW
date: 2024-01-31
---
## Overview
The checkout process includes:
1. **Cart Review** - Verify items before checkout
2. **Customer Information** - Billing and shipping details
3. **Payment Method** - Select how to pay
4. **Order Confirmation** - Complete the purchase
---
## Checkout Flow
### Step 1: Cart
Before checkout, customers review their cart:
- Product list with images
- Quantity adjustments
- Remove items
- Apply coupon codes
- See subtotal, shipping, and total
### Step 2: Customer Details
Customers provide:
- **Email address**
- **Billing information**
- **Shipping address** (if different from billing)
> **Note**: Logged-in customers have their details pre-filled.
### Step 3: Shipping Method
If physical products are in the cart:
- Available shipping methods are shown
- Shipping cost is calculated
- Customer selects preferred method
### Step 4: Payment
Customers choose their payment method:
- Credit/Debit Card (Stripe, PayPal, etc.)
- Bank Transfer
- Cash on Delivery
- Other configured gateways
### Step 5: Place Order
After reviewing everything:
- Click "Place Order"
- Payment is processed
- Confirmation page is shown
- Email receipt is sent
---
## Features
### Guest Checkout
Allow customers to checkout without creating an account.
Configure in **WooCommerce → Settings → Accounts & Privacy**.
### Coupon Codes
Customers can apply discount codes:
1. Enter code in the coupon field
2. Click "Apply"
3. Discount is reflected in total
### Order Notes
Optional field for customers to add special instructions.
---
## Payment Gateways
### Supported Gateways
WooNooW supports all WooCommerce payment gateways:
| Gateway | Type |
|---------|------|
| Bank Transfer (BACS) | Manual |
| Check Payments | Manual |
| Cash on Delivery | Manual |
| PayPal | Card / PayPal |
| Stripe | Card |
| Square | Card |
### Configuring Gateways
1. Go to **WooNooW → Settings → Payments**
2. Enable desired payment methods
3. Configure API keys and settings
4. Test with sandbox/test mode first
---
## After Checkout
### Order Confirmation Page
Shows:
- Order number
- Order summary
- Next steps
### Confirmation Email
Automatically sent to customer with:
- Order details
- Payment confirmation
- Shipping information (if applicable)
---
## Troubleshooting
### "Place Order" Button Not Working
1. Check all required fields are filled
2. Verify payment gateway is properly configured
3. Check browser console for JavaScript errors
### Payment Declined
1. Customer should verify card details
2. Check payment gateway dashboard for error details
3. Ensure correct API keys are configured
### Shipping Not Showing
1. Verify shipping zones are configured in WooCommerce
2. Check if products have weight/dimensions set
3. Confirm customer's address is in a configured zone

98
contents/docs/features/shop/index.mdx Normal file
View File

@@ -0,0 +1,98 @@
---
title: Shop Page
description: Browsing and filtering your product catalog
date: 2024-01-31
---
## Overview
The WooNooW shop page provides:
- **Product Grid** - Visual display of products
- **Search** - Find products by name
- **Filters** - Category and sorting options
- **Pagination** - Navigate through products
---
## Features
### Product Cards
Each product displays:
- Product image
- Product name
- Price (with sale price if applicable)
- Add to Cart button
- Wishlist button (if enabled)
### Search
Type in the search box to filter products by name. Search is instant and updates the grid as you type.
### Category Filter
Filter products by category using the dropdown. Shows:
- All Categories
- Individual categories with product count
### Sorting
Sort products by:
- Default sorting
- Popularity
- Average rating
- Latest
- Price: Low to High
- Price: High to Low
---
## Customization
### Grid Layout
Configure the product grid in **WooNooW → Appearance**:
| Device | Options |
|--------|---------|
| Mobile | 1-2 columns |
| Tablet | 2-4 columns |
| Desktop | 2-6 columns |
### Product Card Style
Product cards can display:
- **Image** - Product featured image
- **Title** - Product name
- **Price** - Current price and sale price
- **Rating** - Star rating (if reviews enabled)
- **Add to Cart** - Quick add button
---
## Navigation
### Clicking a Product
Clicking a product card navigates to the full product page where customers can:
- View all images
- Select variations
- Read description
- Add to cart
### Back to Shop
From any product page, use the breadcrumb or browser back button to return to the shop.
---
## Performance
### Lazy Loading
Product images load as they come into view, improving initial page load time.
### Infinite Scroll vs Pagination
Currently uses pagination. Infinite scroll may be added in future versions.

26
contents/docs/features/shortcodes/index.mdx Normal file
View File

@@ -0,0 +1,26 @@
---
title: Shortcodes
description: Available shortcodes in WooNooW
date: 2024-01-31
---
## The Primary Shortcode
WooNooW operates as a Single Page Application (SPA). To render the entire store application, you only need one shortcode:
### `[woonoow_spa]`
This shortcode initializes the SPA router and renders the appropriate view based on the URL (Shop, Product, Cart, Checkout, Account).
**Usage:**
Place this shortcode on your designated "Store" page.
```text
[woonoow_spa]
```
---
## Legacy Shortcodes
*Note: Previous versions utilize individual shortcodes (`[woonoow_shop]`, etc.). These are now consolidated into the single SPA entry point for better performance and routing state management.*

94
contents/docs/getting-started/installation/index.mdx Normal file
View File

@@ -0,0 +1,94 @@
---
title: Installation Guide
description: Installing WooNooW on your WordPress site
date: 2024-01-31
---
## Requirements
Before installing, ensure your site meets these requirements:
| Requirement | Minimum | Recommended |
|-------------|---------|-------------|
| WordPress | 6.0+ | Latest |
| WooCommerce | 7.0+ | Latest |
| PHP | 7.4+ | 8.1+ |
| MySQL | 5.7+ | 8.0+ |
## Installation Methods
### Method 1: WordPress Admin (Recommended)
1. Go to **Plugins → Add New**
2. Click **Upload Plugin**
3. Select the `woonoow.zip` file
4. Click **Install Now**
5. Click **Activate**
### Method 2: FTP Upload
1. Extract `woonoow.zip` to get the `woonoow` folder
2. Upload to `/wp-content/plugins/`
3. Go to **Plugins → Installed Plugins**
4. Find WooNooW and click **Activate**
## Post-Installation
After activation, WooNooW automatically:
### 1. Creates Store Page
A new "Store" page is created with the SPA shortcode. This is your main storefront.
### 2. Registers Rewrite Rules
URL routes like `/store/shop` and `/store/product/...` are registered.
> **Note**: If you see 404 errors, go to **Settings → Permalinks** and click **Save Changes** to flush rewrite rules.
### 3. Sets Default Configuration
Basic appearance settings are configured with sensible defaults.
## Verification Checklist
After installation, verify everything works:
- [ ] Plugin activated without errors
- [ ] WooNooW menu appears in admin sidebar
- [ ] Store page exists (check **Pages**)
- [ ] `/store` URL loads the SPA
- [ ] Products display on shop page
## WooCommerce Compatibility
WooNooW works alongside WooCommerce:
| WooCommerce Page | WooNooW Behavior (Full Mode) |
|------------------|------------------------------|
| `/shop` | Redirects to `/store/shop` |
| `/product/...` | Redirects to `/store/product/...` |
| `/cart` | Redirects to `/store/cart` |
| `/checkout` | Redirects to `/store/checkout` |
| `/my-account` | Redirects to `/store/my-account` |
When SPA Mode is **Disabled**, WooCommerce pages work normally.
## Updating
To update WooNooW:
1. Download the latest version
2. Go to **Plugins → Installed Plugins**
3. Deactivate WooNooW (optional but recommended)
4. Delete the old version
5. Install and activate the new version
Your settings are preserved in the database.
## Uninstalling
To completely remove WooNooW:
1. Deactivate the plugin (restores WooCommerce page content)
2. Delete the plugin
3. (Optional) Delete WooNooW options from database
> **Note**: Deactivating restores original WooCommerce shortcodes to Cart, Checkout, and My Account pages.

95
contents/docs/getting-started/introduction/index.mdx
View File

@@ -1,74 +1,39 @@
---
title : Introduction
description : overview or synopsis of a project
date : 10-12-2024
title: Introduction
description: Overview of the WooNooW Plugin ecosystem
date: 2024-01-31
---
## Heading 2
## What is WooNooW?
this is regular text written in markdown format with `inline code`, **bold**, and *italic*
**WooNooW** is a comprehensive WooCommerce enhancement suite designed to power up your online store. It provides a robust set of tools for license management, subscription handling, and custom checkout flows.
### Heading 3
### Key Features
example of ordered list format :
* **License Management**: Sell and manage digital software licenses with ease.
* **OAuth Activation**: Secure, user-verified license activation flow.
* **Subscription Utilities**: Enhanced subscription notifications and manual renewal controls.
* **Developer API**: Full REST API for extending functionality.
- list one
- sub list
- list two
- list three
#### Heading 4
Below is an example of how to write a code block :
````plaintext
```javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
// Check if the rocket is stable
if (!isStable()) {
NoCrash(); // Prevent the crash
}
}
```
````
example note :
```plaintext
<Note type="note" title="Note">
This is a general note to convey information to the user.
</Note>
```
displaying an image in markdown format :
```plaintext
![Alt text for the image](/images/example-img.png)
```
render as :
![Alt text for the image](/images/example-img.png)
For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
<Note type="warning" title="Warning">
every page that is indexed in a folder will have an `index.mdx` file with metadata :
```plaintext
---
title : Introduction
description : overview or synopsis of a project
date : 10-12-2024
image : example-img.png
---
```
</Note>
<Accordion title="Code Block" defaultOpen={true} icon="Code">
```javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
// Check if the rocket is stable
if (!isStable()) {
NoCrash(); // Prevent the crash
}
}
```
</Accordion>
## Why use WooNooW?
If you are a plugin developer or a digital store owner using WooCommerce, WooNooW simplifies the complex parts of your business logic.
<CardGroup>
<Card title="For Developers" icon="Terminal">
Built with extensibility in mind. Use our hooks, filters, and REST API to build custom integrations.
</Card>
<Card title="For Store Owners" icon="Box">
Manage your digital products, verified customers, and subscriptions all in one place.
</Card>
</CardGroup>
## Getting Help
Need assistance? Check out our support channels:
* [Official Support](https://woonoow.com/support)
* [Community Forums](https://community.woonoow.com)
* [Developer Docs](https://docs.woonoow.com)

7
contents/docs/getting-started/meta.json Normal file
View File

@@ -0,0 +1,7 @@
{
"pages": [
"introduction",
"quick-start-guide",
"development"
]
}

21
contents/docs/hooks/frontend/index.mdx Normal file
View File

@@ -0,0 +1,21 @@
---
title: Frontend Hooks
description: Hooks affecting the storefront and checkout experience
date: 2024-01-31
---
## Filters
### woonoow_ssr_cache_ttl
Customize the Time-To-Live (TTL) for Server Side Rendered fragments.
**Parameters:**
* `$ttl` (int): Time in seconds (Default: 3600).
### woonoow_standard_checkout_field_keys
Modify the standard set of checkout fields recognized by the system.
**Parameters:**
* `$keys` (array): List of field aliases (e.g., ['billing_first_name', ...]).

27
contents/docs/hooks/index.mdx Normal file
View File

@@ -0,0 +1,27 @@
---
title: Hooks Overview
description: Overview of Actions and Filters available in WooNooW
date: 2024-01-31
---
## Introduction
WooNooW provides a rich set of actions and filters allowing developers to customize almost every aspect of the plugin without modifying core files.
### Hook Categories
* [Notifications](/docs/hooks/notifications) - Customize email templates, subjects, and channels.
* [Subscriptions](/docs/hooks/subscriptions) - Intercept payment logic and modify gateway behavior.
* [Frontend & checkout](/docs/hooks/frontend) - Adjust checkout fields and SSR caching.
* [Newsletter](/docs/hooks/newsletter) - Subscribe/unsubscribe events.
### Usage Example
```php
add_filter('woonoow_email_default_subject', function($subject, $recipient, $event) {
if ($event === 'subscription_renewal') {
return 'Your subscription is renewing soon!';
}
return $subject;
}, 10, 3);
```

9
contents/docs/hooks/meta.json Normal file
View File

@@ -0,0 +1,9 @@
{
"pages": [
"index",
"notifications",
"subscriptions",
"frontend",
"newsletter"
]
}

21
contents/docs/hooks/newsletter/index.mdx Normal file
View File

@@ -0,0 +1,21 @@
---
title: Newsletter Hooks
description: Hooks related to the Newsletter module
---
## Actions
### woonoow_newsletter_subscribed
Triggered when a user subscribes to the newsletter.
**Parameters:**
* `$email` (string): The subscriber's email address.
* `$user_id` (int|null): The user ID if logged in, or null.
### woonoow_newsletter_unsubscribed
Triggered when a user unsubscribes from the newsletter.
**Parameters:**
* `$email` (string): The subscriber's email address.

108
contents/docs/hooks/notifications/index.mdx Normal file
View File

@@ -0,0 +1,108 @@
---
title: Notifications Hooks
description: Hooks related to email and push notifications
date: 2024-01-31
---
## Filters
### woonoow_email_default_templates
Modify the list of available email templates.
**Parameters:**
* `$templates` (array): Associative array of template paths.
### woonoow_email_default_subject
Customize the default subject line for emails.
**Parameters:**
* `$subject` (string): The default subject.
* `$recipient` (string): The recipient type (e.g., 'customer', 'admin').
* `$event` (string): The event triggering the email.
### woonoow_notification_channels
Register or modify available notification channels.
**Parameters:**
* `$channels` (array): list of channels.
### woonoow_email_variables
Add custom variables to be replaced in email templates.
**Parameters:**
* `$variables` (array): Key-value pairs of variables.
* `$event_id` (string): The current event ID.
* `$data` (array): Function context data.
### woonoow_email_template
Override the resolved template path for an email.
**Parameters:**
* `$template_path` (string): Absolute path to the template file.
---
## Actions
### woonoow_email_sent
Triggered after an email is successfully sent.
**Parameters:**
* `$event_id` (string): The event ID.
* `$recipient_type` (string): Type of recipient.
* `$email` (string): The email address it was sent to.
### woonoow_send_push_notification
Triggered when the system determines a push notification should be sent.
**Parameters:**
* `$event_id` (string): The event ID.
* `$recipient` (object): The recipient user object.
* `$data` (array): Payload data.
* `$recipient_type` (string): Type of recipient.
* `$email` (string): The email address it was sent to.
### woonoow_send_push_notification
Triggered to send a push notification.
**Parameters:**
* `$event_id` (string): The event key.
* `$recipient` (WP_User): The recipient user object.
* `$data` (array): Notification payload data.
### woonoow_notification_events_registry
Filter to register custom notification events.
**Parameters:**
* `$events` (array): The array of registered events.
**Example:**
```php
add_filter('woonoow_notification_events_registry', function($events) {
$events['my_custom_event'] = [
'title' => 'My Custom Event',
'description' => 'Triggered when something happens',
'recipient' => 'customer',
];
return $events;
});
```
### woonoow_notification_event_updated
Triggered when a notification event's settings are updated via API.
**Parameters:**
* `$event_id` (string): The event key.
* `$channel_id` (string): The channel (email/push).
* `$enabled` (bool): New status.
* `$recipient` (string): Recipient type.

26
contents/docs/hooks/subscriptions/index.mdx Normal file
View File

@@ -0,0 +1,26 @@
---
title: Subscription Hooks
description: Hooks for customizing subscription flows and payments
date: 2024-01-31
---
## Filters
### woonoow_pre_process_subscription_payment
Intercept the subscription payment process before it begins.
**Parameters:**
* `$result` (null|mixed): Return non-null to short-circuit the process.
* `$subscription` (WC_Subscription): The subscription object.
* `$order` (WC_Order): The renewal order.
### woonoow_process_subscription_payment
Modify or handle the payment processing via a custom gateway logic.
**Parameters:**
* `$result` (null|bool): The result of the payment.
* `$gateway` (object): The payment gateway instance.
* `$order` (WC_Order): The order being paid.
* `$subscription` (WC_Subscription): The subscription object.

5
contents/docs/licensing/meta.json Normal file
View File

@@ -0,0 +1,5 @@
{
"pages": [
"oauth-flow"
]
}

114
contents/docs/licensing/oauth-flow/index.mdx Normal file
View File

@@ -0,0 +1,114 @@
---
title: OAuth Activation Flow
description: Implementation guide for secure user-verified license activation
date: 2024-01-31
---
## Overview
The Secure OAuth Activation flow ensures that licenses are only activated by their legitimate owners. Unlike simple API activation, this method requires the user to log in to the WooNooW portal and explicitly authorize the activation request.
### When to use OAuth?
* ✅ When you want strict control over license usage
* ✅ To prevent license key sharing (key + auth required)
* ✅ If specific user consent is legally required
---
## Authentication Flow
The flow involves three parties:
1. **Client Application**: The software requesting activation (e.g., a customer's WordPress site)
2. **Vendor Portal**: The WooNooW dashboard where the user manages licenses
3. **Vendor API**: The backend handling the activation logic
<Stepper>
<StepperItem title="Step 1: Client Requests Activation">
The client sends a request to the activation API with `activation_mode: "oauth"`.
```bash
POST /woonoow/v1/licenses/activate
{
"license_key": "XXXX-YYYY-ZZZZ-WWWW",
"domain": "https://client-site.com",
"activation_mode": "oauth"
}
```
</StepperItem>
<StepperItem title="Step 2: API Request Authorization">
The API responds with `oauth_required: true` and a redirect URL.
```json
{
"oauth_required": true,
"oauth_redirect": "https://woonoow.com/my-account/license-connect/...",
"state": "abc12345"
}
```
</StepperItem>
<StepperItem title="Step 3: User Authorizes Request">
The client redirects the user to the `oauth_redirect` URL. The user logs in and sees a confirmation screen:
> **Authorize this Request?**
> Site: https://client-site.com
> License: XXXX-YYYY-ZZZZ-WWWW
Once confirmed, the vendor generates a temporary **activation token**.
</StepperItem>
<StepperItem title="Step 4: Token Exchange">
The user is redirected back to the client site with the token. The client exchanges this token for the final activation.
```bash
POST /woonoow/v1/licenses/activate
{
"activation_token": "temporary-token-123"
}
```
</StepperItem>
</Stepper>
---
## Implementation Guide
### 1. Handling the Redirect
When your application receives the `oauth_redirect` response, you must open this URL in the user's browser.
<Note type="note" title="Security Check">
Always verify the `state` parameter when the user returns to your application to prevent CSRF attacks.
</Note>
### 2. Processing the Callback
Your application needs a callback route (e.g., `/admin.php?page=my-plugin&action=callback`). This URL must be provided in the initial `return_url` parameter.
The callback will receive:
* `activation_token`: The token needed to complete activation
* `license_key`: The license key being activated
* `nonce`: Random standard nonce for verification
### 3. Completing Activation
Once you have the `activation_token`, compare the `state` (if you stored it) and make the final request.
```javascript
const response = await fetch('https://api.woonoow.com/woonoow/v1/licenses/activate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
license_key: licenseKey,
activation_token: urlParams.get('activation_token')
})
});
const data = await response.json();
if (data.success) {
console.log('License Activated!', data);
}
```

9
contents/docs/meta.json Normal file
View File

@@ -0,0 +1,9 @@
{
"pages": [
"getting-started",
"licensing",
"hooks",
"api-reference",
"changelog"
]
}

114
contents/docs/resources/faq/index.mdx Normal file
View File

@@ -0,0 +1,114 @@
---
title: Frequently Asked Questions
description: Quick answers to common questions about WooNooW
date: 2024-01-31
---
## General
### What is WooNooW?
WooNooW is a WooCommerce plugin that transforms your store into a modern Single Page Application (SPA). It provides instant page loads, a beautiful UI, and seamless shopping experience.
### Do I need WooCommerce?
Yes. WooNooW is an enhancement layer for WooCommerce. You need WooCommerce installed and activated.
### Will WooNooW affect my existing products?
No. WooNooW reads from WooCommerce. Your products, orders, and settings remain untouched.
---
## SPA Mode
### What's the difference between Full and Disabled mode?
| Mode | Behavior |
|------|----------|
| **Full** | All WooCommerce pages redirect to SPA. Modern, fast experience. |
| **Disabled** | WooCommerce pages use native templates. WooNooW admin still works. |
### Can I switch modes anytime?
Yes. Go to **WooNooW → Appearance → General** and change the SPA Mode. Changes take effect immediately.
### Which mode should I use?
- **Full**: For the best customer experience with instant loads
- **Disabled**: If you have theme customizations you want to keep
---
## Compatibility
### Does WooNooW work with my theme?
WooNooW's SPA is independent of your WordPress theme. In Full mode, the SPA uses its own styling. Your theme affects the rest of your site normally.
### Does WooNooW work with page builders?
The SPA pages are self-contained. Page builders work on other pages of your site.
### Which payment gateways are supported?
WooNooW supports all WooCommerce-compatible payment gateways:
- PayPal
- Stripe
- Bank Transfer (BACS)
- Cash on Delivery
- And more...
---
## SEO
### Is WooNooW SEO-friendly?
Yes. WooNooW uses:
- Clean URLs (`/store/product/product-name`)
- Dynamic meta tags for social sharing
- Proper redirects (302) from WooCommerce URLs
### What about my existing SEO?
WooCommerce URLs remain the indexed source. WooNooW redirects users to the SPA but preserves SEO value.
### Will my product pages be indexed?
Yes. Search engines index the WooCommerce URLs. When users click from search results, they're redirected to the fast SPA experience.
---
## Performance
### Is WooNooW faster than regular WooCommerce?
Yes, for navigation. After the initial load, page transitions are instant because the SPA doesn't reload the entire page.
### Will WooNooW slow down my site?
The initial load is similar to regular WooCommerce. Subsequent navigation is much faster.
### Does WooNooW work with caching?
Yes. Use page caching and object caching for best results.
---
## Customization
### Can I customize colors and fonts?
Yes. Go to **WooNooW → Appearance** to customize:
- Primary, secondary, and accent colors
- Body and heading fonts
- Logo and layout options
### Can I add custom CSS?
Currently, use your theme's Additional CSS feature. A custom CSS field may be added in future versions.
### Can I modify the SPA templates?
The SPA is built with React. Advanced customizations require development knowledge.

175
contents/docs/resources/troubleshooting/index.mdx Normal file
View File

@@ -0,0 +1,175 @@
---
title: Troubleshooting
description: Common issues and their solutions
date: 2024-01-31
---
## Blank Pages
### Symptom
WooCommerce pages (shop, cart, checkout) show blank content.
### Solutions
**1. Check SPA Mode Setting**
- Go to **WooNooW → Appearance → General**
- Ensure **SPA Mode** is set to "Full"
- If you want native WooCommerce, set to "Disabled"
**2. Flush Permalinks**
- Go to **Settings → Permalinks**
- Click **Save Changes** (no changes needed)
- This refreshes rewrite rules
**3. Clear Cache**
If using a caching plugin:
- Clear page cache
- Clear object cache
- Purge CDN cache (if applicable)
---
## 404 Errors on SPA Routes
### Symptom
Visiting `/store/shop` or `/store/product/...` shows a 404 error.
### Solutions
**1. Flush Permalinks**
- Go to **Settings → Permalinks**
- Click **Save Changes**
**2. Check Store Page Exists**
- Go to **Pages**
- Verify "Store" page exists and is published
- The page should contain `[woonoow_spa]` shortcode
**3. Check SPA Page Setting**
- Go to **WooNooW → Appearance → General**
- Ensure **SPA Page** is set to the Store page
---
## Product Images Not Loading
### Symptom
Products show placeholder images instead of actual images.
### Solutions
**1. Regenerate Thumbnails**
- Install "Regenerate Thumbnails" plugin
- Run regeneration for all images
**2. Check Image URLs**
- Ensure images have valid URLs
- Check for mixed content (HTTP vs HTTPS)
---
## Slow Performance
### Symptom
SPA feels slow or laggy.
### Solutions
**1. Enable Caching**
- Install a caching plugin (WP Super Cache, W3 Total Cache)
- Enable object caching (Redis/Memcached)
**2. Optimize Images**
- Use WebP format
- Compress images before upload
- Use lazy loading
**3. Check Server Resources**
- Upgrade hosting if on shared hosting
- Consider VPS or managed WordPress hosting
---
## Checkout Not Working
### Symptom
Checkout page won't load or payment fails.
### Solutions
**1. Check Payment Gateway**
- Go to **WooCommerce → Settings → Payments**
- Verify payment method is enabled
- Check API credentials
**2. Check SSL Certificate**
- Checkout requires HTTPS
- Verify SSL is properly installed
**3. Check for JavaScript Errors**
- Open browser Developer Tools (F12)
- Check Console for errors
- Look for blocked scripts
---
## Emails Not Sending
### Symptom
Order confirmation emails not being received.
### Solutions
**1. Check Email Settings**
- Go to **WooNooW → Settings → Notifications**
- Verify email types are enabled
**2. Check WordPress Email**
- Test with a plugin like "Check & Log Email"
- Consider using SMTP plugin (WP Mail SMTP)
**3. Check Spam Folder**
- Emails may be in recipient's spam folder
- Add sender to whitelist
---
## Plugin Conflicts
### Symptom
WooNooW doesn't work after installing another plugin.
### Steps to Diagnose
1. **Deactivate other plugins** one by one
2. **Switch to default theme** (Twenty Twenty-Three)
3. **Check error logs** in `wp-content/debug.log`
### Common Conflicting Plugins
- Other WooCommerce template overrides
- Page builder plugins (sometimes)
- Heavy caching plugins (misconfigured)
---
## Getting More Help
If you can't resolve the issue:
1. **Collect Information**
- WordPress version
- WooCommerce version
- WooNooW version
- PHP version
- Error messages (from debug.log)
2. **Enable Debug Mode**
Add to `wp-config.php`:
```php
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
```
3. **Contact Support**
Provide the collected information for faster resolution.