Show details for Adding basic product navigation to your storefront | ID:BG_018

Adding basic product navigation to your storefront | ID:BG_018

In this tutorial, we will learn how to add basic product navigation to your storefront front-end.

Tutorial Video Transcript

A transcript of our tutorial video, ensuring you can find exactly what you need, when you need it.

You can search this page to find the relevant time-stamp in the video. Also, this text can be used as part of the tutorial search feature.

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.

 

Incomplete