Documentation
LaraBuild - An option builder / page builder package for laravel
Thank you so much for purchasing our item from codecanyon.
- Version: 1.2
- Author: Amento Tech
- Created: 16 Dec, 2022
- Update: 24 Feb, 2023
If you have any questions that are beyond the scope of this help file, Please feel free to email via Item Support Page.
Installation
Follow the steps below to setup your LaraBuild Optionbuilder package:
- Unzip the downloaded package and copy the larabuild directory to packages directory at the root of your website using FTP or localhost in order to use it on your website.
- After uploading you need to execute the following commands in the website root directory through
CLI
- Execute this –
composer config repositories.optionbuilder '{"type": "path", "url": "packages/larabuild/optionbuilder", "options":{"symlink": false}}' --file composer.json - Execute this –
composer require larabuild/optionbuilder - Execute this –
php artisan vendor:publish --provider="Larabuild\Optionbuilder\ServiceProvider" --tag=config - Execute this –
php artisan vendor:publish --provider="Larabuild\Optionbuilder\ServiceProvider" --tag=routes - Execute this –
php artisan vendor:publish --provider="Larabuild\Optionbuilder\ServiceProvider" --tag=assets --force - Execute this –
php artisan vendor:publish --provider="Larabuild\Optionbuilder\ServiceProvider" --tag=demosettings
- Execute this –
- You need to set the optionbuilder configurations in config/optinubilder.php file (e-g; default layout, database prefix, url prefix etc).
-
After configurations, you need to execute this command in CLI
- Execute this –
php artisan migrate
- Execute this –
- After that you need to add optionbuilder routes in your main route file.
-
Add this line to your route file
require __DIR__.'/optionbuilder.php'; - After that, you can add optionbuilder route
route('optionbuilder')to your menu also. or you can access Optionbuilder by hitting the URLyour-domain.com/option-builder
Follow the steps below to setup your LaraBuild Pagebuilder package:
- Execute the following commands in the website root directory through CLI
- Execute this –
composer config repositories.pageubilder '{"type": "path", "url": "packages/larabuild/pagebuilder", "options":{"symlink": false}}' --file composer.json - Execute this –
composer require larabuild/pagebuilder - Execute this –
php artisan vendor:publish --provider="Larabuild\Pagebuilder\ServiceProvider" --tag=config - Execute this –
php artisan vendor:publish --provider="Larabuild\Pagebuilder\ServiceProvider" --tag=routes - Execute this –
php artisan vendor:publish --provider="Larabuild\Pagebuilder\ServiceProvider" --tag=assets --force - Execute this –
php artisan vendor:publish --provider="Larabuild\Pagebuilder\ServiceProvider" --tag=demos
- Execute this –
- You need to set the pagebuilder configurations in config/pagebuilder.php file (e-g; default layout, database prefix, url prefix etc).
-
After configurations you need to execute the command in CLI
- Execute this –
php artisan migrate
- Execute this –
- After that you need to add optionbuilder routes in your main route file.
-
Add this line in your route file
require __DIR__.'/pagebuilder.php'; - After that, you can add optionbuilder route
route('pagebuilder')to your menu also. or you can access Pagebuilder by hitting the URLyour-domain.com/pages
LaraBuild Optionbuilder setup
After the installation you can use LaraBuild Optionbuilder, you have demo files in the directory
app/Optionbuilder.
If you want to create new option settings then you need to create a new php file in the
app/Optionbuilder directory and add the configuration of fields as mentioned in the demo
files.
LaraBuild Pagebuilder setup
After the installation you can use LaraBuild Pagebuilder, you have demo blocks in resources/views/pagebuilder directory.
Block Settings
You can add new blocks, edit existing blocks, add dynamic content, and add CSS and javascript to the blocks.
Add/Edit block
If you want to create a new block, you need to create a new directory inside resources/views/pagebuilder directory. Create two files, settings.php and view.blade.php to this newly created directory. Add the configurations to settings.php file as mentioned in the demo blocks.
- settings.php file contains the field types that will be used in view.blade.php
- view.blade.php file contains the blade template of the block. Each field created in settings.php can
be fetched using
pagesetting('field_id');function inside view.blade.php
settings.php file example
return [
'id' => 'faqs',
'name' => __('FAQs'),
'icon' => '<i class="icon-book"></i>',
'tab' => "Faqs",
'fields' => [
[
'id' => 'heading',
'type' => 'text',
'value' => 'Frequently Asked Questions',
'class' => '',
'label_title' => __('Heading'),
'placeholder' => __('Heading'),
],
[
'id' => 'faq_data',
'type' => 'repeater',
'label_title' => __('FAQs'),
'repeater_title' => __('FAQ'),
'multi' => true,
'fields' =>
[
[
'id' => 'question',
'type' => 'text',
'value' => 'How can I test new items I add to the design system before making them?',
'class' => '',
'label_title' => __('Question'),
'placeholder' => __('Question'),
],
[
'id' => 'answer',
'type' => 'editor',
'class' => '',
'value' => 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
'label_title' => __('Answer'),
],
],
]
]
];
view.blade.php file example
...
<div class="tmp-faq">
<h2>{{ pagesetting('heading') }}</h2>
<div class="tmp-faqsection">
@if (!empty(pagesetting('faq_data')))
@foreach (pagesetting('faq_data') as $faq)
<div class="tmp-faqwrap">
<div class="tmp-faqtitlle">
<h6>{{ $faq['question'] }}</h6>
<img src="{{ asset('demo/images/chevron-right.svg') }}" alt="">
</div>
<div class="tmp-faqcontent">
<p>{!! $faq['answer'] !!}</p>
</div>
</div>
@endforeach
@endif
</div>
</div>
@pushonce('page-js')
<script>
const accordion = document.querySelectorAll(".tmp-faqwrap");
for(let i=0;i<accordion.length;i++){
accordion[i].addEventListener('click',function(){
let isActive = this.classList.contains('active');
for(let j=0;j<accordion.length;j++){
accordion[j].classList.remove('active');
}
if(isActive){
this.classList.remove('active');
} else{
this.classList.add('active');
}
})
};
</script>
@endpushonce
...
Add dynamic content to blocks
Sometimes you might need to add some dynamic content fetched from the database, e-g; a users list or
countries list or a search component with a search feature. For such dynamic content, you can crate a Laravel Component, and then add
that component to view.blade.php file like <x-users />
Note: For this feature to use, your Laravel version should support components. Laravel supports components from Laravel 7.
Dynamic content example
...
<div class="col-xl-7">
<div class="tu-banner_title">
{!! pagesetting('h1') !!}
<p>{{ pagesetting('content') }}</p>
<x-users />
</div>
</div>
...
Add styles to blocks
You can push styles to blocks like this
@pushonce('page-css')
<style>
//your css classes here
</style>
<link rel="stylesheet" href="">
@endpushonce
Add Javascript to blocks
You can push javascript to blocks like this
@pushonce('page-js')
<script src=""></script>
<script>
//your javascript code here
</script>
@endpushonce
Field types used in both Optionbuiler and Pagebuilder
We have a bunch of field types and you can define the arrays for each file type.
Text field
return [
'section' => [
'id' => 'ob_textbox',
'label' => __('Textbox'),
'icon' => '',
],
'fields' => [
[
'id' => 'textbox',
'type' => 'text',
'value' => '',
'class' => '',
'label_title' => __('Textbox field'),
'label_desc' => __('This is the label description you can use here'),
'field_desc' => __('This is the field description you can use here'),
'placeholder' => __('Textbox placeholder'),
'hint' => [
'content' => __('Hint content about this field!'),
],
]
]
];
Number field
return [
'section' => [
'id' => 'ob_number',
'label' => __('number'),
'icon' => '',
],
'fields' => [
[
'id' => 'number',
'type' => 'number',
'value' => '',
'class' => '',
'label_title' => __('Number field'),
'label_desc' => __('This is the label description you can use here'),
'field_desc' => __('This is the field description you can use here'),
'placeholder' => __('Default number placeholder'),
],
]
];
Password field
return [
'section' => [
'id' => 'ob_password',
'label' => __('textbox'),
'icon' => '',
],
'fields' => [
[
'id' => 'password',
'type' => 'password',
'value' => '',
'class' => '',
'label_title' => __('Password'),
'label_desc' => __('This is the label desc you can use here'),
'placeholder' => __('*****'),
],
]
];
Textarea field
return [
'section' => [
'id' => 'ob_textarea',
'label' => __('textarea'),
'icon' => '',
],
'fields' => [
[
'id' => 'textarea',
'type' => 'textarea',
'class' => '',
'value' => '',
'label_title' => __('Textarea field'),
'label_desc' => __('This is the label description you can use here'),
'field_desc' => __('This is the field description you can use here'),
]
]
];
Texteditor field
return [
'section' => [
'id' => 'tab_editor',
'label' => __('text editor'),
'icon' => '',
],
'fields' => [
[
'id' => 'texteditor',
'type' => 'editor',
'class' => '',
'label_title' => __('Text editor'),
'label_desc' => __('This is the label description you can use here'),
'field_desc' => __('This is the editor description text you can use here'),
],
]
];
Radio field
return [
'section' => [
'id' => 'ob_radio',
'label' => __('radio'),
'icon' => '',
],
'fields' => [
[
'id' => 'gender',
'type' => 'radio',
'class' => '',
'label_title' => __('Radio button field'),
'label_desc' => __('This is the label description you can use here'),
'field_desc' => __('This is the field description you can use here'),
'options' => [
'male' => __('Male'),
'femle' => __('Female'),
],
'default' => 'male',
],
]
];
Switch field
return [
'section' => [
'id' => 'ob_switch',
'label' => __('switch'),
'icon' => '',
],
'fields' => [
[
'id' => 'switch',
'type' => 'switch',
'class' => '',
'label_title' => __('Single switch field'),
'label_desc' => __('This is the label description you can use here'),
'field_title' => __('Single switch title'),
'field_desc' => __('This is the field description you can use here'),
'value' => '1',
],
[ // multiple switch fields
'id' => 'multiswitch',
'type' => 'switch',
'class' => '',
'label_title' => __('Multiple switch field'),
'label_desc' => __('This is the label description you can use here'),
'field_desc' => __('This is the field description you can use here'),
'options' => [
'1' => __('Switch opt 1'),
'2' => __('Switch opt 2'),
'3' => __('Switch opt 3'),
'4' => __('Switch opt 4'),
'5' => __('Switch opt 5'),
'6' => __('Switch opt 6'),
],
'default' => [2,6,4],
],
]
];
Checkbox field
return [
'section' => [
'id' => 'ob_checkbox',
'label' => __('checkbox'),
'icon' => '',
],
'fields' => [
[
'id' => 'checkbox',
'type' => 'checkbox',
'class' => '',
'label_title' => __('Single checkbox field'),
'label_desc' => __('This is the label description you can use here'),
'field_desc' => __('This is the field description you can use here'),
'field_title' => __('Checkbox single'),
'value' => '1',
],
[ // multiple checkbox fields
'id' => 'multicheckbox_id',
'type' => 'checkbox',
'class' => '',
'label_title' => __('Multiple checkbox field'),
'label_desc' => __('This is the label description you can use here'),
'options' => [
'1' => __('Option 1'),
'2' => __('Option 2'),
'3' => __('Option 3'),
'4' => __('Option 4'),
'5' => __('Option 5'),
'6' => __('Option 6'),
],
'default' => [1,6],
]
]
];
Select field
return [
'section' => [
'id' => 'ob_select',
'label' => __('select'),
'icon' => '',
],
'fields' => [
[
'id' => 'select',
'type' => 'select',
'class' => '',
'label_title' => __('Single select field'),
'label_desc' => __('This is the label description you can use here'),
'field_desc' => __('This is the field description you can use here'),
'options' => [
'alabama' => 'Alabama',
'wyoming' => 'Wyoming',
'choice' => 'Choice',
'usa' => 'USA',
'france' => 'France',
'japan' => 'Japan',
'itly' => 'Itly',
'uae' => 'UAE',
'uk' => 'United kindom',
'germany' => 'Germany',
],
'default' => 'uk',
'placeholder' => __('Select from the list'),
],
[ // multiple select
'id' => 'multiselect',
'type' => 'select',
'class' => '',
'multi' => true,
'label_title' => __('Multi Select field'),
'label_desc' => __('This is the label description you can use here'),
'field_desc' => __('This is the field description you can use here'),
'options' => [
'usa' => 'USA',
'france' => 'France',
'japan' => 'Japan',
'itly' => 'Itly',
'uae' => 'UAE',
'alabama' => 'Alabama',
'wyoming' => 'Wyoming',
'choice' => 'Choice',
'uk' => 'United kindom',
'germany' => 'Germany',
],
'default' => ['uk'],
'placeholder' => __('Select from the list'),
]
]
];
File uploader
return [
'section' => [
'id' => 'ob_file',
'label' => __('file uploader'),
'icon' => '',
],
'fields' => [
[
'id' => 'file_uploader',
'type' => 'file',
'class' => '',
'label_title' => __('Single file uploader field'),
'label_desc' => __('This is the file description you can use here'),
'field_desc' => __('This is the file uploader description text you can use here'),
'max_size' => 4, // size in MB
'ext' =>[
'jpg',
'png',
'pdf',
'doc',
'xlsx',
'ppt',
],
],
[ //multi file uploader
'id' => 'multifile_uploader',
'type' => 'file',
'class' => '',
'label_title' => __('Multi file uploader field'),
'label_desc' => __('This is the file description you can use here'),
'field_desc' => __('This is the file uploader description text you can use here'),
'multi' => true,
'max_size' => 4, // size in MB
'ext' =>[
'jpg',
'png',
'pdf',
'doc',
'xlsx',
'ppt',
],
],
]
];
Colorpicker field
return [
'section' => [
'id' => 'ob_colorpicker',
'label' => __('color picker'),
'icon' => '',
],
'fields' => [
[
'id' => 'colorpicker',
'type' => 'colorpicker',
'value' => '',
'class' => '',
'label_title' => __('Color picker field'),
'label_desc' => __('This is the label description you can use here'),
'field_desc' => __('This is the field description text you can use here'),
'placeholder' => __('Add color code or select'),
],
]
];
Date& Daterange picker field
return [
'section' => [
'id' => 'ob_datepicker',
'label' => __('date picker'),
'icon' => '',
],
'fields' => [
[
'id' => 'datepicker',
'type' => 'datepicker',
'value' => '',
'class' => '',
'label_title' => __('Date picker field'),
'label_desc' => __('This is the label description you can use here'),
'field_desc' => __('This is the field description you can use here'),
'placeholder' => __('Select date'),
'format' => 'Y-m-d',
],
[ //date with time picker
'id' => 'datepicker_time',
'type' => 'datepicker',
'value' => '',
'class' => '',
'label_title' => __('Date time field'),
'label_desc' => __('This is the label description you can use here'),
'field_desc' => __('This is the field description you can use here'),
'placeholder' => __('Select date time'),
'format' => 'Y-m-d H:i:s',
'time' =>[
'enable' => true,
'time_24hr' => true,
]
],
[ //daterange picker
'id' => 'date_range',
'type' => 'datepicker',
'value' => '',
'class' => '',
'label_title' => __('Date range picker field'),
'label_desc' => __('This is the label description you can use here'),
'field_desc' => __('This is the field description you can use here'),
'placeholder' => __('Select date range'),
'format' => 'Y-m-d',
'mode' => 'range',
],
[ //specific dates picker
'id' => 'date_specific',
'type' => 'datepicker',
'value' => '',
'class' => '',
'label_title' => __('Specific date picker field'),
'label_desc' => __('This is the label description you can use here'),
'field_desc' => __('This is the field description you can use here'),
'placeholder' => __('Select specific dates'),
'format' => 'Y-m-d',
'mode' => 'multiple',
],
[ //time picker
'id' => 'time',
'type' => 'timepicker',
'value' => '',
'class' => '',
'label_title' => __('Time picker field'),
'label_desc' => __('This is the label description you can use here'),
'field_desc' => __('This is the field description you can use here'),
'placeholder' => __('Select time'),
'time_24hr' => false,
]
]
];
Repeator field
return [
'section' => [
'id' => 'ob_repeator',
'label' => __('repeator'),
'icon' => '',
],
'fields' => [
[ // repeator with single field
'id' => 'single_repeator',
'type' => 'repeater',
'label_title' => __('Single field repeator'),
'label_desc' => __('This is the repeator description you can use here'),
'field' => [
'id' => 'textbox_id',
'type' => 'text',
'value' => '',
'class' => '',
'label_title' => __('Textbox repeator'),
'label_desc' => __('This is the label description you can use here'),
'field_desc' => __('This is the field description you can use here'),
'placeholder' => __('Textbox placeholder'),
]
],
[ // repeator with multiple fields
'id' => 'multi_repeator',
'type' => 'repeater',
'label_title' => __('Multiple fields repeator'),
'label_desc' => __('This is the label description you can use here'),
'repeater_title' => __('Repeater title'),
'multi' => true,
'fields' =>[
[
'id' => 'repeator_textbox_id',
'type' => 'text',
'value' => '',
'class' => '',
'label_title' => __('Textbox in repeator'),
'label_desc' => __('This is the label description you can use here'),
'field_desc' => __('This is the field description you can use here'),
'placeholder' => __('Textbox placeholder'),
],
[
'id' => 'repeator_textarea_id',
'type' => 'textarea',
'class' => '',
'value' => '',
'label_title' => __('Textarea'),
'label_desc' => __('This is the label description you can use here'),
'field_desc' => __('This is the field description you can use here'),
],
[
'id' => 'repeator_file_uploader',
'type' => 'file',
'class' => '',
'label_title' => __('File uploader'),
'label_desc' => __('This is the file description you can use here'),
'field_desc' => __('This is the file uploader description text you can use here'),
'multi' => true,
'max_size' => 4, // size in MB
'ext' =>[
'jpg',
'png',
'pdf',
'doc',
'xlsx',
'ppt',
],
]
],
],
]
];
Range selector
return [
'section' => [
'id' => 'range_selector',
'label' => __('range selector'),
'icon' => '',
],
'fields' => [
[
'id' => 'ranger_selector_id',
'type' => 'range',
'label_title' => __('range selector field'),
'options' =>[
'min' => 1
'max' => 500
'format' => 'number' // by default it shows decimal
]
],
]
];
Info seprator
return [
'section' => [
'id' => 'info_seprator_section',
'label' => __('info seprator'),
'icon' => '',
],
'fields' => [
[
'id' => 'info_seprator_id',
'type' => 'info',
'label_title' => __('Section separator style'),
'label_desc' => __('This is the info seprator description'),
],
]
];
Changelog
See what's new added, changed, fixed, improved or updated in the latest versions.
Version 1.0 (16 Dec, 2022)
Initial Release