Ai Cms Grapesjs Laravel Package

Getting Started

Begin by installing the package via Composer into an existing Aimeos Laravel application: composer require aimeos/ai-cms-grapesjs. After installation, run php artisan vendor:publish --provider="Aimeos\AiCmsGrapesJS\ServiceProvider" to publish configuration and views. In config/aimeos.php, set the CMS client to grapesjs under admin.client.html.cms.standard.client = 'grapesjs'. Then navigate to the Aimeos admin → CMS → Pages — clicking Edit on any page now loads the GrapesJS visual editor instead of the default textarea.

Implementation Patterns

Developers commonly use this integration to build responsive landing pages and product-specific content blocks without writing HTML/CSS. Workflow:

1. In the Aimeos admin, create/edit a CMS page → drag components (text, image, headline, etc.) into layout containers
2. Use inline editing for text, upload images via Aimeos’ media selector, and apply brand-compliant styles (fonts, colors) via preset themes
3. Save and preview in the frontend — changes render immediately via Aimeos’ existing routing and caching
   For advanced use, extend components by registering custom GrapesJS plugins in resources/assets/admin/js/grapesjs/plugins.js, then map them to Aimeos content item types (e.g., Aimeos\AiCms\Content\Banner) using the aimeos.client.html.cms.grapesjs.extend event in AppServiceProvider.

Gotchas and Tips

⚠️ Critical version alignment: Ensure aimeos/aimeos ≥ 2023.10, Laravel ≥ 9, and GrapesJS ≥ 0.18 — mismatches cause silent UI failures.
⚠️ CSS isolation pitfalls: GrapesJS strips external styles by default; mitigate by adding css: ['css/app.css'] to GrapesJS config (via config/aimeos.php → client.admin.html.cms.grapesjs.config) or using css.import: true.
⚠️ Data persistence quirks: Content saves to Aimeos’ mshop_core_item tables as JSON — verify content column is TEXT (not VARCHAR(255)) to avoid truncation.
💡 Tip: Enable APP_DEBUG=true and inspect window.Aimeos.Cms.editor in DevTools to validate GrapesJS instance initialization.
💡 Tip: Override default blocks (e.g., add video embed) by publishing config (vendor:publish --tag=ai-cms-grapesjs-config) and extending components in grapesjs.php.