00:00:13:29 - 00:00:14:10
In this
00:00:14:10 - 00:00:18:07
tutorial we're going to learn
how to add basic product navigation
00:00:18:08 - 00:00:21:20
to your storefront frontend.
00:00:21:20 - 00:00:23:08
So what I mean by this, if I come to
00:00:23:08 - 00:00:28:23
a more complete version of our storefront
is if you from your home page,
00:00:28:29 - 00:00:32:11
you want to be able to sort of
maybe hit a button
00:00:32:12 - 00:00:35:15
from the home page
or hit this product link here.
00:00:35:29 - 00:00:39:05
And that will take you to a navigable list
of your categories
00:00:39:14 - 00:00:47:07
and your associated products.
00:00:49:26 - 00:00:51:16
So firstly, we must establish
00:00:51:16 - 00:00:54:27
the new URL for the category page
that we want to display.
00:00:55:12 - 00:00:58:23
So coming again to our completed one,
you can see that when I clicked
00:00:58:24 - 00:01:02:06
on the product page,
which is going to my category list,
00:01:02:17 - 00:01:05:04
it's actually taking me
to one specific category.
00:01:05:12 - 00:01:07:24
And that's this section of the
you are out here.
00:01:07:24 - 00:01:13:02
So we have /c/2,
which is the category number.
00:01:14:02 - 00:01:16:22
And before
we can link to a specific category
00:01:16:22 - 00:01:20:08
or a specific product, whatever
we need to do, we need to establish
00:01:20:15 - 00:01:23:13
what this additional portion of the URL
00:01:23:13 - 00:01:31:28
is going to be.
00:01:32:27 - 00:01:36:12
So we're going to start off
by navigating to the desired category
00:01:36:12 - 00:01:39:23
within the backend
of our Infigo administration.
00:01:40:17 - 00:01:43:07
So if I go to catalog
00:01:43:07 - 00:01:46:14
categories and manage categories
00:01:50:23 - 00:01:51:19
here, we'll see a list
00:01:51:19 - 00:01:54:27
of all the categories that we have
available on this particular storefront.
00:01:54:28 - 00:01:56:29
In our case, it's just one.
00:01:56:29 - 00:02:00:07
So if I then go to the edit section
on the right hand side
00:02:03:08 - 00:02:07:14
if I go to view the product page,
which you actually showed me that category
00:02:07:14 - 00:02:11:12
on the storefront,
you can see that it's /c for category.
00:02:11:26 - 00:02:14:16
And then /3.
00:02:17:20 - 00:02:18:05
Okay.
00:02:18:05 - 00:02:20:17
So we've kept that number in mind.
00:02:20:27 - 00:02:25:16
What we're also going to do is get it
to show this category on the homepage.
00:02:25:29 - 00:02:28:27
And by clicking this
it will essentially add a link
00:02:29:21 - 00:02:33:20
directly to those category products
on a sort of featured
00:02:33:20 - 00:02:37:13
category section or feature product
section of our homepage.
00:02:38:09 - 00:02:40:18
And as always,
if we want to control the order
00:02:40:18 - 00:02:45:21
in which
those featured items are displaying,
00:02:45:21 - 00:02:50:16
then we can do that
with this display order option here.
00:02:52:14 - 00:02:56:28
I'm going to save.
00:02:56:28 - 00:03:00:02
And what we're going to do
next is create a direct link
00:03:00:02 - 00:03:03:17
to this category page
from the page header.
00:03:04:06 - 00:03:07:03
So what I mean by this,
just to come back to one of our
00:03:08:21 - 00:03:10:04
more complete storefronts here,
00:03:10:04 - 00:03:13:10
is that when we click on
one of these links within the header,
00:03:13:17 - 00:03:17:25
we wanted to take
us to this category page.
00:03:18:26 - 00:03:20:12
So if I start off by going to
00:03:20:12 - 00:03:24:26
content management, editable content,
00:03:25:24 - 00:03:28:21
and then what we want to
change is the header section.
00:03:28:21 - 00:03:31:04
So the links within the actual header
of our web page.
00:03:31:21 - 00:03:34:15
So if I navigate to the header
00:03:34:15 - 00:03:37:19
field within section one,
which is general,
00:03:38:27 - 00:03:42:13
I'm going to edit on the right hand side.
00:03:44:12 - 00:03:47:24
Now, as we've seen in previous videos,
this header section
00:03:47:24 - 00:03:51:23
here is already pre-populated
with a whole range of code
00:03:52:15 - 00:03:56:17
which is setting up the buttons
that we have available on the header,
00:03:57:09 - 00:03:59:21
what they're linking to,
00:03:59:21 - 00:04:03:00
what logo is being used, various
bits of information.
00:04:04:12 - 00:04:08:17
What we're going to do in this example
is we're going to use the product button
00:04:08:17 - 00:04:14:07
which is already present in this
in this code here.
00:04:14:17 - 00:04:18:08
And so if I navigate
down to where it says product
00:04:20:21 - 00:04:23:02
and we'll
see at the moment if I look at the URL,
00:04:23:02 - 00:04:26:19
that product is using it
saying just https://academy.infigo.net/.
00:04:26:19 - 00:04:31:03
Now that's a token
which is being utilized there.
00:04:31:03 - 00:04:34:24
So a token is,
as we've discussed in previous tutorials,
00:04:34:24 - 00:04:39:16
that's sort of a bit of information
which is drawn from elsewhere in Infigo
00:04:39:17 - 00:04:43:01
or set somewhere else in Infigo.
00:04:46:27 - 00:04:48:20
And what we're going to do is just amend
00:04:48:20 - 00:04:52:25
the URL that's being utilized
so we can retain the storefront URL,
00:04:53:02 - 00:04:58:09
that's the actual URL of our storefront,
which we set in a a different tutorial.
00:04:58:22 - 00:05:03:15
However, we can place an amendment
on the end of this just to make sure
00:05:03:15 - 00:05:06:27
that we're going to the correct page
with within that storefront.
00:05:07:23 - 00:05:11:03
So our category number
that we want was category number three.
00:05:11:15 - 00:05:12:11
So I can say
00:05:13:29 - 00:05:17:17
/c for category
00:05:18:05 - 00:05:20:04
and then three
00:05:24:27 - 00:05:27:10
if we if we save
00:05:27:10 - 00:05:29:17
and then I'm going to go
and view my public store
00:05:30:27 - 00:05:32:29
and then I'm going to test
what we've just done there
00:05:33:00 - 00:05:35:19
by clicking on the product
icon on our header.
00:05:36:29 - 00:05:39:07
And you can see that takes us directly
00:05:39:07 - 00:05:45:09
to that category page.
00:05:46:25 - 00:05:48:02
So the eagle eyed among you
00:05:48:02 - 00:05:52:14
might notice that our URL in the address
bar has a double forward slash.
00:05:52:29 - 00:05:57:20
Now we're still able to reach the page
that we want, but it's not quite ideal.
00:05:58:03 - 00:06:01:22
And the reason that's happened is it's
just the way I've formatted the URL
00:06:02:29 - 00:06:05:21
that we constructed in the Editable
00:06:05:21 - 00:06:08:16
Content tab.
00:06:08:21 - 00:06:13:28
So if we navigate back to that step
and show you how to fix it.
00:06:14:08 - 00:06:17:02
So the reason this has happened is down
00:06:17:02 - 00:06:22:09
to this https://academy.infigo.net/ token
that I've utilized elsewhere
00:06:22:24 - 00:06:25:06
in that URL specification.
00:06:25:06 - 00:06:28:03
Now the https://academy.infigo.net/ token is utilizing
00:06:29:03 - 00:06:32:29
information that we've specified
elsewhere in Infigo, and it's a setting
00:06:32:29 - 00:06:37:27
which is within the configuration section
settings and general settings.
00:06:38:18 - 00:06:40:04
I've opened this up on a separate tab
00:06:42:06 - 00:06:43:14
within the general settings,
00:06:43:14 - 00:06:45:18
we have a storefront URL section
00:06:47:21 - 00:06:50:12
and that's the information
it's going to be retrieving
00:06:50:25 - 00:06:53:14
if we're using that token
00:06:53:14 - 00:06:56:04
as part of generating our URLs.
00:06:56:19 - 00:07:00:13
So you'll see that there's a
a forward slash on the end of
00:07:01:21 - 00:07:03:28
the URL of entered here.
00:07:03:28 - 00:07:06:19
And then if I go back to my editable
00:07:06:19 - 00:07:10:19
content for my header, you'll see that
I've added an extra forward slash.
00:07:10:20 - 00:07:12:29
And that's how we ended up
with the double forward slash.
00:07:14:03 - 00:07:17:21
So I could either
remove the forward slash from here
00:07:19:09 - 00:07:23:01
or I could remove it from our
00:07:23:27 - 00:07:25:19
our header details.
00:07:25:19 - 00:07:28:12
Either one is fine.
00:07:28:28 - 00:07:36:23
I'll just remove it from the setting here.
00:07:40:27 - 00:07:43:29
Now what you'll notice in the main
difference between the other storefront
00:07:44:00 - 00:07:48:13
that I've been comparing
this against is the one we've just made.
00:07:48:13 - 00:07:51:16
Doesn't have any additional navigation
over on the left hand side.
00:07:52:01 - 00:07:56:04
So that product that we've created is just
going straight to that categories page.
00:07:56:26 - 00:08:01:02
However, if we have multiple categories
products in different categories
00:08:01:20 - 00:08:04:13
at present,
we can't easily navigate between these.
00:08:04:28 - 00:08:08:25
Whereas with the other site
that I keep referencing,
00:08:08:25 - 00:08:12:01
we do have different
category selections available.
00:08:13:01 - 00:08:13:13
So what we
00:08:13:13 - 00:08:17:10
might want to do next is change
some of our settings to get these kind
00:08:17:10 - 00:08:21:26
of capabilities, to get these visuals
where we can switch between categories.
00:08:23:10 - 00:08:26:20
So adjustments can be made to
how category pages are displayed
00:08:26:28 - 00:08:30:13
within the Infigo admin area.
00:08:30:17 - 00:08:33:26
If I click on catalog
00:08:34:20 - 00:08:36:02
categories
00:08:36:02 - 00:08:41:25
and managed categories, I'm again
going to go in edit
00:08:41:25 - 00:08:44:28
the category that we've been working up
00:08:47:19 - 00:08:50:07
and then the last tab
that we have available on
00:08:50:07 - 00:08:52:21
this screen is display settings.
00:08:53:22 - 00:08:56:02
So I'm going to come over to that
one there.
00:08:56:02 - 00:08:59:18
Now, there's numerous settings
available to change the visual appearance
00:08:59:18 - 00:09:02:21
of the categories, pages
like we have here.
00:09:02:23 - 00:09:05:22
This is one of our categories pages.
00:09:05:22 - 00:09:09:17
So these include settings
such as let's take a look down.
00:09:09:17 - 00:09:11:10
We've got page size.
00:09:11:10 - 00:09:12:11
So that will control
00:09:12:11 - 00:09:15:16
the number of products that are displayed
when you're viewing a category.
00:09:16:07 - 00:09:18:25
So maybe I'll turn that
if I want to view more products.
00:09:19:29 - 00:09:21:20
We've got breadcrumbs.
00:09:21:20 - 00:09:23:29
So breadcrumbs are
00:09:23:29 - 00:09:26:06
things that allow you to show a path
00:09:26:06 - 00:09:30:02
through the category tree from your home
page to your current position.
00:09:30:23 - 00:09:32:20
So go into our more complete storefronts.
00:09:32:20 - 00:09:34:23
Again, as an example.
00:09:35:01 - 00:09:37:12
You can see that
when I'm on my category page,
00:09:37:22 - 00:09:42:19
I have this top and in my first category, that's our breadcrumbs.
00:09:43:01 - 00:09:44:10
Quite short at this stage.
00:09:44:10 - 00:09:49:26
But if we started having subcategories,
you see how that would build up.
00:09:50:27 - 00:09:53:00
So I might say that we want to show
00:09:53:01 - 00:09:55:17
breadcrumbs.
00:09:57:17 - 00:09:59:18
Now, I'm not going to go through
every single option.
00:09:59:19 - 00:10:01:27
A lot of them are quite self-explanatory.
00:10:01:27 - 00:10:06:25
However, I am going to go show
subcategories as sections and show.
00:10:06:25 - 00:10:09:11
Subcategory navigation.
00:10:09:11 - 00:10:13:27
So subcategory navigation that displays
the additional navigation list
00:10:13:27 - 00:10:16:16
that we've seen in the normal complete
version of the storefront.
00:10:17:10 - 00:10:19:20
So allows us to navigate
between categories
00:10:19:20 - 00:10:28:12
from within the categories page itself,
save and continue to apply those updates.
00:10:28:27 - 00:10:35:01
And then I'm going to go
and refresh my storefront.
00:10:35:01 - 00:10:35:19
And you can see
00:10:35:19 - 00:10:38:27
now that we have the category navigation
appearing over the left
00:10:38:28 - 00:10:42:02
hand side, there's only one category
on this particular storefront.
00:10:42:02 - 00:10:44:21
Hence the lack of options.
00:10:44:21 - 00:10:49:06
We have our breadcrumbs in place
and we can't see it based on the amount of
00:10:51:04 - 00:10:52:06
products that we have.
00:10:52:06 - 00:11:01:06
But we now will see
eight products appearing on this page.
