Pagebuilder in a specific controller about laravel-pagebuilder HOT 23 CLOSED

Hi, I would suggest you in the pagebuilder.php config file to set use_login, use_website_manager and use_router to false. Now the default PHPageBuilder login area and the frontend routes are disabled. Next you will need to implement your own controller actions for launching the pagebuilder and for serving all created pages. I am planning to make this easier and integrate it into the Laravel-Pagebuilder project, but at the moment this is what I used in another project:

To manage pages

Create a basic table view that shows pages that are stored in a pagebuilder__pages table in your database. Add basic functionality to create/edit/delete a page and a button for each page to launch the pagebuilder.

To launch the pagebuilder

routes\web.php

Route::any('/admin/pages/{id}/build', 'App\Http\Controllers\PageBuilderController@build')->name('pagebuilder.build');
Route::any('/admin/pages/build', 'App\Http\Controllers\PageBuilderController@build');

config\pagebuilder.php

'pagebuilder' => [
	'class' => PHPageBuilder\Modules\GrapesJS\PageBuilder::class,
	'url' => '/admin/pages/build',      // the route you created for your pagebuilder controller
	'actions' => [
		'back' => '/admin/pages'    // URL to a table overview of all pages
	]
],

App\Providers\AppServiceProvider.php boot method

// register singleton phppagebuilder (this ensures all phpb_ helpers have the right config without first manually creating a pagebuilder instance)
$this->app->singleton('phpPageBuilder', function($app) {
    return new PHPageBuilder(config('pagebuilder'));
});
$this->app->make('phpPageBuilder');

resources\views\pagebuilder\scripts.blade.php

<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    });

    window.customConfig = {
        assetManager: {
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        }
    };
</script>

App\Http\Controllers\PageBuilderController.php

/**
 * Edit the given page with the page builder.
 *
 * @param int|null $pageId
 * @throws Throwable
 */
public function build($pageId = null)
{
    $route = $_GET['route'] ?? null;
    $action = $_GET['action'] ?? null;
    $pageId = is_numeric($pageId) ? $pageId : ($_GET['page'] ?? null);
    $pageRepository = new \PHPageBuilder\Repositories\PageRepository;
    $page = $pageRepository->findWithId($pageId);

    $phpPageBuilder = app()->make('phpPageBuilder');
    $pageBuilder = $phpPageBuilder->getPageBuilder();

    $customScripts = view("pagebuilder.scripts")->render();
    $pageBuilder->customScripts('head', $customScripts);

    $pageBuilder->handleRequest($route, $action, $page);
}

To publicly serve all pages

routes\web.php

Add this at the bottom of your routes file

Route::any('{uri}', [
    'uses' => 'App\Http\Controllers\WebsiteController@uri',
    'as' => 'page',
])->where('uri', '.*');

App\Http\Controllers\WebsiteController.php

/**
 * Show the website page that corresponds with the current URI.
 */
public function uri()
{
    $pageBuilder = app()->make('phpPageBuilder');
    $pageBuilder->handlePublicRequest();
}

from laravel-pagebuilder.

Hello there, thank you very much for your help
i've setup all page for index/create/delete my pages
i've setup the "edit" button that call your build function but i got always this error

Error
"Argument 3 passed to PHPageBuilder\Modules\GrapesJS\PageBuilder::handleRequest() must implement interface PHPageBuilder\Contracts\PageContract or be null, instance of App\PageBuilder given, called in C:\xampp\htdocs\crmhotel\app\Http\Controllers\PageBuilderController.php on line 166 "

This my function build
` /**
* Edit the given page with the page builder.
*
* @param int|null $pageId
* @throws Throwable
* @throws \Throwable
*/
public function build($pageId = null)
{
$pageId = is_numeric($pageId) ? $pageId : ($_GET['page'] ?? null);
$page = PageBuilder::find($pageId);
$route = $_GET['route'] ?? null;
$action = $_GET['action'] ?? null;

    $phpPageBuilder = app()->make('phpPageBuilder');
    $pageBuilder = $phpPageBuilder->getPageBuilder();

    $customScripts = view("pagebuilder.scripts")->render();
    $pageBuilder->customScripts('head', $customScripts);

    $pageBuilder->handleRequest($route, $action, $page);
}

`
the variable $page call the method PageBuilder, it's correct? where i'm doing wrong?

This is my model
class PageBuilder extends Model { protected $table = "pagebuilder_pages"; protected $fillable = ['name', 'layout', 'data']; }

from laravel-pagebuilder.

$pageBuilder->handleRequest($route, $action, $page); expects the $page argument to implement the PHPageBuilder\Contracts\PageContract to ensure all methods that the pagebuilder will call are present on the Page instance. So it should not be your created eloquent model, but a PHPageBuilder\Page instance (with the same id as your eloquent model instance would have). In the code I gave I did not explain where my $page came from, so I will update that in a minute to make my snippet complete. It should be:

$pageRepository = new \PHPageBuilder\Repositories\PageRepository;
$page = $pageRepository->findWithId($pageId);

from laravel-pagebuilder.

Ok perfetct!
i add this function to my controller

public function page($pageId = null) { $pageRepository = new \PHPageBuilder\Repositories\PageRepository; $page = $pageRepository->findWithId($pageId); return $page; }

now if i call the url "/pagebuilder/1/build" (1 is id of my page), i got the loader, but it keeps spinning forever

another question:
when i create a new page, i add a row in db in table pagebuilder_pages with name and data, what i have to pass to "layout"? (using demo theme)
i have to add a row in pagebuilder_page_translations with page id, locale, title and route?
thank you again

from laravel-pagebuilder.

A layout is a default html structure in which all your page blocks will be loaded. The layouts are stored in the themes\[theme-name]\layouts folder. I added a default "master" layout which just includes the default html structure with all style and script tags. But you could also create for example a "header-footer" layout which also includes a header and footer by default to any of your pages that have this layout. So the layout field of a page should be the name of the folder in which you store your layout's view.php file.

You indeed need to also have a record in the pagebuilder__page_translations table, with the page id, the locale (probably en) and the route (which is the URL you access that page on in that language). Hopefully that will solve the spinner issue.

from laravel-pagebuilder.

now miss the assets
i got an error in console log for "/assets/pagebuilder/page-injections.js:1"
with "Uncaught ReferenceError: $ is not defined" at Object.15 and Object.16

if i try to open "/assets/pagebuilder/grapesjs-touch.min.js.map"
i got "Asset not found"

from laravel-pagebuilder.

I know that error and have fixed it in the PHPageBuilder project. For now can you try a different browser than Chrome or do an extra page reload if the error occurs? I will soon create a new release.

from laravel-pagebuilder.

the error of asset not found disappear, thank you

but got alway this
page-injection.js:1
Uncaught ReferenceError: $ is not defined
at Object.16 (page-injection.js:1)
at e (page-injection.js:1)
at Object.15 (page-injection.js:1)
at e (page-injection.js:1)
at page-injection.js:1
at page-injection.js:1
and loading pagebuilder never stopped

from laravel-pagebuilder.

I just made a v0.10.1 release. Could try a composer update and see if the latest PHPageBuilder solves the issue.

from laravel-pagebuilder.

yep! now works!
thank you very much for your help

from laravel-pagebuilder.

Great! You're welcome

from laravel-pagebuilder.

this is not a issue, but a request

there is a way to include a plugin of grapejs?
for example if i want to include the plugin: gjs-preset-webpage
how i can do? i have to create all blocks?

from laravel-pagebuilder.

The way grapesjs-blocks-basic as part of gjs-preset-webpage is created it takes a very long time to create custom blocks (it is fully JS instead of just a piece of html in a file) and it is next to impossible to easily augment it with dynamic functionality (PHP that adds additional values and html structure), so therefore PHPageBuilder works completely different without any user supplied JS. Imagine you would be writing this for each of your blocks. It takes a lot of effort to build it and to learn how the syntax works. As this project has a heavily customized version of GrapesJS, unfortunately we cannot use the basic blocks of GrapesJS.

However, in this project each block has just a simple .html or a .php file and that's it. Creating blocks is now just a matter of tearing an awesome HTML5 theme apart into small snipets (i.e. blocks) and you're done.

That being said, I can imagine that is still not always pleasant to do this for each new website so I am planning to create a default theme based on bootstrap that has blocks for each bootstrap component.

from laravel-pagebuilder.

That being said, I can imagine that is still not always pleasant to do this for each new website so I am planning to create a default theme based on bootstrap that has blocks for each bootstrap component.

that would be really cool! if I can help you let me know
I'll start by creating theme that i need and then I'll show you if you want
thank you very much again for your help

from laravel-pagebuilder.

Awesome! It would be cool to have some example material somewhere, for others to quickly get started. The bootstrap theme is getting there, as well as better documentation, but at the moment I was still busy improving the system and build it while directly using it for some projects.

For reference, this is what I recently quickly build: https://www.gambiabirdingtours.com using PHPageBuilder and the boilerplate (not even Laravel), based on this theme. It was really just cutting up the template, create the pages with the desired blocks, add texts, improve styling and done. I was thinking about sharing the code, but it uses a paid template so I guess I just have to do a bootstrap version in the near future.

What I can share already, is an example of the theme structure I used:

from laravel-pagebuilder.

where i can edit the icon of blocks?

and there is a way to create another group like "General"?
thank you

from laravel-pagebuilder.

I use a cronjob to automatically take screenshots of the rendered blocks once a block has changed: https://github.com/HansSchouten/PHPageBuilder-Laravel-Screenshots. Each file contains the segment that should be added into your own project and you should run composer require spatie/browsershot.

To assign a block to another group, create a config.php in the folder of your block and add the following:

<?php
return [
    'category' => 'Group name',
];

from laravel-pagebuilder.

i'm still tring to create some block, but some block created with view.html can't be edited in page builder
for example if i create a block "link" with insile view.html only the some text this have setting and can be edited in pagebuilder
but if i create a block input with label, the label can't be edit in pagebuilder

could you say why this? thank you

from laravel-pagebuilder.

That is correct, at the moment I did not create a sidebar settings for the input placeholder attributes, but I did create settings for a Link. So that explains this behaviour, this will be further extended.

Or do you mean an actual <label></label> is not text editable?

from laravel-pagebuilder.

i create a block like this
<div class="form-group"><label for="text">Label input</label><input type="text" class="form-control" id="text" name="text" placeholder="Placeholder" /></div>

and the text "label input" is not editable

if i put text on a p tag is editable

from laravel-pagebuilder.

Ah ok, that is an obvious bug, I will make it editable in the next release. About the placeholder I was already aware that it still had to be implemented.

from laravel-pagebuilder.

When I click the "View" button, a blank page opens. Please help

.

from laravel-pagebuilder.

Hi,

I have updated the grapesjs version from 0.15.9 provided in the package to 0.17.27 by updating the import of CDN in the package due to the unavailability of many events in older grapesjs version. After updating the version I am getting error in the app.js file which is in the public/assets/pagebuilder folder, the same file which is in the dist folder of phpagebuilder package. The error is "Uncaught TypeError: Cannot read properties of null (reading 'attributes')". It occurs in other basic functionalities like changing button text or uploading image. The component is removed so accessing its attribute property is giving the error.
Is there any way to generate this app.js file for the latest version of grapesjs or any other proper way to update grapesjs version? Your feedback in this regard will be highly appreciated.

from laravel-pagebuilder.