00:00:13:22 - 00:00:14:05
In this
00:00:14:05 - 00:00:18:08
tutorial we'll learn how to implement
and utilize scripts allowing us to greatly
00:00:18:08 - 00:00:21:08
increase
the capabilities of our custom content
00:00:21:08 - 00:00:24:10
templates with scripted content.
00:00:24:10 - 00:00:27:18
This example will focus on
a very specific scenario
00:00:27:27 - 00:00:29:21
highlighting this functionality.
00:00:29:21 - 00:00:32:29
However, it's only a small sample
of its overall capabilities.
00:00:33:04 - 00:00:36:22
Just to give you a feel
for what it can do.
00:00:38:05 - 00:00:39:26
So what we've got on screen at the moment
00:00:39:26 - 00:00:43:06
is our current content page frontend.
00:00:43:15 - 00:00:46:07
Following on from the previous tutorials.
00:00:47:21 - 00:00:51:19
Now in this particular example,
I want to showcase the use of scripts.
00:00:51:20 - 00:00:55:00
What we're going to do is initially hide
00:00:55:00 - 00:00:57:07
this additional detail section here.
00:00:58:15 - 00:01:00:16
We're going to create an additional button
00:01:00:16 - 00:01:02:27
right underneath
where this description is located.
00:01:04:04 - 00:01:07:15
And then we're going to implement a script
which changes
00:01:07:15 - 00:01:11:18
the is-hidden
class of this particular section.
00:01:12:08 - 00:01:14:20
And then we're going to link
that script to the button.
00:01:15:08 - 00:01:18:04
So the end result of this is
we're going to end up with a button here
00:01:18:13 - 00:01:21:14
which will show us this additional
text when
00:01:21:14 - 00:01:24:22
it's clicked.
00:01:25:17 - 00:01:27:23
So the first thing I'm going to do
is navigate
00:01:27:23 - 00:01:31:19
back to the specification
of my content template.
00:01:32:08 - 00:01:35:19
And very specific to this example
I'm going to have,
00:01:36:02 - 00:01:45:08
I'm going to add an additional class
to some of our HTML.
00:01:45:08 - 00:01:48:22
And what I'm going to do here
is just put the is hidden class
00:01:54:11 - 00:01:56:17
and that will ensure that
that particular section
00:01:56:17 - 00:01:59:11
is not visible by default.
00:02:02:05 - 00:02:05:10
I'm just going to click save and continue
edit move to look at that
00:02:05:10 - 00:02:09:04
on the actual content page itself
to make sure that that's worked.
00:02:09:25 - 00:02:11:11
I need to make sure that I click Save
00:02:11:11 - 00:02:14:05
and continue on both
the content template itself
00:02:14:17 - 00:02:18:00
and the content page
so that it's using the updated
00:02:18:07 - 00:02:20:03
content template
00:02:23:01 - 00:02:25:14
and then refreshing
the actual content page for content.
00:02:25:24 - 00:02:35:10
You can see that
that section is now headed.
00:02:35:10 - 00:02:39:10
The next thing I'm going to do is to add
some boilerplate code for a button.
00:02:40:04 - 00:02:43:07
So again,
this is very specific to this example.
00:02:43:15 - 00:02:49:10
We're going to add code to the HTML markup
section here, meaning a button is shown.
00:02:50:17 - 00:02:52:24
Now I've got some code already available,
00:02:52:24 - 00:02:56:03
so I'm just going to copy and paste that.
00:02:57:14 - 00:03:00:10
And then again, we'll check this
just by clicking save
00:03:03:03 - 00:03:05:06
clicking save on the content template
00:03:05:06 - 00:03:09:11
and the content page and then refreshing.
00:03:09:11 - 00:03:12:08
And then there we can see
our button has now been created as well.
00:03:13:15 - 00:03:15:05
Now this is of course, is all just set up.
00:03:15:05 - 00:03:18:05
The main thing we're going to cover here
is how
00:03:18:05 - 00:03:20:22
we utilize scripts.
00:03:21:15 - 00:03:24:22
So again,
if I go back to my custom content template
00:03:25:00 - 00:03:28:11
and we're going to go across to the third
tab here, the script tap
00:03:29:17 - 00:03:32:20
and what you'll find is
there's a few in here which are available
00:03:32:20 - 00:03:35:22
by default
that are used in some of the other
00:03:35:22 - 00:03:37:27
content templates.
00:03:37:27 - 00:03:42:07
And this section here will primarily
be used if we want to create scripts
00:03:42:07 - 00:03:47:04
which are able to be utilized
on multiple custom content templates.
00:03:47:12 - 00:03:51:03
So basically we're very easily able
to reuse the code
00:03:51:03 - 00:03:52:19
that's in this particular scripts.
00:03:53:19 - 00:03:54:17
It's worth noting that
00:03:54:17 - 00:03:59:16
scripts can also be added
directly to the simple markup section.
00:03:59:28 - 00:04:03:21
However, if you do intend to use a script
multiple times, it makes more sense.
00:04:03:23 - 00:04:08:15
More sense
to create a separate, reusable script.
00:04:10:28 - 00:04:11:24
I'm going to click Add
00:04:11:24 - 00:04:14:01
to create a new script
00:04:17:05 - 00:04:18:22
and put a name
00:04:23:16 - 00:04:25:04
and then input the content
00:04:25:04 - 00:04:34:18
of our particular script.
00:04:35:17 - 00:04:38:07
Now again,
this is very specific to our scenario,
00:04:38:07 - 00:04:40:25
so just to give you an overview of what
this is actually doing.
00:04:41:12 - 00:04:44:09
So the code snippet is
00:04:44:09 - 00:04:46:27
targeting two specific page elements.
00:04:47:29 - 00:04:49:23
We've got the button,
00:04:50:01 - 00:04:54:06
which in this case is renamed
Reveal Section Button,
00:04:54:06 - 00:04:57:23
and we've got the section of the page,
the currently hidden section
00:04:57:23 - 00:05:03:03
that we did a few minutes ago,
which is this additional section.
00:05:05:16 - 00:05:06:10
Bear in mind that
00:05:06:10 - 00:05:10:11
these names here
must match the HTML markup code.
00:05:10:11 - 00:05:13:10
Exactly.
00:05:13:10 - 00:05:17:04
So what this script is doing,
it means that when the button is clicked,
00:05:17:11 - 00:05:21:01
the is hidden class,
which is on our section which we added
00:05:21:01 - 00:05:25:05
a few minutes
ago, is removed from the code,
00:05:25:24 - 00:05:29:15
meaning that it will then be visible.
00:05:29:29 - 00:05:32:04
So therefore what it means
is when we click the button,
00:05:32:13 - 00:05:34:29
we see that additional text
and those images.
00:05:35:27 - 00:05:39:07
So this is one small example
of the capabilities of scripting.
00:05:39:14 - 00:05:42:26
However, its true
possibilities are pretty much endless.
00:05:43:28 - 00:05:47:20
This of course, just aims to be primarily
to show you how to use the custom
00:05:47:20 - 00:05:50:29
content template functionality.
00:05:54:05 - 00:05:56:14
So with that input, we'll click on Create.
00:05:57:08 - 00:05:59:26
That's created a new sample script.
00:05:59:26 - 00:06:01:22
And then what we need to do
is to make sure
00:06:01:22 - 00:06:04:08
that this particular script
can be utilized
00:06:04:18 - 00:06:08:06
within a particular custom
content template.
00:06:08:21 - 00:06:11:13
We do this by utilizing the token,
00:06:11:13 - 00:06:13:21
so I can click copy to get that token
00:06:15:08 - 00:06:16:02
and then just put
00:06:16:02 - 00:06:19:27
it into the top of our HTML markup section
just to show that
00:06:19:27 - 00:06:21:00
that can be utilized
00:06:21:03 - 00:06:23:21
In this particular content template.
00:06:24:10 - 00:06:27:00
Then for absolute clarity,
just to make sure we know
00:06:27:19 - 00:06:28:29
I said that we need to make sure
00:06:28:29 - 00:06:32:12
that in this particular script
and in other ones you're likely to write.
00:06:32:22 - 00:06:35:14
We need to make sure
that what we're referencing in the script
00:06:35:22 - 00:06:39:05
is available in our actual HTML markup.
00:06:39:16 - 00:06:42:21
So we've got reveal section button,
which is the button name
00:06:42:29 - 00:06:46:01
and additional section
00:06:47:27 - 00:06:50:05
reveal section button
00:06:51:25 - 00:06:54:28
and then additional section.
00:06:56:27 - 00:06:59:21
So I'm going to save the content template,
00:06:59:21 - 00:07:02:03
save the content page
to make sure it refreshes
00:07:03:14 - 00:07:07:07
and then refresh the actual frontend.
00:07:08:07 - 00:07:09:25
So that should now all be in place.
00:07:09:25 - 00:07:13:16
So when we click on our show
additional data button, you can see that
00:07:13:16 - 00:07:17:12
the page moves down as we've now
unhidden hidden that particular section.
00:07:17:12 - 00:07:20:21
We've removed
that particular class from the code.
00:07:21:00 - 00:07:23:14
So that's now visible.