FOB Product Size Guide

A professional product size guide plugin for Botble CMS that displays size charts with images and customizable tables on product pages. Perfect for clothing, footwear, and any products requiring size measurements.

Requirements

Botble core 7.5.0 or higher.
PHP 8.2 or higher.
Ecommerce plugin activated.

Installation

Install via Admin Panel

Go to the Admin Panel and click on the Plugins tab. Click on the "Add new" button, find the FOB Product Size Guide plugin and click on the "Install" button.

Install manually

Download the plugin from the Botble Marketplace.
Extract the downloaded file and upload the extracted folder to the platform/plugins directory.
Go to Admin > Plugins and click on the Activate button.

Features

Flexible Table Builder: Custom jQuery-based table builder with add/remove rows and columns
Image Support: Upload size guide diagrams/images alongside tables
Multiple Assignment Methods: Assign size guides to products, categories, or brands
Priority System: Product-level > Category > Brand assignment hierarchy
Bootstrap 5 Compatible: Works seamlessly with all Botble Bootstrap 5 themes
Tabler UI Admin: Beautiful admin interface matching Botble's design
Responsive Display: Mobile-friendly tables and modals
Conditional Display: Show inline or in popup based on table size
Multi-language: Full translation support
Theme Independent: Works with all Botble themes

Screenshots

Usage

Creating Size Guides

Go to Admin > Product Size Guides > Size Guides
Click Create button
Fill in the details:
- Name: e.g., "Shoe Size Guide", "Men's Shirt Sizes"
- Description: Optional description for internal reference
- Image: Upload size guide diagram (optional)
- Table Builder:
  - Click "Add Column" to add table headers (Size, Measurement, etc.)
  - Click "Add Row" to add size data
  - Use delete buttons to remove rows/columns
- Status: Published/Draft
- Order: Display priority (lower numbers first)
Click Save

Table Builder

The custom table builder allows you to create flexible size charts:

Add Column: Define table headers (e.g., "Size", "Foot Length", "EU Size", "US Size")
Add Row: Add data for each size
Delete: Remove any row or column
Flexible: No limit on rows or columns

Example table structure:

| Size | Foot Length | EU Size |
|------|-------------|---------|
| 35   | 22cm        | 35      |
| 36   | 22.5cm      | 36      |
| 37   | 23cm        | 37      |

Assigning Size Guides

Method 1: Direct Product Assignment

Edit any product
Scroll to Product Size Guide metabox
Select a size guide from the dropdown
Save the product

Method 2: Category Assignment

Go to Products > Categories
Edit a category
Scroll to Product Size Guide metabox
Select a size guide from the dropdown
All products in this category will inherit the size guide

Method 3: Brand Assignment

Go to Products > Brands
Edit a brand
Scroll to Product Size Guide metabox
Select a size guide from the dropdown
All products from this brand will inherit the size guide

Assignment Priority

If multiple size guides are assigned, the plugin uses this priority:

Product-level (highest priority)
Category-level
Brand-level (lowest priority)

Global Settings

Navigate to Admin > Product Size Guides > Settings to configure:

Display Settings

Display Mode: Choose how size guide appears
- Inline: Shows directly on product page (best for short tables)
- Popup: Opens in Bootstrap modal (best for long tables)
- Conditional: Auto-decide based on table row count
Row Threshold: For conditional mode, tables with more than X rows open in popup
Button Text: Customize the "Size Guide" link/button text
Modal Title: Customize popup title

Appearance

Show Image: Display size guide image above table
Table Styling: Choose Bootstrap table classes

Frontend Display

The size guide appears on product detail pages after the product attributes section (size/color selectors).

Inline Mode: Table displays directly on the page Popup Mode: "Size Guide" link opens Bootstrap 5 modal Conditional Mode: Auto-switches based on table length

Development

Building Assets

The plugin uses webpack to compile SCSS and JavaScript files.

# Development build
npm run dev

# Production build
npm run prod

# Watch for changes
npm run watch

# Build specific plugin
npm run dev -- --mix-config=platform/plugins/fob-product-size-guide/webpack.mix.js

Asset Structure

platform/plugins/fob-product-size-guide/
├── webpack.mix.js           # Webpack configuration
├── resources/
│   ├── sass/
│   │   ├── size-guide-admin.scss      # Admin styles (Tabler UI)
│   │   └── size-guide-frontend.scss   # Frontend styles (Bootstrap 5)
│   └── js/
│       ├── size-guide-admin.js        # Table builder JavaScript
│       └── size-guide-frontend.js     # Frontend modal/display
└── public/                  # Compiled assets (production)
    ├── css/
    │   ├── size-guide-admin.css
    │   └── size-guide-frontend.css
    └── js/
        ├── size-guide-admin.js
        └── size-guide-frontend.js

Database Tables