multi language

[ghena]

Hi guys,

I like very much orchid, but how extend it with field model translation easily ?

There are some package to do this work ?
Regards.

[upsmod]

+1

[engelys]

@ghena try looking at this astronomical/Laravel-translatable, quite nice and simple, translations can be stored in DB table or files, I used it with tabs, looks good =)

[mahdi-above]

Can you please write a guide on this?

[macit-emre]

i use spatie/laravel-translatable and spatie/laravel-sluggable in one of my projects with orchid.
https://github.com/spatie/laravel-translatable (for translation) and https://github.com/spatie/laravel-sluggable (for sluggable things for public routes)

• simply make a Language/Locale table and model

Schema::create('languages', function (Blueprint $table) {
            $table->id();
            $table->string('code');
            $table->string('name');
            $table->boolean('main_language')->default(0);
            $table->boolean('is_rtl')->default(false);
            $table->boolean('status')->default(1);
            $table->timestamps();
        });

• insert your languages from migration or some new screen etc. simply from migration :

\App\Models\Language::forceCreate([
            'code' => 'tr',
            'name' => 'Türkçe',
            'status' => 1,
            'main_language' => true,
        ]);
        \App\Models\Language::forceCreate([
            'code' => 'en',
            'name' => 'English',
            'status' => 1,
        ]);
        \App\Models\Language::forceCreate([
            'code' => 'fr',
            'name' => 'French',
            'status' => 1,
        ]);

• Model file can be like this :

<?php
namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Orchid\Filters\Filterable;
use Orchid\Screen\AsSource;

class Language extends Model
{
    use HasFactory;
    use AsSource, Filterable;

    public function getRouteKeyName()
    {
        return 'code';
    }

    private static $activeLanguages = null;
    private static ?string $mainLanguageCode = null;
    private static ?Language $mainLanguage = null;
    public static function getActiveLanguages(){
        if (!isset(self::$activeLanguages)){
            self::$activeLanguages = self::where('status', 1)->orderBy('id')->get();
        }
        foreach (self::$activeLanguages as $language){
            if ($language->main_language){
                self::$mainLanguageCode = $language->code;
                self::$mainLanguage = $language;
            }
        }
        return self::$activeLanguages;
    }

    public static function getMainLanguageCode(){
        if (!self::$activeLanguages){
            self::getActiveLanguages();
        }
        return self::$mainLanguageCode;
    }

    /**
     * @return Language|null
     */
    public static function getMainLanguage(): ?Language
    {
        if (!self::$activeLanguages){
            self::getActiveLanguages();
        }
        return self::$mainLanguage;
    }

    public static function getActiveLanguageCount(): int
    {
        return count(self::getActiveLanguages());
    }
}

• define which model is translatable by using traits :

class Post extends Model
{
    use HasFactory;
    use Filterable, AsSource, Attachable;
    use HasTranslations, HasTranslatableSlug; // <- this is the translatable thing

//define which fields will be translatable (in migration, these fields must be type json)
    public array $translatable = [
        'slug',
        'title',
        'content',
        'hero_url',
        'meta_title',
        'meta_description',
        'meta_keywords',
        'short_description',
    ];
....

• In screen (here it is PostEditScreen)

<?php

namespace App\Orchid\Screens;

use App\Models\Group;
use App\Models\Language;
use App\Models\Post;
use App\Orchid\Fields\CustomTinyMCE;
use Illuminate\Http\Request;
use Orchid\Screen\Actions\Button;
use Orchid\Screen\Fields\Code;
use Orchid\Screen\Fields\Cropper;
use Orchid\Screen\Fields\Input;
use Orchid\Screen\Fields\Matrix;
use Orchid\Screen\Fields\Switcher;
use Orchid\Screen\Fields\TextArea;
use Orchid\Screen\Fields\Upload;
use Orchid\Screen\Screen;
use Orchid\Support\Color;
use Orchid\Support\Facades\Layout;
use Orchid\Support\Facades\Toast;

class PostEditScreen extends Screen
{
    public $post;

    /**
     * Query data.
     *
     * @return array
     */
    public function query(Request $request, Post $post): iterable
    {

        return [
            'post' => $post,
        ];
    }

    public function name(): ?string
    {
        return $this->post->exists ? 'Edit Post' : 'Add Post';
    }

    /**
     * Button commands.
     *
     * @return \Orchid\Screen\Action[]
     */
    public function commandBar(): iterable
    {
        $buttons = [];

        $buttons[] = Button::make($this->post->exists ? 'Update' : 'Create')->icon('check')->method('save')->type(Color::SUCCESS());

        return $buttons;
    }

    /**
     * Views.
     *
     * @return \Orchid\Screen\Layout[]|string[]
     */
    public function layout(): iterable
    {
        //non-translatable fields starts here
        $fields1 = [];

        $fields1[] = Input::make('post.sort_order')
            ->type('number')
            ->step(1)
            ->title('Sıra No')
            ->canSee($this->group->type === 'media');

        $fields1[] = Input::make('post.video_url')
            ->title('Youtube link ')
            ->minlength(3)
            ->help('Ör: https://www.youtube.com/watch?v=<b style="color: #fc0000;">blabla</b>');
        //non-translatable fields ends here
        $layouts = [];
        $tabs = [];

        //Translatable fields starts inputs here.
        $languages = Language::getActiveLanguages();
        foreach ($languages as $language) {
            $fields = [];
            $field = Input::make('post.title.'.$language->code)
                ->title('Title '.$language->code)
                ->placeholder('Title  '.$language->code)
                ->minlength(5);

            if ($this->post->exists){
                $field->value($this->post->getTranslation('title',$language->code));
            }
            $fields[] = $field;

            $field = Input::make('post.slug.'.$language->code)
                ->title('Slug'.$language->code)
                ->pattern('[a-z0-9\-]*')
                ->placeholder('Slug '.$language->code)
                ->minlength(3);

            if ($this->post->exists){
                $field->value($this->post->getTranslation('slug',$language->code));
            }
            $fields[] = $field;

            $field = Code::make('post.short_description.' . $language->code)
                ->title('Short Desc ' . $language->code)
                ->language('html')
                ->height('100px')
                ->lineNumbers(false);
            if ($this->post->exists) {
                $field->value($this->post->getTranslation('short_description', $language->code));
            }
            $fields[] = $field;

            $tabs['<b>'.$language->name . '('.$language->code.')</b>'] = Layout::rows($fields);
        }
        $layouts[] = Layout::block([Layout::tabs($tabs)])->vertical()->title('Translatable Fields');;
        $layouts[] = Layout::block([Layout::rows($fields1)])->vertical()->title('Non Translatable Fields');;
        return $layouts;
    }

    public function save(Request $request){
       //do some save func here.
    }
}

and the output will look like :

upper partition is translatable (with tab interface) and down partition is non-translatable as you see.

• if you need further assistance, please write.