Hoy vamos a tratar un tema muy solicitado y se trata de cómo cambiar el idioma de una aplicación de forma dinámica en Laravel. Gracias a las herramientas que el framework nos ofrece, es una tarea realmente sencilla que podemos hacer siguiendo unos simples pasos.
En una lección anterior aprendimos Cómo usar el componente de traducciones de Laravel, así que vamos a poner un poco en práctica el tema. Lo primero que debemos hacer es crear una vista llamada layout.blade.php para mostrar un mensaje de bienvenida en la página principal de nuestro proyecto.
<html lang="en">
<head>
<title>Styde.Net</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default container">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">En</a></li>
<li><a href="#">Es</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron container">
<p>{{ trans('welcome.home') }}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
En este caso usaremos el CDN de Bootstrap 3 pero recuerda que puedes configurar los assets de forma mucho más profesional usando Bootstrap Sass en Laravel .
Como puedes ver, vamos a usar el helper trans() para mostrar la cadena de texto proveniente de los archivos de idioma de la aplicación. con trans(‘welcome.home’) estaríamos imprimiendo la llave «home» dentro del archivo welcome.php en ingles o español, dependiendo del idioma seleccionado. Vamos a crear este archivo en dos ubicaciones diferentes con la misma estructura pero con un valor distinto ya que necesitamos una cadena de texto en español y otra en inglés.
resources/lang/es/welcome.php
<?php
return [
'home' => '¡Bienvenido a Styde.Net!',
];
resources/lang/en/welcome.php
<?php
return [
'home' => 'Welcome to Styde.Net!',
];
Una vez creada la vista y los archivos de idiomas vamos a crear una ruta para acceder al mensaje de bienvenida
Route::get('/', function () {
return view('layout');
});
Ahora si ingresas al directorio principal de tu proyecto verás algo similar a esto:
Podemos ver el mensaje en inglés (debido a la configuración que viene por defecto) vamos a agregar la lógica necesaria para poder cambiar el idioma en que se muestra.
Creando un nuevo Middleware
Este middleware nos va a permitir evaluar cual ha sido el idioma que el usuario ha seleccionado y así poder asignar el valor correspondiente para mostrar el resultado deseado en cada petición que el usuario realice.
Desde la consola ejecutamos el siguiente comando
$ php artisan make:middleware LangMiddleware
Y posteriormente editamos el archivo app/Http/Middleware/LangMiddleware.php.
public function handle($request, Closure $next)
{
if (!empty(session('lang'))) {
\App::setLocale(session('lang'));
}
return $next($request);
}
Estamos preguntando por una variable de sesión llamada «lang», si esta existe, usaremos el valor de la misma («en» – «es») para indicar el idioma que se va a utilizar. En caso de que dicha variable de sesión no exista, la aplicación usará por defecto el idioma definido en el archivo app/config/app.php.
'locale' => 'en',
Registrando el Middleware
Lo lógico sería que el usuario vea el mismo idioma para todas las páginas que esté visitando, por lo tanto vamos a registrar este middleware de forma global dentro de app\Http\Kernel.php.
protected $routeMiddleware = [
...
'web' => \App\Http\Middleware\LangMiddleware::class,
];
Si estas usando Laravel 5.2 agregas el middleware de la siguiente manera.
'web' => [
\App\Http\Middleware\EncryptCookies::class,
\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
\Illuminate\Session\Middleware\StartSession::class,
\Illuminate\View\Middleware\ShareErrorsFromSession::class,
\App\Http\Middleware\VerifyCsrfToken::class,
\App\Http\Middleware\LangMiddleware::class,
],
Asignando el idioma a la variable de sesión
En la vista que creamos anteriormente tenemos dos enlaces «en» y «es», vamos a crear una ruta que capture la petición de cada enlace y nos permita asignar el idioma que deseamos a la variable de sesión «lang».
Route::get('lang/{lang}', function ($lang) {
session(['lang' => $lang]);
return \Redirect::back();
})->where([
'lang' => 'en|es'
]);
El método where() nos permite limitar el valor del parámetro {lang} solo a «en» o «es» para evitar que se asigne a la variable de sesión un idioma que no exista. Para más información visita nuestro post sobre Rutas con filtros en Laravel 5.1.
Ahora cambiamos el valor de cada link en layout.blade.php
<li><a href="{{ url('lang', ['en']) }}">En</a></li>
<li><a href="{{ url('lang', ['es']) }}">Es</a></li>
Finalmente para que todos estos cambios sean efectivos debemos indicar que rutas van a trabajar con el middleware que hemos creado, y ya que lo registramos bajo el grupo «web» podemos hacer lo siguiente en el archivo routes.php.
Route::group(['middleware' => ['web']], function () {
Route::get('/', function () {
return view('layout');
});
Route::get('lang/{lang}', function ($lang) {
session(['lang' => $lang]);
return \Redirect::back();
})->where([
'lang' => 'en|es'
]);
});
¡Perfecto! ahora si ingresas nuevamente a la página principal de tu proyecto y haces click en cada uno de estos enlaces verás como cambia el mensaje de bienvenida.
Esto ha sido todo por ahora, espero que te haya gustado esta lección, si te fijas hemos repasado uso de Middleware, filtros y grupos en rutas, uso del componente de traducciones, uso de variables de sesión y algo de Blade, si quieres aprender unas cuantas cosas más no esperes para inscribirte en cualquiera de nuestras Series y Cursos. Si tienes alguna duda puedes dejarla en la sección de comentarios y por supuesto no olvides compartir este contenido en redes sociales para ayudar a otros a continuar con el aprendizaje.
Material relacionado
- Cómo usar el componente de traducciones de Laravel
- Uso de Sesiones en Laravel 5.1
- Bootstrap Sass en Laravel con Elixir y Gulp
- Bootstrap Sass en Laravel parte 2 (Bower)
- Cómo crear y usar los Middleware en Laravel 5.1
- Rutas con filtros en Laravel 5.1
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Cómo usar el componente de traducciones de Laravel Lección siguiente Componentes dinámicos para formularios con Blade y Laravel