WEBVTT

NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com

00:00:01.006 --> 00:00:06.776 align:middle
Now that we're rendering these recipe items via
the grid block type, check out what we can do.

00:00:07.296 --> 00:00:11.946 align:middle
Click the grid, go to the design tab
and then check "Enable Pagination".

00:00:12.556 --> 00:00:17.706 align:middle
Then you can choose between a pager
style with page links, like 1, 2,

00:00:17.706 --> 00:00:21.036 align:middle
3 and 4, or just a "load more" button.

00:00:21.906 --> 00:00:22.996 align:middle
Let's use that one.

00:00:23.766 --> 00:00:25.946 align:middle
All right, hit publish and continue editing.

00:00:26.386 --> 00:00:29.816 align:middle
Then... once that saves, refresh to see...

00:00:30.396 --> 00:00:32.346 align:middle
absolutely nothing!

00:00:32.916 --> 00:00:37.336 align:middle
The pagination is powered
entirely via JavaScript and Ajax.

00:00:37.586 --> 00:00:41.616 align:middle
And we don't see anything
because we haven't, yet,

00:00:41.746 --> 00:00:44.476 align:middle
included the JavaScript needed onto our page.

00:00:45.466 --> 00:00:46.786 align:middle
Adding it is pretty easy.

00:00:47.146 --> 00:00:50.076 align:middle
Go to templates/base.html.twig.

00:00:50.896 --> 00:00:55.176 align:middle
Up here in the head area, we're
going to include two templates.

00:00:55.656 --> 00:01:01.156 align:middle
The first is:
@NetgenLayoutsStandard/page_head.html.twig...

00:01:01.506 --> 00:01:05.026 align:middle
and pass this an extra variable: full: true.

00:01:06.566 --> 00:01:11.326 align:middle
This will load the CSS and JavaScript that
support these gallery items down here.

00:01:11.926 --> 00:01:18.176 align:middle
I'm not gonna talk about these gallery blocks in
this tutorial, but they're basically like a list

00:01:18.176 --> 00:01:24.586 align:middle
or grid block, except that they have JavaScript
to turn them into sliders or thumb galleries.

00:01:25.296 --> 00:01:32.166 align:middle
So this includes the CSS and JavaScript
for those, as well as a small grid CSS file

00:01:32.296 --> 00:01:36.936 align:middle
to help render the grid columns on your
page in case you don't have Bootstrap.

00:01:37.566 --> 00:01:41.406 align:middle
The full: true tells it to
bring in jQuery as well

00:01:41.406 --> 00:01:46.096 align:middle
as two other JavaScript libraries
called magnific-popup and swiper.

00:01:46.846 --> 00:01:49.936 align:middle
All of these are needed for
those gallery blocks.

00:01:50.576 --> 00:01:54.816 align:middle
So, yes, if you're not using
one of those gallery blocks,

00:01:55.096 --> 00:01:57.636 align:middle
you could avoid including this file entirely.

00:01:57.946 --> 00:01:58.996 align:middle
But I'll leave it.

00:01:59.806 --> 00:02:02.946 align:middle
But notice, I didn't say
anything about pagination.

00:02:03.666 --> 00:02:06.666 align:middle
For that, we need to include a second template.

00:02:07.406 --> 00:02:13.836 align:middle
Copy this line, paste, remove the word Standard
and this doesn't need the full variable.

00:02:14.756 --> 00:02:20.396 align:middle
This template is dead simple: it brings
in a tiny bit of CSS and a little bit

00:02:20.396 --> 00:02:23.676 align:middle
of JavaScript to power Ajax pagination.

00:02:24.046 --> 00:02:28.096 align:middle
And these are the only two
templates that you'll ever need

00:02:28.096 --> 00:02:30.946 align:middle
to include for Layouts JavaScript and CSS.

00:02:32.006 --> 00:02:33.046 align:middle
Refresh and...

00:02:34.156 --> 00:02:35.846 align:middle
there it is!

00:02:35.846 --> 00:02:37.476 align:middle
And when we click the new link...

00:02:37.876 --> 00:02:40.916 align:middle
it explodes with a 500 error!

00:02:41.186 --> 00:02:44.126 align:middle
Whoops. Open that URL in a new tab.

00:02:46.186 --> 00:02:52.426 align:middle
Interesting: No template match could be
found for item_view and content ajax.

00:02:53.346 --> 00:03:00.426 align:middle
When we click "Load More", no surprise, that
Ajax call renders the next recipe items.

00:03:01.026 --> 00:03:07.216 align:middle
You might think that this would re-use
our "frontend" item view template.

00:03:07.516 --> 00:03:11.436 align:middle
But... there's actually a
different section specifically

00:03:11.476 --> 00:03:13.806 align:middle
for when content is rendered via Ajax.

00:03:14.706 --> 00:03:19.616 align:middle
Copy the default frontend section
entirely, paste, then change it to ajax.

00:03:20.466 --> 00:03:26.436 align:middle
Nothing else needs to change: when we're in
ajax mode, use the normal frontend template.

00:03:27.706 --> 00:03:31.086 align:middle
Now, if we refresh the Ajax endpoint...

00:03:31.526 --> 00:03:36.236 align:middle
it works! Reload the homepage
and click "Load More".

00:03:36.986 --> 00:03:38.766 align:middle
That is so nice!

00:03:38.996 --> 00:03:44.876 align:middle
Though, minor thing, our designers
really want to use the text "Show More".

00:03:45.736 --> 00:03:50.826 align:middle
No problem: everything that Layouts renders
is processed through the translator.

00:03:51.376 --> 00:03:54.176 align:middle
Click the translation icon
on the web debug toolbar.

00:03:54.866 --> 00:03:55.936 align:middle
Oh, there it is!

00:03:56.406 --> 00:04:00.866 align:middle
Apparently the translation key
is collection.pager_load_more.

00:04:01.586 --> 00:04:02.696 align:middle
Copy that...

00:04:03.016 --> 00:04:08.146 align:middle
then go open our translation file
- nglayouts.en.yaml - and paste.

00:04:08.986 --> 00:04:11.126 align:middle
My editor changed the format...

00:04:11.456 --> 00:04:13.626 align:middle
which actually would work...

00:04:13.756 --> 00:04:16.246 align:middle
but I'll go back to the flatter format.

00:04:16.766 --> 00:04:22.446 align:middle
Set this to "Show More", spin over and...

00:04:23.206 --> 00:04:24.176 align:middle
we got it!

00:04:25.146 --> 00:04:28.306 align:middle
Ok, one more change to make our designers happy.

00:04:28.786 --> 00:04:30.286 align:middle
Inspect element on the button.

00:04:31.786 --> 00:04:37.306 align:middle
Layouts adds a bunch of classes, which
are styled via that CSS we included.

00:04:37.916 --> 00:04:41.336 align:middle
And, of course, we can override that if needed.

00:04:41.986 --> 00:04:47.036 align:middle
In our editor, open assets/styles/app.css.

00:04:47.916 --> 00:04:53.076 align:middle
As a reminder, we're already running
Webpack Encore in the background.

00:04:53.576 --> 00:04:58.986 align:middle
So, if we change this file, that
change will automatically be rebuilt

00:04:58.986 --> 00:05:00.156 align:middle
and used on the frontend.

00:05:01.146 --> 00:05:06.156 align:middle
At the bottom, I'll paste some CSS to give
that button more margin but no border.

00:05:07.236 --> 00:05:10.006 align:middle
Flip back over, refresh and...

00:05:10.346 --> 00:05:12.576 align:middle
our designers are happy.

00:05:13.186 --> 00:05:17.276 align:middle
So thanks to layouts, we
get free Ajax pagination,

00:05:17.546 --> 00:05:20.136 align:middle
which we can pretty easily customize.

00:05:20.566 --> 00:05:21.986 align:middle
That's sweet.

00:05:22.536 --> 00:05:27.016 align:middle
At this point, because we're able to
render grids and lists of recipes,

00:05:27.426 --> 00:05:33.946 align:middle
we could go into the "Recipes List
Layout" and replace this hardcoded HTML,

00:05:34.316 --> 00:05:39.306 align:middle
which comes from the template:
templates/recipes/list.html.twig.

00:05:40.246 --> 00:05:46.206 align:middle
Yup, we could, in theory, remove this
and replace it with a list block.

00:05:46.846 --> 00:05:48.566 align:middle
The only problem...

00:05:48.836 --> 00:05:51.606 align:middle
is that it wouldn't look quite right.

00:05:52.096 --> 00:05:57.476 align:middle
Instead of rendering like it does now,
Layouts would use our item template:

00:05:57.786 --> 00:06:00.906 align:middle
so each item would look like
it does on the homepage.

00:06:01.836 --> 00:06:08.266 align:middle
Now, we can fix that by creating a
second way to render recipe items,

00:06:08.596 --> 00:06:10.616 align:middle
and we will talk about that later.

00:06:11.206 --> 00:06:14.116 align:middle
But I'm bringing this up
for an important reason.

00:06:14.866 --> 00:06:21.496 align:middle
Unless we're planning to reuse this list
and how it looks on other pages on our site,

00:06:21.876 --> 00:06:26.306 align:middle
there's no huge benefit to
doing the work to convert it

00:06:26.306 --> 00:06:28.926 align:middle
into something that we can render via Layouts.

00:06:29.666 --> 00:06:35.246 align:middle
Since it's only used here, rendering
it via Twig is perfectly fine.

00:06:36.176 --> 00:06:42.356 align:middle
Next: let's improve the recipe system by
making it possible to manually select items.