Git Product home page Git Product logo

Comments (16)

HansSchouten avatar HansSchouten commented on May 30, 2024 1

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.

from laravel-pagebuilder.

HansSchouten avatar HansSchouten commented on May 30, 2024 1

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: #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.

from laravel-pagebuilder.

HansSchouten avatar HansSchouten commented on May 30, 2024

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.

from laravel-pagebuilder.

Dontorpedo avatar Dontorpedo commented on May 30, 2024

@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

from laravel-pagebuilder.

HansSchouten avatar HansSchouten commented on May 30, 2024

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.

from laravel-pagebuilder.

Dontorpedo avatar Dontorpedo commented on May 30, 2024

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 ?

from laravel-pagebuilder.

HansSchouten avatar HansSchouten commented on May 30, 2024

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.

from laravel-pagebuilder.

Dontorpedo avatar Dontorpedo commented on May 30, 2024

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?

from laravel-pagebuilder.

HansSchouten avatar HansSchouten commented on May 30, 2024

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: HansSchouten/PHPageBuilder#38 (comment)

from laravel-pagebuilder.

Dontorpedo avatar Dontorpedo commented on May 30, 2024

Wohoo, thank you so much!

from laravel-pagebuilder.

Dontorpedo avatar Dontorpedo commented on May 30, 2024

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?

from laravel-pagebuilder.

HansSchouten avatar HansSchouten commented on May 30, 2024

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?

from laravel-pagebuilder.

Dontorpedo avatar Dontorpedo commented on May 30, 2024

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

from laravel-pagebuilder.

HansSchouten avatar HansSchouten commented on May 30, 2024

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.

from laravel-pagebuilder.

Dontorpedo avatar Dontorpedo commented on May 30, 2024

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..

from laravel-pagebuilder.

ismaelfi avatar ismaelfi commented on May 30, 2024

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.

from laravel-pagebuilder.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.