00:00:12:28 - 00:00:13:08
In this
00:00:13:08 - 00:00:16:24
tutorial, we'll learn
how to place hyperlinks onto our site.
00:00:17:12 - 00:00:22:05
We will take a look at using both the Code
Mirror Editor and content templates
00:00:22:13 - 00:00:24:13
for which
we have slightly different methods.
00:00:26:00 - 00:00:30:06
So to begin, we will see how to set
the default storefront URL
00:00:30:17 - 00:00:34:04
which drives the https://academy.infigo.net/ token,
00:00:34:11 - 00:00:36:17
which will be used throughout the site.
00:00:37:24 - 00:00:39:27
So we start by clicking on configuration
00:00:41:02 - 00:00:46:01
settings and general settings.
00:00:48:09 - 00:00:51:06
In here
you'll find the storefront URL field.
00:00:51:26 - 00:00:55:19
So enter
the URL of your storefront in this box.
00:00:56:03 - 00:00:58:15
This could be your Infigo software URL.
00:00:58:15 - 00:01:00:17
You can see these entered in there
at the moment.
00:01:01:00 - 00:01:05:04
Or it could be an alternate binding
that you've set up for this storefront.
00:01:05:23 - 00:01:08:18
This is an important setting to utilize
as it will
00:01:08:24 - 00:01:11:25
drive construction of hyperlinks
throughout your site.
00:01:12:13 - 00:01:16:04
Whether you choose to use HTML code
edits or our content
00:01:16:04 - 00:01:22:29
templates, make sure you save
that once you've changed it.
00:01:24:03 - 00:01:27:00
And next, we'll
take a look at how to apply hyperlinks
00:01:27:00 - 00:01:29:24
to our storefront content.
00:01:29:24 - 00:01:33:06
So I'm going to begin by navigating
to an editable content block
00:01:33:19 - 00:01:36:03
and in our example will choose the header.
00:01:37:15 - 00:01:40:12
So if I go to content management,
00:01:40:12 - 00:01:42:13
editable content,
00:01:42:16 - 00:01:45:01
and then my header
00:01:51:12 - 00:01:53:12
first will cover the Code Mirror editor.
00:01:53:12 - 00:01:55:27
So I'm just going to switch my body
editor type
00:01:58:22 - 00:02:04:18
to Code Mirror editor.
00:02:04:18 - 00:02:07:03
And what you'll see
scattered throughout here
00:02:07:03 - 00:02:09:25
is this token I was talking about
a little bit earlier on.
00:02:09:26 - 00:02:14:20
So https://academy.infigo.net/.This
token links directly to the storefront.
00:02:14:20 - 00:02:17:12
URL setting we saw a minute or so ago
00:02:17:23 - 00:02:22:08
meaning that we can create dynamic URLs
in our HTML code.
00:02:23:06 - 00:02:25:09
You are able to hard code URLs
00:02:25:19 - 00:02:28:22
by simply typing
the complete URL in place of this.
00:02:29:04 - 00:02:31:15
However, any change to the storefront
00:02:32:12 - 00:02:36:22
you URL would mean changing each entry
individually,
00:02:36:22 - 00:02:40:10
which obviously is not ideal.
00:02:40:23 - 00:02:43:17
Navigating to specific areas of your site
00:02:43:17 - 00:02:46:27
can be achieved
by simply typing a suffix to this token.
00:02:47:16 - 00:02:52:01
So for example, if we've got a storefront
URLalready assigned to this,
00:02:52:11 - 00:02:57:18
we could access a particular product
by inputting something similar to
00:02:58:26 - 00:03:00:18
I think it's p for products
00:03:00:18 - 00:03:04:08
and then whatever the product ID is,
so let's say 001.
00:03:06:00 - 00:03:09:00
So the main body of the URL
will be drawn from the setting
00:03:10:04 - 00:03:21:22
and then the suffix on the end
will take us to a specific page.
00:03:24:02 - 00:03:25:07
So next we're going to take a look
00:03:25:07 - 00:03:27:29
at where to actually find the URLs for
00:03:29:03 - 00:03:30:29
certain bits of content on our site.
00:03:30:29 - 00:03:34:21
And we'll start off with content pages
as a review.
00:03:34:22 - 00:03:39:13
Content pages
are things like terms and conditions.
00:03:39:13 - 00:03:43:24
Contact us about those sort
of additional pages that are on your site.
00:03:45:03 - 00:03:47:25
There's a number of preconfigured ones,
or you can create new ones
00:03:48:08 - 00:03:52:22
if you want to find the URL
for a particular page,
00:03:52:22 - 00:03:55:00
just click on edit
next to the page of interest
00:03:56:01 - 00:03:58:09
and then the URL will be shown
00:03:59:01 - 00:04:03:10
and all you need to do
is take the relevant bits of the URL.
00:04:03:11 - 00:04:08:14
So if you want to use that token
that we've been utilizing previously,
00:04:09:01 - 00:04:12:17
then all you need to take is the bit
that tags on the end of your storefront.
00:04:12:18 - 00:04:24:01
URL, so
00:04:24:01 - 00:04:27:01
product or category URL
a little bit different.
00:04:27:13 - 00:04:31:05
They are best identified on the product
landing page themselves.
00:04:32:01 - 00:04:34:08
So if we start by navigating to our
00:04:34:08 - 00:04:39:19
product catalog,
I only have one sample product in here
00:04:40:11 - 00:04:44:20
and if I go in and edit
the product of interest,
00:04:44:20 - 00:04:47:21
you'll see that I have access
to this view product page
00:04:48:09 - 00:04:51:14
button at the top of the screen
and clicking on here
00:04:51:14 - 00:04:54:12
will take you straight to the product
landing page on our storefront
00:04:54:27 - 00:04:59:01
and we see the exact URL that we need to
get to that particular page.
00:05:00:02 - 00:05:01:12
So I've got
00:05:02:06 - 00:05:06:12
the large part of the URL,
which is what's covered in that token.
00:05:06:27 - 00:05:17:07
And then we just need to take the bit
from the end.
00:05:21:03 - 00:05:21:17
Okay.
00:05:21:17 - 00:05:25:18
So next, we'll take a look
at how to build our URLs using the content
00:05:25:18 - 00:05:27:27
templates editor
00:05:29:18 - 00:05:31:24
So I'm going to navigate back to
00:05:34:00 - 00:05:36:09
our header editable content book,
00:05:37:12 - 00:05:40:05
same as we were on previously.
00:05:40:08 - 00:05:41:25
And I'm going to revert this back
00:05:41:25 - 00:05:46:01
to our content template editor.
00:05:49:03 - 00:05:50:03
So in this example,
00:05:50:03 - 00:05:52:10
we'll look at adding hyperlinks
to our header.
00:05:53:05 - 00:05:57:04
However, the same methodology
can be applied to any of the editable
00:05:57:04 - 00:06:01:19
content blocks or the content pages.
00:06:04:02 - 00:06:07:05
So we're going to start off by doing
is just adding a new entry to here.
00:06:07:05 - 00:06:08:02
So I'm just going to say
00:06:08:02 - 00:06:12:18
add content and header item
that will just give us a new item on
00:06:14:13 - 00:06:17:09
a clickable item on our header.
00:06:17:09 - 00:06:20:06
So just as a summary of content
00:06:20:06 - 00:06:23:05
templates, you've likely seen this
in previous videos.
00:06:23:23 - 00:06:27:22
Content templates operate
as a series of nested blocks, so allow you
00:06:27:22 - 00:06:33:01
to build up detailed site content
without the need to input HTML directly.
00:06:34:01 - 00:06:36:09
So some of the available content blocks
00:06:36:09 - 00:06:39:23
are designed to include
URL search and input.
00:06:40:08 - 00:06:44:03
This is things such as buttons or header
items like we can see here.
00:06:45:18 - 00:06:47:15
So they do have a specific interface
00:06:47:15 - 00:06:51:18
which makes identifying your required URL
extremely easy.
00:06:52:24 - 00:06:54:03
So let's take a look at that on here.
00:06:54:03 - 00:06:57:12
If I just start by adding
00:06:57:17 - 00:07:00:26
a new name for the hyperlink,
00:07:01:03 - 00:07:03:11
this is the name that will actually appear
00:07:03:11 - 00:07:05:23
on the head of our self
00:07:07:05 - 00:07:08:03
in the storefront.
00:07:10:01 - 00:07:11:05
I then need to come
00:07:11:05 - 00:07:13:26
over here and select the URL target
00:07:15:10 - 00:07:19:22
so you'll see I have a choice between
products, categories, content pages,
00:07:20:03 - 00:07:24:00
blog entries, or Infigo pages,
which are things like the
00:07:25:00 - 00:07:26:29
the home page or the account page.
00:07:26:29 - 00:07:31:24
For example, with a lot of these
when you click on them.
00:07:31:24 - 00:07:34:12
So if I go for a product, for example,
00:07:34:12 - 00:07:37:10
I then get a search box
appearing over on the right hand side
00:07:37:23 - 00:07:40:19
where I can start
undertaking a filtered search
00:07:40:19 - 00:07:43:15
for the product I want to use.
00:07:43:21 - 00:07:46:06
So for example, we only have one product
in our storefront.
00:07:46:10 - 00:07:49:23
If I start typing that it filters
down the list to show me
00:07:50:08 - 00:07:52:22
matching products.
00:07:53:00 - 00:07:54:18
And if I click on that,
00:07:54:18 - 00:07:59:13
the URL is automatically populated.
00:07:59:13 - 00:08:02:16
So we don't need to go to the separate
product page or anything like that.
00:08:02:16 - 00:08:05:13
It is now created and as soon as we save
00:08:05:21 - 00:08:11:25
that link will be generated.
00:08:11:25 - 00:08:14:19
So let's test
this out. If I go to save and continue
00:08:16:18 - 00:08:20:09
it, then
I'll take a look at our storefront.
00:08:20:09 - 00:08:23:03
You'll see that here is the hyperlink
that we just created
00:08:24:14 - 00:08:26:27
and we can test that out.
00:08:26:27 - 00:08:28:28
And that takes us directly
to that product.
00:08:28:28 - 00:08:33:13
So nice and easy to construct those URLs.
