Make BootForms work flawlessly with Laravel Translatable!
By importing this package, generating translatable forms using BootForms is a breeze.
-
Run the Composer require command to install the package, the service provider will be autodiscovered by Laravel.
composer require typicms/laravel-translatable-bootforms
-
In your app config, add the Facade to the
$aliases
array'aliases' => [ ... 'TranslatableBootForm' => TypiCMS\LaravelTranslatableBootForms\Facades\TranslatableBootForm::class, ],
-
Publish the configuration file
php artisan vendor:publish --provider="TypiCMS\LaravelTranslatableBootForms\TranslatableBootFormsServiceProvider" --tag="config"
Simply use the TranslatableBootForm
Facade as if it were BootForm
! That’s it. Multiple form inputs will now be generated for the locales set in Translatable’s configuration file. They will have the corresponding value for each language and will save all of the translations without any code manipulation.
Please review BootForms’ documentation if you’re unsure how to use it.
Example:
// View
{!! BootForm::text('Name', 'name')
->placeholder('My placeholder') !!}
// Output
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" placeholder="My Placeholder">
</div>
// Controller
public function postEdit($request)
{
$someModel->save($request->all());
}
// View
{!! TranslatableBootForm::text('Name', 'name')
->placeholder('My placeholder') !!}
// Output
<div class="form-group form-group-translation">
<label for="name[en]">Name (en)</label>
<input type="text" name="name[en]" class="form-control" placeholder="My Placeholder" data-language="en">
</div>
<div class="form-group form-group-translation">
<label for="name[nl]">Name (nl)</label>
<input type="text" name="name[nl]" class="form-control" placeholder="My Placeholder" data-language="nl">
</div>
// Controller
public function postEdit($request)
{
$someModel->save($request->all());
}
You can use the %name
and %locale
placeholders while specifying parameters. The placeholder will be replaced with the corresponding input name or locale.
This can be useful for two-way data binding libraries such as Angular.js or Vue.js. E.g.
{!! TranslatableBootForm::text('Title', 'title')
->attribute('some-attribute', 'Name: %name')
->attribute('another-attribute', 'Locale: %locale') !!}
// Output
<div class="form-group form-group-translation">
<label for="title[en]">Title (en)</label>
<input type="text" name="title[en]" class="form-control" some-attribute="Name: title[en]" another-attribute="Locale: en" data-language="en">
</div>
<div class="form-group form-group-translation">
<label for="title[nl]">Title (nl)</label>
<input type="text" name="title[nl]" class="form-control" some-attribute="Name: title[nl]" another-attribute="Locale: nl" data-language="nl">
</div>
To render a form element only for some chosen locales, explicitly call renderLocale()
as the final method and pass the locale or an array of locales as the first parameter:
TranslatableBootForm::text('Name', 'name')
->renderLocale('en')
If you need to apply a method only for certain locales, suffix the method with ForLocale
and pass the locale or an array of locales as the first parameter:
TranslatableBootForm::text('Name', 'name')
->dataForLocale('en', 'attributeName', 'attributeValue')
->addClassForLocale(['en', 'nl'], 'addedClass')
For customizing the locale indicator in the label (and several other settings), please take a look at the configuration file.