Componente Livewire de vista completa
Comprar curso

27. Componente Livewire de vista completa


5 comentarios

Inicia sesión para comentar

Comentarios:

  • Brian Alonso Valles Vela

    Brian Alonso Valles Vela hace 1 mes

    Para los que tuvieron problemas para “migrar” lo que está en el curso en Livewire 2 a Livewire 3, tienen que ejecutar el comando “php artisan livewire:publish --config” y acceder al archivo de configuración que se creó en la carpeta “config/livewire.php”. Luego buscar el texto “'layout'” y cambiar el contenido a "'layouts.app'", que es la plantilla que se está usando por defecto en el proyecto. Para que permita actuar al componente como un controlador.

    Mi primer comentario, si me equivoco, agradecería la guía.

  • Eduardo Martínez

    Eduardo Martínez hace 4 meses

    Hola de nuevo! He logrado finalmente conseguir el resultado deseado. Los cambios que hay que hacer son relativamente fáciles, pero para llegara  el tuve que darle unas cuantas vueltas 😅. Si te parece bien puedo comentar aquí como lo he implementado, pero antes de compartirlo prefiero que me des permiso para ello.

    Gracias y un saludo!

    • Victor Arana Flores hace 4 meses

      Hola Eduardo, todo aporte es mas que bienvenido :D

    • Eduardo Martínez hace 4 meses

      Perfecto, pues voy a dejar aquí cómo he realizado esta implementación:

      En el fichero de rutas web.php:

      Route::get('courses-status/{course}/{lesson?}', CourseStatus::class)->name('courses.status');

      En el controlador del componente CourseStatus.php

      // [...]
      use App\Models\Course;
      use App\Models\Lesson;
      
      public Course $course;
      public Lesson $lesson;
      
      public function mount(Course $course, $lesson = null)
      {
      	$this->course = $course;
      	if ($lesson) {
      		$this->lesson = $lesson;
      	} else {
      		foreach ($course->lessons as $lesson) {
      			if (!$lesson->completed) {
      				$this->lesson = $lesson;
      				break;
      			}
      		}
      		redirect()->route('courses.learn', [$this->course, $this->lesson]);
      	}
      }
      
      // [...]

      De este modo, si desde la vista ‘’courses-show' pulsamos en el  enlace para continuar el curso, aunque este enlace no pase el parámetro de la lección, el controlador se encargará de localizar la siguiente lección pendiente del usuario y redigirirlo a dicha lección.

      Esto produce una redirección 302 que queda transparente para el usuario.

      Es importante tener en cuenta que:
      - De seguir esta modificación, habrá que adaptar lo que se vaya viendo en las próximas unidades de este curso.
      - Que por el momento sólo voy por la unidad 23, por lo que puede que más adelante encuentre que se explica como conseguir el mismo resultado de otro modo, o incluso que haya algún cambio que entre en conflicto con mi planteamiento. 

  • Eduardo Martínez

    Eduardo Martínez hace 4 meses

    Buenas Victor! Tengo una duda que he tratado de resolver por mis medios sin resultado. Me gustaría que mi ruta fuese distinta. Actualmente estoy usando la siguiente:

    Route::get('courses/{course}/learn}', CourseLearn::class)->name('courses.learn');

    Todo funciona bien, pero además querría que incluyera el slug de la lección, por lo que nuestra URL finalmente quedara así: htttps://web.com/nombre-curso/learn/nombre-leccion

     

    ¿Cómo puedo lograr ese resultado? Muchas gracias por tu atención 🙏

    • Victor Arana Flores hace 4 meses

      Genera la ruta así:

      Route::get('courses/{course}/learn/{
      lesson}', CourseLearn::class)->name('courses.learn');

      Y llamas la ruta asi route('courses.learn', [$course, $lesson])

    • Eduardo Martínez hace 4 meses

      Hola de nuevo Victor! Primero que nada racias por atenderme! Mi planteamiento era que al llegar a la ruta ‘courses.learn’ pudieras llegar tanto con una lección como sin ella. Por ejemplo, cuando estoy viendo la ficha del curso y pulso en “Continuar con el curso”, en ese momento aún no sé por que lección va el usuario.

      Entonces, al parámetro `{lesson}` de la ruta le incluí una interrogación para hacerlo opcional.

      Luego, en el controlador del componente (en mi caso lo he llamado CourseLearn) creo una propiedad llamada Lesson $lesson, y la función `mount` recibe un nuevo parámetro llamado `$lesson = null` para que en caso de que no recibir una lección, le de nulo.

      Si recibo una instancia de Lesson, la guardo en la propiedad $this→lesson, en caso contrario recorro las lecciones como  haces con $current y al localizarla, salgo de bucle y hago un redirect a ‘courses.learn’, ahora sí con el curso y la lección.

      Llegué a la conclusión de que lo hacías así también aquí en la plataforma, ya que observe que cuando accedo a un curso desde la sección “Mis cursos” se produce un HTTP 302

      De este modo logro el resultado que esperaba, pero creo que, a causa de hacerlo de este modo, estoy sacrificando la ventaja de usar un componente de página completa, ya que cuando cambio de lección no lo hago dinámicamente, sino que vuelvo a llamar a la ruta `courses.learn`, y por tanto se vuelve a ejecutar la función `mount`.

      La duda que me queda entonces es si debería mantener este cambio así, o si bien más adelante en el mismo curso plantearás una forma más eficiente de lograr el mismo resultado.

      Agradezco muchísimo tu atención, y espero que tengas unas felices fiestas.

  • Claudio Lopez

    Claudio Lopez hace 6 meses

    Hola, yo estoy teniendo el mismo problema que Bayron, hago exactamente lo que dice el video y me sale este mismo error, Livewire page component layout view not found: [components.layouts.app], a que se debe?

    • Victor Arana Flores hace 6 meses

      Hola Claudio, ahora Laravel viene con Livewire 3 por defecto. En mi canal de youtube estoy haciendo el curso completo.

      Para solucionar ese probleme en especifico te comparto este video:
       

  • Bayron Gutierrez

    Bayron Gutierrez hace 6 meses

    Hola hice todo el video y me dio un error y necesito que me ayudes
    Livewire page component layout view not found: [components.layouts.app]

    • Victor Arana Flores hace 6 meses

      Hola este es un curso de Livewire 2. Si estas usando Livewire 3 te invito a ver este otro curso

    • Victor Arana Flores hace 6 meses

      Y para solucionar tu problema en especifico te comparto este video:
       

    • Emerson Domínguez hace 2 meses

      Yo lo solucione con el comando php artisan livewire:layout, ocupando livewire version 3