How to translate custom fields

[AIC-BV]

Hello!

I would like to add fields for SEO like og:title, og:image, ...
I used to place variables on top of my layout, which worked perfectly fine, but I didn't think it was very clean.

Now I'm trying to add custom fields by default on all my staticPages by extending the staticPages plugin.

I managed to do this. In my layout I can use the variable like so: {{ og_title }}.
But I noticed that I can't translate them.

public function boot() {
        // xxxxxxx::extend(function ($model) {
        //     $model->extendClassWith('RainLab\Translate\Behaviors\TranslatableModel');
        //     $model->addDynamicProperty('translatable', ['og_title', 'og_description']);
        // });
         
        Event::listen('backend.form.extendFields', function($widget) {

            // cancel
            if (!$widget->getController() instanceof \RainLab\Pages\Controllers\Index || !$widget->model instanceof \RainLab\Pages\Classes\Page) {
                return;
            }

            // cancel (prevent repeater fields bug)
            if ($widget->isNested) return;

            $widget->addTabFields([
                'viewBag[og_title]' => [
                    'tab' => 'OG (OpenGraph)',
                    'label' => 'og:title',
                    'type' => 'text',
                    'span' => 'left'
                ],
                'viewBag[og_description]' => [
                    'tab' => 'OG (OpenGraph)',
                    'label' => 'og:description',
                    'type' => 'textarea',
                    'span' => 'left',
                    'size' => 'small'
                ],
                'viewBag[og_image]' => [
                    'tab' => 'OG (OpenGraph)',
                    'label' => 'og:image',
                    'type' => 'mediafinder',
                    'span' => 'left'
                ]
            ]);

        });
    }

I have been searching and reading for several hours but I can't find anything that works. I'm a front-end developer so I might've done stuff wrong. Can anyone help me to get RainLab.Translate to work with my code?

Thank you for your time!

[mjauvin]

You need to add the new fields to the translatable property of the model.

See Winter.Translate documentation

[LukeTowers]

@AIC-BV run composer require winter/wn-translate-plugin.

[bennothommo]

@AIC-BV I've added some more info on using Composer for plugin/theme installation to our docs: https://wintercms.com/docs/help/using-composer#installing-plugin-theme

[AIC-BV]

As stated before, I'm a front-end developer and probably did some things wrong,
but I managed to install Winter Translate, Sitemap and Pages using the composer require command you added to the documentation (and Luke shared).

I want to share my steps because perhaps it's a bug in the CMS:

1. I deleted RainLab Translate, RainLab Sitemap and RainLab Pages using the "Manage plugins" in the backend.
2. I ran the composer require commands to install them again (the one shared by you and Luke).
3. The Winter plugins weren't added to the updates & plugins overview in the backend but I could see them in the settings menu.
   I couldn't use them in the settings menu because the database column didn't exist. So I decided to reinstall RainLab Sitemap to copy the database structure using the "Install plugins" in the backend.
   The text showed up "Installing RainLab Sitemap", but it actually installed Sitemap by WinterCMS. I repeated the process for the other two plugins.
4. I had to manually delete the rainlab folder in the plugins folder to make things work (a warning showed up in the plugins overview for sitemap)

[LukeTowers]

After running composer require you need to run artisan winter:up

[AIC-BV]

Ah yes @LukeTowers ! I forgot about that. Thanks!

Back to the matter at hand; I still can't make the translations work..
Code is basically the same as above, only changed the path from RainLab to Winter

[AIC-BV]

Finally found a solution to translate custom, extended backend fields.
I searched and tried everything in the documentation and other peoples posts/threads but I couldn't make it work at all.

After several days I found the solution here: https://octobercms.inetis.ch/advanced-repeaters-static-pages-plugin. Thank you Christophe Vuagniaux!

Below the super simple solution, I hope this will help many people out!
All you have to do is add:
$widget->model->translatable = [ 'viewBag[og_title]', 'viewBag[og_description]' ];
You can add as many fields as you want. All the fields will show up, translatable, in each staticPage.

I created a plugin using php artisan create:plugin aic.extendStaticPages
And in Plugin.php I have the following code:

<?php
use Backend;
use System\Classes\PluginBase;
use Event;
use Request;
use Winter\Pages\Classes\Controller;

class Plugin extends PluginBase {
    public function pluginDetails() {
        return [
            'name'        => 'extend Static Pages',
            'description' => 'Add custom fields to the static pages',
            'author'      => 'aic',
            'icon'        => 'icon-leaf'
        ];
    }

    public function registerComponents() {
        return [];
    }

    public function registerPermissions() {
        return [];
    }

    public function boot() {
        Event::listen('backend.form.extendFieldsBefore', function($widget) {
            
            // Only apply this listener when the Page controller is being used
            if (!$widget->getController() instanceof \Winter\Pages\Controllers\Index) {
                return;
            }

            // Only apply this listener when the Page model is being modified
            if (!$widget->model instanceof \Winter\Pages\Classes\Page) {
                return;
            }

            // Only apply this listener when the Form widget in question is a root-level
            // Form widget (not a repeater, nestedform, etc)
            if ($widget->isNested) {
                return;
            }

            // OpenGraph
            $widget->tabs['fields']['viewBag[og_title]'] = [
                'tab' => 'cms::lang.editor.meta',
                'label' => 'og:title',
                'type' => 'text',
            ];

            $widget->tabs['fields']['viewBag[og_description]'] = [
                'tab' => 'cms::lang.editor.meta',
                'label' => 'og:description',
                'type' => 'textarea',
                'size' => 'tiny'
            ];

            $widget->tabs['fields']['viewBag[og_image]'] = [
                'tab' => 'cms::lang.editor.meta',
                'label' => 'og:image',
                'type' => 'mediafinder'
            ];

            // make the the fields translatable
            $widget->model->translatable = [
                'viewBag[og_title]',
                'viewBag[og_description]'
            ];

        });

    }
}

So yes, it is super easy, once you find the correct solution amongst many many wrong posts.

Note:
I noticed meta title and meta description weren't translatable anymore. You have to push the values to the array:

// translate the fields
            $translatable = [
                'viewBag[og_title]',
                'viewBag[og_description]',
                'viewBag[og_image]'
            ];

            foreach ($translatable as &$value) {
                $widget->model->translatable[] = $value;
            }

[LukeTowers]

@AIC-BV can you submit a PR to any docs to make it easier for people to figure this out in the future?

[mjauvin]

You should really be using custom page fields for this.
ref. https://github.com/wintercms/wn-pages-plugin/blob/main/docs/documentation.md#custom-page-fields

You can add translatable=true parameter to the variables definition to make them translatable.

[AIC-BV]

But then I have to add them on every layout, my solution adds it to every staticPage by default?