PHPackages webbycrown/customization-for-bagisto - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. webbycrown/customization-for-bagisto ActiveLibrary[Utility & Helpers](/categories/utility) webbycrown/customization-for-bagisto ==================================== Dynamic page customization system for Bagisto - Create and manage page sections, fields, and content from the backend with API support 1.0.1(6mo ago)54255[2 PRs](https://github.com/webbycrown/customization-for-bagisto/pulls)MITPHPPHP ^8.1|^8.2 Since Nov 14Pushed 6mo ago1 watchersCompare [ Source](https://github.com/webbycrown/customization-for-bagisto)[ Packagist](https://packagist.org/packages/webbycrown/customization-for-bagisto)[ RSS](/packages/webbycrown-customization-for-bagisto/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (2)Dependencies (1)Versions (3)Used By (0) WebbyCrown Customization for Bagisto ==================================== [](#webbycrown-customization-for-bagisto) 1. Introduction: ---------------- [](#1-introduction) "Customization for Bagisto" is a powerful page builder extension that enables you to create and manage dynamic page sections with flexible content management directly from the backend. This plugin allows complete control over your frontend appearance from the admin panel and includes a RESTful API for seamless frontend deployment. Build custom pages, manage sections, and deploy changes dynamically without touching code. ### Key Features: [](#key-features) - 🎨 **Dynamic Page Builder** - Create custom pages with flexible section management - πŸ“ **8 Field Types** - Text, Select, Textarea, File Upload, Product, Category, Blog, Repeater - πŸ”„ **Repeater Fields** - Add multiple instances of content blocks - 🎯 **Section-Based Architecture** - Organize content in reusable sections - πŸ”Œ **RESTful API** - Deploy frontend content dynamically via API - πŸ“€ **File Upload with Optimization** - Auto-convert images to WebP format - πŸ›οΈ **E-commerce Integration** - Product and Category selectors - πŸ“± **Blog Support** - Integrate with blog extensions - βš™οΈ **Backend Configuration** - Complete admin panel interface - πŸ” **Field Validation** - Required fields and data validation - πŸ—‚οΈ **Multiple Selection** - Support for multi-select fields - 🌐 **API-Driven Frontend** - Fetch content dynamically for SPAs and headless setups 2. Requirements: ---------------- [](#2-requirements) - **PHP**: 8.1 or 8.2 - **Bagisto**: v2.0.\* or higher - **Composer**: 1.6.5 or higher - **Laravel**: 10.x or 11.x - **Intervention Image**: ^2.7 (PHP 8.1) or ^3.0 (PHP 8.2) - **Intervention ImageCache**: Optional (not required) 3. Installation: ---------------- [](#3-installation) ### Step 1: Install the Package [](#step-1-install-the-package) ``` composer require webbycrown/customization-for-bagisto ``` > **Note:** This package now supports both PHP 8.1 and PHP 8.2 ### Step 2: Clear Cache [](#step-2-clear-cache) ``` composer dump-autoload php artisan optimize:clear ``` ### Step 3: Run Database Migrations [](#step-3-run-database-migrations) ``` php artisan migrate --path=vendor/webbycrown/customization-for-bagisto/src/Database/Migrations ``` ### Step 4: Create Storage Link [](#step-4-create-storage-link) ``` php artisan storage:link ``` ### Step 5: Publish Assets (Optional) [](#step-5-publish-assets-optional) ``` php artisan vendor:publish --all ``` 4. Configuration: ----------------- [](#4-configuration) ### Admin Panel Access [](#admin-panel-access) Navigate to: **Admin Panel β†’ Customization** The admin panel provides four main sections: 1. **Pages** - Manage custom pages 2. **Sections** - Create reusable sections for pages 3. **Settings** - Configure section fields and options 4. **Content** - Add actual content to sections ### Database Tables [](#database-tables) The package creates four tables: TableDescription`customization_pages`Stores page definitions`customization_sections`Stores section definitions`customization_settings`Stores field configurations`customization_details`Stores actual content data5. Usage Guide: --------------- [](#5-usage-guide) ### 5.1 Creating a Page [](#51-creating-a-page) 1. Go to **Admin β†’ Customization β†’ Pages** 2. Click **Add New Page** 3. Enter **Page Title** (e.g., "Homepage") 4. Enter **Page Slug** (e.g., "homepage") 5. Click **Save** ### 5.2 Creating a Section [](#52-creating-a-section) 1. Navigate to your page (e.g., "Homepage") 2. Click **Add New Section** 3. Enter **Section Title** (e.g., "Hero Banner") 4. Enter **Section Slug** (e.g., "hero-banner") 5. Click **Save** ### 5.3 Adding Fields to a Section [](#53-adding-fields-to-a-section) Navigate to: **Page β†’ Section β†’ Settings** #### Available Field Types: [](#available-field-types) Field TypeDescriptionUse Case**Text Box**Single line text inputTitles, headings, short text**Text Area**Multi-line text inputDescriptions, paragraphs**Select Field**Dropdown selectionOptions, choices**File**File upload (images converted to WebP)Images, documents**Product**Product selector from catalogFeatured products**Category**Category selectorProduct categories**Category Product**Products from specific categoryCategory showcases**Blog**Blog post selector (requires blog extension)Featured articles**Repeater**Repeatable field groupsTestimonials, features, slides#### Field Configuration Options: [](#field-configuration-options) - **Title** - Display label for the field - **Field Name** - Unique identifier (key) for the field - **Field Type** - Select from 8 available types - **Required** - Make field mandatory - **Multiple** - Allow multiple selections (for select, product, category, file) - **Status** - Enable/disable the field - **Options** - Define dropdown options (for select fields) ### 5.4 Adding Content [](#54-adding-content) 1. Navigate to: **Page β†’ Section** 2. Fill in the field values 3. Upload files (automatically optimized to WebP for images) 4. Select products/categories as needed 5. Click **Save** ### 5.5 Using Repeater Fields [](#55-using-repeater-fields) Repeater fields allow you to create multiple instances of a content block: 1. Add a **Repeater** field to your section 2. Define sub-fields within the repeater 3. In content section, click **Add Row** to create multiple instances 4. Each row can have different content 5. Drag to reorder rows **Example Use Case:** Testimonials section with multiple customer reviews ``` Repeater: testimonials β”œβ”€ Text: customer_name β”œβ”€ Text Area: review_text β”œβ”€ File: customer_photo └─ Text: rating ``` 6. API Documentation: --------------------- [](#6-api-documentation) ### 6.1 Get Customization Details [](#61-get-customization-details) Retrieve page content dynamically via API. **Endpoint:** `POST /api/v1/customization_details` **Headers:** ``` Content-Type: application/json Accept: application/json ``` ### 6.2 API Parameters: [](#62-api-parameters) ParameterTypeRequiredDescription`page_slug`stringβœ… YesPage slug (e.g., "homepage")`section_slug`string❌ NoSpecific section slug`field_key`string❌ NoSpecific field key### 6.3 API Usage Examples: [](#63-api-usage-examples) #### Example 1: Get Full Page Content [](#example-1-get-full-page-content) **Request:** ``` POST /api/v1/customization_details { "page_slug": "homepage" } ``` **Response:** ``` { "success": true, "data": { "page": { "title": "Homepage", "slug": "homepage" }, "sections": { "hero-banner": { "title": "Hero Banner", "fields": { "heading": "Welcome to Our Store", "subheading": "Best products at best prices", "banner_image": "https://cdn.example.com/banner.webp", "cta_text": "Shop Now" } }, "featured-products": { "title": "Featured Products", "fields": { "products": [1, 5, 8, 12] } } } } } ``` #### Example 2: Get Specific Section [](#example-2-get-specific-section) **Request:** ``` POST /api/v1/customization_details { "page_slug": "homepage", "section_slug": "hero-banner" } ``` **Response:** ``` { "success": true, "data": { "section": { "title": "Hero Banner", "slug": "hero-banner", "fields": { "heading": "Welcome to Our Store", "subheading": "Best products at best prices", "banner_image": "https://cdn.example.com/banner.webp" } } } } ``` #### Example 3: Get Specific Field [](#example-3-get-specific-field) **Request:** ``` POST /api/v1/customization_details { "page_slug": "homepage", "section_slug": "hero-banner", "field_key": "heading" } ``` **Response:** ``` { "success": true, "data": { "field_value": "Welcome to Our Store" } } ``` ### 6.4 API Validations: [](#64-api-validations) ValidationRule`page_slug`Always required`section_slug`Required when using `field_key`Invalid slugsReturns 404 error7. Field Types in Detail: ------------------------- [](#7-field-types-in-detail) ### 7.1 Text Box Field [](#71-text-box-field) - Single line text input - Use for: Titles, headings, button text, URLs **Example Configuration:** ``` Title: Hero Heading Field Name: hero_heading Type: Text Box Required: Yes ``` ### 7.2 Text Area Field [](#72-text-area-field) - Multi-line text input - Use for: Descriptions, paragraphs, long content **Example Configuration:** ``` Title: About Us Description Field Name: about_description Type: Text Area Required: Yes ``` ### 7.3 Select Field [](#73-select-field) - Dropdown selection - Supports multiple selection - Define custom options **Example Configuration:** ``` Title: Layout Style Field Name: layout_style Type: Select Options: Grid, List, Carousel Multiple: No ``` ### 7.4 File Upload Field [](#74-file-upload-field) - Supports images and documents - Images automatically converted to WebP - Supports multiple file uploads - Integrates with S3 (if configured) **Example Configuration:** ``` Title: Banner Image Field Name: banner_image Type: File Multiple: No Required: Yes ``` **Supported Formats:** - Images: JPG, PNG, GIF, WebP (auto-converted) - Documents: PDF, DOC, DOCX, etc. ### 7.5 Product Field [](#75-product-field) - Select products from your catalog - Supports multiple selection - Returns product IDs **Example Configuration:** ``` Title: Featured Products Field Name: featured_products Type: Product Multiple: Yes Required: No ``` ### 7.6 Category Field [](#76-category-field) - Select categories from your store - Supports multiple selection - Returns category IDs **Example Configuration:** ``` Title: Featured Categories Field Name: featured_categories Type: Category Multiple: Yes ``` ### 7.7 Category Product Field [](#77-category-product-field) - Select products from a specific category - Useful for category-specific showcases **Example Configuration:** ``` Title: Electronics Products Field Name: electronics_showcase Type: Category Product Multiple: Yes ``` ### 7.8 Blog Field [](#78-blog-field) - Select blog posts (requires blog extension) - Supports multiple selection - Returns blog post IDs **Requirements:** - Blog extension must be installed - Example: `webbycrown/blog-bagisto` **Example Configuration:** ``` Title: Featured Articles Field Name: featured_articles Type: Blog Multiple: Yes ``` ### 7.9 Repeater Field [](#79-repeater-field) - Create repeatable content blocks - Define sub-fields within repeater - Drag and drop to reorder **Example Use Cases:** - Testimonials with customer name, photo, review - Feature lists with icon, title, description - Team members with photo, name, position - FAQ sections with question and answer **Example Configuration:** ``` Title: Customer Testimonials Field Name: testimonials Type: Repeater Sub-fields: - customer_name (Text) - customer_photo (File) - review_text (Textarea) - rating (Select: 1-5 stars) ``` 8. Image Optimization: ---------------------- [](#8-image-optimization) ### Automatic WebP Conversion [](#automatic-webp-conversion) The package automatically converts uploaded images to WebP format for better performance: - **Original Format:** JPG, PNG, GIF - **Output Format:** WebP - **Benefits:** 25-35% smaller file size - **Quality:** Maintained during conversion ### How It Works: [](#how-it-works) ``` // Automatic process when uploading images if (isImage($file)) { $manager = new ImageManager(); $image = $manager->make($file)->encode('webp'); Storage::put($path, $image); } ``` ### S3 Integration: [](#s3-integration) If you have the S3 extension installed, images are automatically uploaded to your S3 bucket. 9. Advanced Usage: ------------------ [](#9-advanced-usage) ### 9.1 Building a Homepage [](#91-building-a-homepage) **Step-by-Step Example:** 1. **Create Page:** "Homepage" (slug: `homepage`) 2. **Create Sections:** - Hero Banner (slug: `hero-banner`) - Featured Products (slug: `featured-products`) - About Section (slug: `about-section`) - Testimonials (slug: `testimonials`) 3. **Configure Hero Banner Fields:** - `heading` (Text) - "Welcome to Our Store" - `subheading` (Textarea) - Store description - `background_image` (File) - Hero image - `cta_text` (Text) - "Shop Now" - `cta_link` (Text) - "/shop" 4. **Configure Featured Products:** - `title` (Text) - "Featured Products" - `products` (Product, Multiple) - Select 8 products 5. **Configure Testimonials (Repeater):** - Repeater field: `testimonials` - Sub-fields: - `customer_name` (Text) - `customer_photo` (File) - `review` (Textarea) - `rating` (Select: 1-5) 6. **Fetch via API:** ``` fetch('/api/v1/customization_details', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ page_slug: 'homepage' }) }) .then(response => response.json()) .then(data => { // Render your homepage with the data console.log(data); }); ``` ### 9.2 Frontend Integration [](#92-frontend-integration) #### React/Vue Example: [](#reactvue-example) ``` import { useState, useEffect } from 'react'; function Homepage() { const [pageData, setPageData] = useState(null); useEffect(() => { fetch('/api/v1/customization_details', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ page_slug: 'homepage' }) }) .then(res => res.json()) .then(data => setPageData(data.sections)); }, []); if (!pageData) return Loading...; return ( {pageData['hero-banner'].fields.heading} {pageData['hero-banner'].fields.subheading} {pageData.testimonials.fields.testimonials.map((item, index) => ( {item.customer_name} {item.review} Rating: {item.rating}/5 ))} ); } ``` 10. PHP 8.2 Compatibility: -------------------------- [](#10-php-82-compatibility) ### Updated Dependencies [](#updated-dependencies) This package has been updated to support PHP 8.2 with the following changes: **Before (PHP 8.1 only):** ``` { "php": "^8.1", "intervention/image": "^2.4", "intervention/imagecache": "^2.5.2" } ``` **After (PHP 8.1 & 8.2):** ``` { "php": "^8.1|^8.2", "intervention/image": "^2.7|^3.0", "intervention/imagecache": "^2.6" } ``` ### Intervention Image Versions: [](#intervention-image-versions) - **PHP 8.1:** Uses Intervention Image v2.7+ - **PHP 8.2:** Uses Intervention Image v3.0+ (recommended) ### No Code Changes Required: [](#no-code-changes-required) The package code is compatible with both versions. Composer will automatically install the correct version based on your PHP version. 11. Troubleshooting: -------------------- [](#11-troubleshooting) **Issue: PHP 8.2 errors with intervention/image** - **Solution:** Update to package v1.0.0 which supports PHP 8.2 - **Command:** `composer require webbycrown/customization-for-bagisto` **Issue: Images not uploading** - Check storage permissions: `php artisan storage:link` - Verify upload\_max\_filesize in php.ini - Check intervention/image is installed **Issue: API returns 404** - Verify page\_slug and section\_slug are correct - Check if content exists in admin panel - Ensure migrations are run **Issue: Repeater fields not saving** - Check JavaScript console for errors - Verify all sub-fields are properly configured - Clear cache: `php artisan optimize:clear` **Issue: Blog field not showing** - Install blog extension first - Verify blog table exists in database - Check blog extension service provider is loaded **Issue: S3 upload fails** - Verify S3 extension is installed - Check AWS credentials are configured - Test S3 connection separately **Issue: WebP conversion fails** - Ensure GD or Imagick PHP extension is installed - Check intervention/image version compatibility - Verify image file is valid 12. FAQ: -------- [](#12-faq) **Q: Can I use this without the API?** A: Yes, you can query the database directly using the models, but the API is recommended for frontend integration. **Q: Does it work with headless/SPA setups?** A: Yes! The RESTful API makes it perfect for React, Vue, Angular, or any frontend framework. **Q: Can I create multiple pages?** A: Yes, create unlimited pages, each with unlimited sections. **Q: Is there a limit on repeater rows?** A: No technical limit, but consider performance with very large datasets. **Q: Can I reuse sections across pages?** A: Sections are page-specific, but you can duplicate section configurations. **Q: Does it support multi-language?** A: Currently single language, multi-language support planned for future releases. **Q: Can I export/import page configurations?** A: Not built-in yet, but you can export database tables manually. **Q: Is it compatible with custom themes?** A: Yes, it's theme-agnostic. Integrate via API in any theme. 13. Support: ------------ [](#13-support) - πŸ› [Report Issues](https://github.com/webbycrown/customization-for-bagisto/issues) - πŸ“§ Email: - 🌐 Website: [webbycrown.com](https://webbycrown.com) 14. Changelog: -------------- [](#14-changelog) ### v1.0.1 - 2025-11-14 [](#v101---2025-11-14) #### πŸ› Bug Fixes [](#-bug-fixes) - πŸ”§ **Fixed critical validation error** in `CustomizationController@store` method - βœ… Changed `field_details` validation from `array` to `nullable|array` - βœ… Added `repeater_data` validation rule to support repeater fields - πŸ”„ Fixed repeater fields not appearing/saving properly - πŸš€ Sections with only repeater fields now work correctly #### πŸ”§ Dependency Fix [](#-dependency-fix) - πŸ”§ **Fixed Laravel 11 compatibility** - Removed `intervention/imagecache` from required dependencies - βœ… Made `intervention/imagecache` optional (moved to suggest section) - πŸ’ͺ Works with both Laravel 10 and 11 --- ### v1.0.0 - 2025-11-14 [](#v100---2025-11-14) #### ✨ Initial Stable Release [](#-initial-stable-release) - πŸŽ‰ Initial release of **Customization for Bagisto** - 🎨 Dynamic page builder with section-based architecture - πŸ“ 8 flexible field types (Text, Select, Textarea, File, Product, Category, Blog, Repeater) - πŸ”„ Repeater fields for creating multiple content instances - πŸ”Œ RESTful API for frontend content deployment - πŸ“€ Automatic WebP image conversion for optimization - πŸ›οΈ E-commerce integration with product and category selectors - πŸ“± Blog post selector (with blog extension) - βš™οΈ Complete admin panel interface for content management - πŸ—‚οΈ Multi-select support for products, categories, and files - πŸ“Š Four database tables for organized data storage - πŸ” Field validation and required field support #### πŸ› Bug Fixes [](#-bug-fixes-1) - πŸ”§ **PHP 8.2 Compatibility** - Updated intervention/image to support both PHP 8.1 and 8.2 - πŸ“¦ Updated intervention/image from ^2.4 to ^2.7|^3.0 - πŸ“¦ Updated intervention/imagecache from ^2.5.2 to ^2.6 - βœ… Added PHP ^8.1|^8.2 support in composer.json #### πŸ“š Documentation [](#-documentation) - πŸ“– Comprehensive README with 14 sections - πŸ”§ Complete installation guide - πŸ’‘ Detailed usage guide for all field types - πŸ”Œ Complete API documentation with examples - πŸ’» Frontend integration examples (React/Vue) - ❓ FAQ section (8 questions) - πŸ› οΈ Troubleshooting guide - πŸ“Š Field type reference with use cases - 🎯 Advanced usage examples (homepage builder) - πŸ”„ Repeater field detailed documentation #### πŸ”„ Package [](#-package) - πŸ“¦ Stable package version for production use - ✨ Simple installation: `composer require webbycrown/customization-for-bagisto` - 🏷️ Properly tagged and versioned for Packagist - πŸ”‘ SEO-optimized with relevant keywords - πŸ“¦ Published to Packagist: [webbycrown/customization-for-bagisto](https://packagist.org/packages/webbycrown/customization-for-bagisto) - πŸ™ Open source on GitHub: [webbycrown/customization-for-bagisto](https://github.com/webbycrown/customization-for-bagisto) --- **Made with ❀️ by [WebbyCrown](https://webbycrown.com)** ### Health Score 39 β€” LowBetter than 86% of packages Maintenance68 Regular maintenance activity Popularity20 Limited adoption so far Community12 Small or concentrated contributor base Maturity48 Maturing project, gaining track record Bus Factor1 Top contributor holds 66.7% of commits β€” single point of failure How is this calculated?**Maintenance (25%)** β€” Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** β€” Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** β€” Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** β€” Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 2 Last Release 186d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/4be8c491dee65372c701ca519d413336b1d7fc62148a413eb329b087226123c8?d=identicon)[webbycrown](/maintainers/webbycrown) --- Top Contributors [![mayurdhandhukiya](https://avatars.githubusercontent.com/u/162802768?v=4)](https://github.com/mayurdhandhukiya "mayurdhandhukiya (8 commits)")[![rohit-ghoghari](https://avatars.githubusercontent.com/u/50444614?v=4)](https://github.com/rohit-ghoghari "rohit-ghoghari (4 commits)") --- Tags laravelcmse-commercecustomizationbagistopage builderwebbycrown ### Embed Badge ![Health badge](/badges/webbycrown-customization-for-bagisto/health.svg) ``` [![Health](https://phpackages.com/badges/webbycrown-customization-for-bagisto/health.svg)](https://phpackages.com/packages/webbycrown-customization-for-bagisto) ``` PHPackages Β© 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)