WEBVTT

00:00:01.006 --> 00:00:06.776 align:middle
Ahora que estamos representando estos elementos de la receta a
través del tipo de bloque de rejilla, comprueba lo que podemos hacer.

00:00:07.296 --> 00:00:11.946 align:middle
Haz clic en la cuadrícula, ve a la pestaña
de diseño y marca "Activar la paginación".

00:00:12.556 --> 00:00:17.706 align:middle
Entonces podrás elegir entre un estilo de
paginación con enlaces de página, como 1, 2,

00:00:17.706 --> 00:00:21.036 align:middle
3 y 4, o simplemente un
botón de "cargar más".

00:00:21.906 --> 00:00:22.996 align:middle
Utilicemos este último.

00:00:23.766 --> 00:00:25.946 align:middle
Muy bien, pulsa "Publicar
y continuar editando".

00:00:26.386 --> 00:00:29.816 align:middle
Entonces... una vez que se
guarde, actualiza para ver...

00:00:30.396 --> 00:00:32.346 align:middle
¡absolutamente nada!

00:00:32.916 --> 00:00:37.336 align:middle
La paginación se realiza completamente
a través de JavaScript y Ajax.

00:00:37.586 --> 00:00:41.616 align:middle
Y no vemos nada porque todavía no hemos

00:00:41.746 --> 00:00:44.476 align:middle
incluido el JavaScript
necesario en nuestra página.

00:00:45.466 --> 00:00:46.786 align:middle
Añadirlo es bastante fácil.

00:00:47.146 --> 00:00:50.076 align:middle
Ve a templates/base.html.twig.

00:00:50.896 --> 00:00:55.176 align:middle
Aquí arriba, en la zona de head,
vamos a incluir dos plantillas.

00:00:55.656 --> 00:01:01.156 align:middle
La primera es:
@NetgenLayoutsStandard/page_head.html.twig...

00:01:01.506 --> 00:01:05.026 align:middle
y pasarle una variable extra: full: true:

00:01:06.566 --> 00:01:11.326 align:middle
Esto cargará el CSS y el JavaScript que soportan
estos elementos de la galería aquí abajo.

00:01:11.926 --> 00:01:18.176 align:middle
No voy a hablar de estos bloques de galería en este
tutorial, pero son básicamente como un bloque de lista

00:01:18.176 --> 00:01:24.586 align:middle
o de cuadrícula, excepto que tienen JavaScript para
convertirlos en deslizadores o galerías de miniaturas.

00:01:25.296 --> 00:01:32.166 align:middle
Así que esto incluye el CSS y el JavaScript para
ellos, así como un pequeño archivo CSS de cuadrícula

00:01:32.296 --> 00:01:36.936 align:middle
para ayudar a representar las columnas de cuadrícula
en tu página en caso de que no tengas Bootstrap.

00:01:37.566 --> 00:01:41.406 align:middle
El full: true le dice que
traiga jQuery así como

00:01:41.406 --> 00:01:46.096 align:middle
otras dos bibliotecas de JavaScript
llamadas magnific-popup y swiper.

00:01:46.846 --> 00:01:49.936 align:middle
Todas ellas son necesarias para
los bloques de la galería.

00:01:50.576 --> 00:01:54.816 align:middle
Así que, sí, si no estás usando
uno de esos bloques de galería,

00:01:55.096 --> 00:01:57.636 align:middle
podrías evitar incluir
este archivo por completo.

00:01:57.946 --> 00:01:58.996 align:middle
Pero yo lo dejaré.

00:01:59.806 --> 00:02:02.946 align:middle
Pero fíjate, no he dicho
nada sobre la paginación.

00:02:03.666 --> 00:02:06.666 align:middle
Para eso, necesitamos incluir
una segunda plantilla.

00:02:07.406 --> 00:02:13.836 align:middle
Copia esta línea, pégala, quita la palabra
Standard y esto no necesita la variable full:

00:02:14.756 --> 00:02:20.396 align:middle
Esta plantilla es muy sencilla:
incorpora un poco de CSS y un poco

00:02:20.396 --> 00:02:23.676 align:middle
de JavaScript para potenciar
la paginación Ajax.

00:02:24.046 --> 00:02:28.096 align:middle
Y éstas son las dos únicas
plantillas que necesitarás

00:02:28.096 --> 00:02:30.946 align:middle
incluir para las maquetas JavaScript y CSS.

00:02:32.006 --> 00:02:33.046 align:middle
Refresca y...

00:02:34.156 --> 00:02:35.846 align:middle
¡ahí está!

00:02:35.846 --> 00:02:37.476 align:middle
Y cuando hacemos clic en el nuevo enlace...

00:02:37.876 --> 00:02:40.916 align:middle
¡estalla con un error 500!

00:02:41.186 --> 00:02:44.126 align:middle
Ups. Abre esa URL en una nueva pestaña.

00:02:46.186 --> 00:02:52.426 align:middle
Interesante: No se ha encontrado ninguna coincidencia
de plantilla para la vista "item_view" y el contenido

00:02:53.346 --> 00:03:00.426 align:middle
"ajax". Cuando hacemos clic en "Cargar más", no es de extrañar
que esa llamada Ajax muestre los siguientes elementos de la receta.

00:03:01.026 --> 00:03:07.216 align:middle
Podrías pensar que esto reutilizaría nuestra
plantilla de vista de artículos "frontend ".

00:03:07.516 --> 00:03:11.436 align:middle
Pero... en realidad hay una sección diferente

00:03:11.476 --> 00:03:13.806 align:middle
específicamente para cuando el
contenido se muestra a través de Ajax.

00:03:14.706 --> 00:03:19.616 align:middle
Copia por completo la sección default
frontend, pégala y cámbiala por

00:03:20.466 --> 00:03:26.436 align:middle
ajax: No hay que cambiar nada más: cuando estemos en
modo ajax, utiliza la plantilla normal del frontend.

00:03:27.706 --> 00:03:31.086 align:middle
Ahora, si refrescamos la ruta Ajax...

00:03:31.526 --> 00:03:36.236 align:middle
¡funciona! Recarga la página
de inicio y haz clic en "Cargar

00:03:36.986 --> 00:03:38.766 align:middle
más". ¡ Esto es muy

00:03:38.996 --> 00:03:44.876 align:middle
bonito! Aunque, cosa menor, nuestros diseñadores
realmente quieren utilizar el texto "Mostrar más".

00:03:45.736 --> 00:03:50.826 align:middle
No hay problema: todo lo que renderiza
Layouts se procesa a través del

00:03:51.376 --> 00:03:54.176 align:middle
traductor. Haz clic en el icono de traducción de
la barra de herramientas de depuración de la web.

00:03:54.866 --> 00:03:55.936 align:middle
¡ Ahí

00:03:56.406 --> 00:04:00.866 align:middle
está! Al parecer, la clave de traducción es

00:04:01.586 --> 00:04:02.696 align:middle
collection.pager.load_more.

00:04:03.016 --> 00:04:08.146 align:middle
Cópiala... y luego ve a abrir nuestro
archivo de traducción - nglayouts.en.yaml - y

00:04:08.986 --> 00:04:11.126 align:middle
pégalo. Mi editor ha cambiado el

00:04:11.456 --> 00:04:13.626 align:middle
formato... que en realidad

00:04:13.756 --> 00:04:16.246 align:middle
funcionaría... pero volveré
al formato más plano

00:04:16.766 --> 00:04:22.446 align:middle
. Ponlo en "Mostrar más": Gira

00:04:23.206 --> 00:04:24.176 align:middle
y...

00:04:25.146 --> 00:04:28.306 align:middle
¡lo tenemos! Vale, un cambio más
para contentar a nuestros diseñadores.

00:04:28.786 --> 00:04:30.286 align:middle
Inspecciona el elemento del

00:04:31.786 --> 00:04:37.306 align:middle
botón. Layouts añade un montón de clases,
que se estilizan a través de ese CSS que hemos

00:04:37.916 --> 00:04:41.336 align:middle
incluido. Y, por supuesto, podemos anularlo si

00:04:41.986 --> 00:04:47.036 align:middle
es necesario. En nuestro editor, abre

00:04:47.916 --> 00:04:53.076 align:middle
assets/styles/app.css. Como recordatorio,
ya estamos ejecutando Webpack Encore en

00:04:53.576 --> 00:04:58.986 align:middle
segundo plano. Así que, si cambiamos este archivo,
ese cambio se reconstruirá automáticamente

00:04:58.986 --> 00:05:00.156 align:middle
y se utilizará en el

00:05:01.146 --> 00:05:06.156 align:middle
frontend. En la parte inferior, pegaré algo de
CSS para dar más margen a ese botón pero sin

00:05:07.236 --> 00:05:10.006 align:middle
borde: Volvemos a dar la vuelta, actualizamos

00:05:10.346 --> 00:05:12.576 align:middle
y... nuestros diseñadores están

00:05:13.186 --> 00:05:17.276 align:middle
contentos. Así que, gracias a los diseños,
obtenemos una paginación Ajax gratuita,

00:05:17.546 --> 00:05:20.136 align:middle
que podemos personalizar
con bastante facilidad.

00:05:20.566 --> 00:05:21.986 align:middle
Eso es

00:05:22.536 --> 00:05:27.016 align:middle
genial. Llegados a este punto, dado que somos
capaces de renderizar rejillas y listas de

00:05:27.426 --> 00:05:33.946 align:middle
recetas, podríamos entrar en la maqueta "Lista
de recetas" y sustituir este HTML codificado

00:05:34.316 --> 00:05:39.306 align:middle
, que proviene de la plantilla:

00:05:40.246 --> 00:05:46.206 align:middle
templates/recipes/list.html.twig. Sí, en teoría
podríamos eliminar esto y sustituirlo por un

00:05:46.846 --> 00:05:48.566 align:middle
bloque de lista. El único

00:05:48.836 --> 00:05:51.606 align:middle
problema... es que no se vería del todo

00:05:52.096 --> 00:05:57.476 align:middle
bien. En lugar de renderizarse como lo hace ahora,
Layouts utilizaría nuestra plantilla de artículos : de

00:05:57.786 --> 00:06:00.906 align:middle
modo que cada artículo se
vería como lo hace en la

00:06:01.836 --> 00:06:08.266 align:middle
página de inicio. Ahora, podemos arreglar esto creando
una segunda forma de representar los elementos de la receta

00:06:08.596 --> 00:06:10.616 align:middle
, y hablaremos de ello

00:06:11.206 --> 00:06:14.116 align:middle
más adelante. Pero saco esto a
colación por una razón importante.

00:06:14.866 --> 00:06:21.496 align:middle
A no ser que pensemos reutilizar esta lista
y su aspecto en otras páginas de nuestro

00:06:21.876 --> 00:06:26.306 align:middle
sitio, no hay grandes beneficios
en hacer el trabajo de convertirla

00:06:26.306 --> 00:06:28.926 align:middle
en algo que podamos representar mediante

00:06:29.666 --> 00:06:35.246 align:middle
Diseños. Como sólo se utiliza aquí, render
izarla mediante Twig está perfectamente

00:06:36.176 --> 00:06:42.356 align:middle
bien. Siguiente: mejoremos el sistema de
recetas haciendo posible la selección manual de