HansSchouten / Laravel-Pagebuilder

A drag and drop pagebuilder to manage pages in any Laravel project
https://www.phpagebuilder.com
MIT License
783 stars 182 forks source link

multidomain support #50

Closed Dontorpedo closed 3 years ago

Dontorpedo commented 3 years ago

Hi,

i am trying to make it work in a saas app, i use stancl/tenancy for the tenant functionality..

after having same issue in #42

right know i have a white page, on builder.. i cant also to reach the webmanager for testing, but it also doesnt work.. but there is no error in logs.

i am overwriting the general.base_url like this

        config(['pagebuilder.general.base_url' => 'https://'.tenant()->domains[0]->domain]);

the right url is returned but still no luck :( to make it work..

HansSchouten commented 3 years ago

After you change the config you should create a new PHPageBuilder instance with this config loaded. This is because the underyling pagebuilder is core PHP and does not use the Laravel config() helper. See this snippet: https://github.com/HansSchouten/Laravel-Pagebuilder/blob/master/src/ServiceProvider.php#L43

Actually this package is a few lines of code on top of the PHPageBuilder package. So if you'd like to do more advanced things look into the underlying pagebuilder for clues.

Dontorpedo commented 3 years ago

@HansSchouten

thank you, after some trying around i am a step further now, the tenancy package is using separate databases for the tenants, bu right now your package is looking in the central database for the pages, i have made migrations in my tenants databases und would like to use the tenant database connection instead of the central, so the exporting and working would be easier.. is it possible to change the database connection in your package??

thanks again

HansSchouten commented 3 years ago

Yes this is totally possible. If you look in the pagebuilder.php config file you will see the full database credentials. This config array is passed at the point in the code that creates new PHPageBuilder($config);. So you could edit the config array before it is passed to the pagebuilder and modify the database connection according to the current user.

Dontorpedo commented 3 years ago

Thanks, up and working, was easier than i thought it will be :)

last question for now is, i would like to create some themes and let the user choose one,

what would be the best workflow to change a active theme ?

HansSchouten commented 3 years ago

Great! You can add multiple themes in your themes folder. The active theme is set in the config array, so I would suggest to do this similarly to selecting a database. Just before you pass the config to the PHPageBuilder instance change the active theme based on the current user's preferences.

However note that stored pages are probably not compatible with other themes, so you cannot simply switch later on. This is because the html stored in database is not always compatible with other theme styles. You should keep this in mind when designing themes. Or you should keep the blocks of different themes identical and just add some customization styles. But in that case you don't actually need themes. Instead can use different layout files within 1 theme, or you can make some user custimization settings outside the pagebuilder and in your layout file check these values and insert some additional custom styling.

Dontorpedo commented 3 years ago

hmm ok, so i can personally chose between themes and layouts for now, thats ok to me..

in a another issue i saw your solution for dynamic blocks, thats probably also for sliders and contact forms? do blocks have also separate css / js files?

how would you do blocksettings like fullwidth/boxed/customwidth of the block?

HansSchouten commented 3 years ago

Most of the times I am using a single large css file (compiled from multiple SASS files and minified) and my approach for JS is the same. This way your pages load faster than separate non-minified files. By using the right class names in your block html elements this should work fine.

However, if you need style/css that depends on user settings, there is a way to insert scripts for specific blocks. If you create a script.js file in your block folder, this script is runned with a block and blockSelector variable that refers to the block html. If you use the script.js approach ensure this snippet is at the bottom of your layout file: https://github.com/HansSchouten/PHPageBuilder/issues/38#issuecomment-729509291

HansSchouten commented 3 years ago

Yes dynamic blocks are perfect for forms, sliders etc. Please look at this example I just created for forms:

form-container/view.php

<form method="post" action="<?= route('website.submit-form') ?>" class="form">
    <?= csrf_field() ?>

    <?php
    if (Session::has('form-submit-success')):
    ?>
    <p class="alert alert-success">
        <?= $block->setting('success_message') ?>
    </p>
    <?php
    endif;
    ?>

    <div class="controls">
        [block slug="layout-blocks-container"]

        <div class="form-group">
            <button class="btn btn-primary"><?= $block->setting('submit_text') ?></button>
        </div>
    </div>
</form>

form-container/config.php

<?php

return [
    "category" => "Form segments",
    "title" => "Form container",
    "settings" => [
        "success_message" => [
            "type" => "text",
            "label" => "Form sent alert",
            "value" => "Thanks, we will contact you."
        ],
        "submit_text" => [
            "type" => "text",
            "label" => "Button text",
            "value" => "Send",
        ]
    ]
];

layout-blocks-container/view.html

<div phpb-blocks-container></div>

form-input-text/view.php

<?php
$id = Illuminate\Support\Str::random(20);
$name = Illuminate\Support\Str::slug($block->setting('label'));

$errors = Session::get('errors', new Illuminate\Support\MessageBag);
?>
<div class="form-group">
    <label for="<?= $id ?>" class="form-label <?= $block->setting('required') ? 'required' : '' ?>">
        <?= $block->setting('label') ?>
    </label>

    <input type="hidden" name="<?= $name ?>[label]" value="<?= $block->setting('label') ?>">
    <input type="text" name="<?= $name ?>[value]" id="<?= $id ?>" <?= $block->setting('required') ? 'required="required"' : '' ?> class="form-control <?= $errors->has($name) ? 'has-error' : '' ?>" value="<?= e(old($name)['value'] ?? null) ?>">

    <?php
    if ($errors->has($name)):
    ?>
    <span class="help-block">
        <strong><?= e($errors->first($name)) ?></strong>
    </span>
    <?php
    endif;
    ?>
</div>

form-input-text/config.php

<?php

return [
    "category" => "Form segments",
    "title" => "Form input field",
    "settings" => [
        "label" => [
            "type" => "text",
            "label" => "Field label",
            "value" => "Input field",
        ],
        "required" => [
            "type" => "yes_no",
            "label" => "Filling this field is required",
            "value" => "0",
        ]
    ]
];

Now you can add the form-container block in a page and then drag the input field block onto the form. Also you see the settings to configure the form and the input field. Using this approach you can add many more configurable form fields and also create different dynamic blocks.

Dontorpedo commented 3 years ago

Wohoo, thank you so much!

Dontorpedo commented 3 years ago

the amount of blocks is growing very fast XD i didn't find an option to make the category closed first..is there a way to do this?

is it possible to make a "general settings" tab, where settings can be made in context with the page itself?

HansSchouten commented 3 years ago

Haha same here, I am using a premium bootstrap theme which I currently have cut into 107 blocks. Category starting closed would be a nice setting, but not yet possible. What kind of settings would you need?

Dontorpedo commented 3 years ago

some basic responisve settings, max-width of the page, paddings, and if possible custom css/js..

HansSchouten commented 3 years ago

I have a dynamic block for custom JS and another block for custom CSS. I also added some bootstrap blocks to create a grid layout. In such blocks it is possible to create settings to configure stuff like max width if needed. Also max width and padding can be configured from the styling tab in the sidebar. However, you could add page settings in your Laravel backend and then read these settings and handle them accordingly in your layout files.

Dontorpedo commented 3 years ago

ok, yees i thought about it doing it this way.. so i put the Page settings into the backend..

i hope i dont annoy you with my questions..

grapejs has a possibilit to view the page in desktop/tablet/mobile mode.. did you just disable this functionality somewhere or is it comepletly removed?

having that many block, is it possible to add a better structure to the blocks folder ?

like

blocks headers header1 config, view header2 config, view

and so on?

i am trying to make a select field type for the form, and added in the config

"select_options" => [ "type" => "textarea", "label" => "Auswahloptionen", "value" => "pro Zeile eine Option", ],

but textarea is not supported?, i thought i can put one option per line and foreach it in the view.php..

HansSchouten commented 3 years ago

No problem, I disabled this functionality by creating my own UI, but it should be possible to add this back in. I am still thinking about what is a good location in the UI to add this, so if you have an idea please share your thoughts. Please let's continue on that topic here: https://github.com/HansSchouten/Laravel-Pagebuilder/issues/57

Hmm good suggestion about structuring blocks, that is not possible but I will keep it in mind. At the moment I prefix similar blocks to create a better overviw, so: header-full-width and header-...

Textarea is not possible yet, only text. But I will add that one later. Thanks for the suggestion.

ismaelfi commented 3 years ago

Hi,

I'm facing some issues to make it work and running with multi domain. @Dontorpedo Could you please share you experience on this topic ? It would be very useful for the community.