1
00:00:00,210 --> 00:00:05,520
Before we can start working on a page nation filtering logic we would need to add more fields to our

2
00:00:05,520 --> 00:00:08,900
product content type and also just create more product.

3
00:00:09,360 --> 00:00:12,100
Technically you don't have to do it but just think about it.

4
00:00:12,120 --> 00:00:17,520
If you're just gonna have two products there's not going to be much filtering as well as your nation.

5
00:00:17,520 --> 00:00:23,430
Now there is a catch though remember we could not create a new content type or update our current content

6
00:00:23,430 --> 00:00:26,280
type in production when it's essentially on Heroku.

7
00:00:26,730 --> 00:00:33,540
So first we would need to add our fields to our local strappy project and only then push it to production.

8
00:00:33,540 --> 00:00:36,220
And of course after that we can add more product.

9
00:00:36,360 --> 00:00:42,070
If you haven't deployed your project of course then you'd need to add everything locally.

10
00:00:42,120 --> 00:00:47,400
Just please keep in mind that if you're going to add more products and eventually you're gonna push

11
00:00:47,400 --> 00:00:50,820
it to production all your data is gonna be wiped out.

12
00:00:51,120 --> 00:00:54,880
So technically you don't have to do this if you're just using a local setup.

13
00:00:55,190 --> 00:01:02,700
However if you have already production setup you need to first get the local project add extra fields

14
00:01:02,760 --> 00:01:08,840
then we're going to be adding and also then you would need to push it to production and add more products.

15
00:01:08,850 --> 00:01:14,770
Then one more thing that I would like to add if for some reason you don't have the local project anymore.

16
00:01:14,850 --> 00:01:16,410
Let's say you deleted it.

17
00:01:16,530 --> 00:01:24,360
You can access the project that was deployed on Heroku with a command of Heroku get colon clone and

18
00:01:24,360 --> 00:01:26,610
then whatever is your app name.

19
00:01:26,700 --> 00:01:31,630
Now you can find the app name if you had to Heroku then this is gonna be the app name.

20
00:01:31,720 --> 00:01:37,260
So in my case this is going to be vintage tech store react API and just to underscore the fact that

21
00:01:37,260 --> 00:01:40,610
we wouldn't be able to do this in production if we had to.

22
00:01:40,620 --> 00:01:46,260
My production application you can notice that the text is gonna say this plugin is only available in

23
00:01:46,260 --> 00:01:52,280
development so I cannot add extra fields when my project is already in production.

24
00:01:52,440 --> 00:01:55,710
So we would need to first get our local project.

25
00:01:55,710 --> 00:02:00,410
And again if you have your local project awesome you can right away start working on it but I'm going

26
00:02:00,410 --> 00:02:06,420
to show you how we can run the command and that way we can get the same exact project which is already

27
00:02:06,480 --> 00:02:07,580
in deployment.

28
00:02:07,620 --> 00:02:10,690
So what I'm gonna do is I'm going to navigate the desktop.

29
00:02:10,980 --> 00:02:12,410
You know what let me start from scratch.

30
00:02:12,810 --> 00:02:14,090
So I'm going to click on Terminal.

31
00:02:14,100 --> 00:02:15,810
I'm gonna zoom in.

32
00:02:15,810 --> 00:02:27,760
I'm gonna type C D stop and then the command was Heroku get call and clone Roku get clone.

33
00:02:27,810 --> 00:02:32,810
Then we have dash a and and then whatever is your app name again.

34
00:02:32,900 --> 00:02:39,940
Let me go back to actual dashboard in Heroku then copy and paste my app and then of course I'm gonna

35
00:02:39,950 --> 00:02:41,030
have access to the app.

36
00:02:41,560 --> 00:02:41,910
OK.

37
00:02:41,930 --> 00:02:49,070
Once the app has been downloaded to your machine course you would need to open up the text editor drag

38
00:02:49,070 --> 00:02:50,110
and drop.

39
00:02:50,150 --> 00:02:56,030
I'm going to maximize this right now and then we would need to install all the dependencies again so

40
00:02:56,030 --> 00:03:04,350
npm install and right away I'm going to set up my admin so I'm gonna write NPM run develop.

41
00:03:04,400 --> 00:03:06,540
Now that might take a bit of time.

42
00:03:06,560 --> 00:03:12,260
So what I'm going to do is I'm going to resume the video once my admin is available.

43
00:03:12,260 --> 00:03:18,200
Once our admin has been set up I'm gonna bravely navigate to local host thirteen thirty seven forward

44
00:03:18,200 --> 00:03:21,350
slash admin and we can quickly do that by command.

45
00:03:21,350 --> 00:03:23,510
Clicking There you go.

46
00:03:23,510 --> 00:03:30,830
And then again if you follow the same steps as I did essentially when we got the new project from the

47
00:03:30,830 --> 00:03:36,560
actual Heroku then you would need to set up a new ad then of course if you just kept your local project

48
00:03:36,920 --> 00:03:38,380
then you wouldn't need to do that.

49
00:03:38,390 --> 00:03:41,480
But in my case I would need to set up a new admin again.

50
00:03:41,480 --> 00:03:46,280
So John some kind of simple user name and password.

51
00:03:46,280 --> 00:03:47,210
Here we go.

52
00:03:47,210 --> 00:03:48,750
Dummy e-mail.

53
00:03:48,770 --> 00:03:51,890
John Doe at a gene mental dot com.

54
00:03:51,890 --> 00:03:56,260
We're gonna click on already to start and then we're looking for the content type.

55
00:03:56,660 --> 00:04:02,870
I have to tell you honestly that I already added to my product a category on the type and free shipping.

56
00:04:02,960 --> 00:04:08,750
So this is essentially you'd need to do now I'm just gonna show you with some kind of dummy extra field

57
00:04:09,050 --> 00:04:14,360
how that would work but please keep in mind you're going to be looking for category which is a string

58
00:04:14,600 --> 00:04:18,620
and then we're gonna be looking for free shipping which is going to be boolean.

59
00:04:18,640 --> 00:04:24,620
All that is going to look like well for the category I'm gonna add either phone computer and radio.

60
00:04:24,620 --> 00:04:31,180
So as I'm adding new product these are gonna be my category options and also open display all.

61
00:04:31,310 --> 00:04:36,020
So then once we have our filtering if I want to see the phones of course I'm gonna be able to see the

62
00:04:36,020 --> 00:04:40,980
phones if I want to see the computers that I'm going to be able to see the computers so that again is

63
00:04:40,980 --> 00:04:44,030
a category and I just added type of string.

64
00:04:44,030 --> 00:04:47,050
And then for it be shivering we just have a boolean.

65
00:04:47,150 --> 00:04:53,360
So in that case if I click on free shipping then that shows me only the phones in this case that have

66
00:04:53,360 --> 00:04:54,250
free shipping.

67
00:04:54,440 --> 00:05:00,050
If I'm going to select Category 2 all product then this is just going to show me all the products that

68
00:05:00,050 --> 00:05:01,550
have these free shipping.

69
00:05:01,550 --> 00:05:07,010
And again this was added as a boolean and my name was free shipping but of course you can call this

70
00:05:07,010 --> 00:05:08,120
how well you'd want.

71
00:05:08,120 --> 00:05:12,230
Just remember when we're going to be setting up the logic to use your naming.

72
00:05:12,290 --> 00:05:17,270
So I'm going to show you if you'd would want to add extra field again I'm going to go with string but

73
00:05:17,270 --> 00:05:22,880
you'd need to add both of them to category as well as a free shipping and I'm just going to call this

74
00:05:22,940 --> 00:05:29,620
extra extra underscore field because I'm not going to use it I just want to show you how it's gonna

75
00:05:29,640 --> 00:05:36,060
look like once we push this back to production I'm gonna click it done then it is important that you

76
00:05:36,060 --> 00:05:38,270
save it so make sure that you save it.

77
00:05:38,370 --> 00:05:40,110
This is going to restart of course.

78
00:05:40,110 --> 00:05:44,850
So we're just going to wait a bit and then once everything has been set up then again we're going to

79
00:05:44,850 --> 00:05:46,790
have to push this back to her.

80
00:05:46,790 --> 00:05:47,560
OK.

81
00:05:47,640 --> 00:05:52,680
And the way it's gonna look like I'm gonna navigate back to my project I'm going to stop the dev server

82
00:05:53,040 --> 00:05:56,910
then we're going to add our changes so get add we're gonna add everything.

83
00:05:56,910 --> 00:06:03,050
And by the way we can clear just so we can have the brand new terminal and then I'm gonna go with get

84
00:06:03,060 --> 00:06:04,240
commit.

85
00:06:04,440 --> 00:06:15,470
Then the message is gonna be extra fields added and then the command was get push Heroku master so get

86
00:06:15,470 --> 00:06:22,270
push you roll call master mages double check whether that was the correct command.

87
00:06:22,270 --> 00:06:28,990
Yep we have get push that you Heroku master again this might take a bit of time so I'm going to resume

88
00:06:28,990 --> 00:06:35,980
the video once my project has been successfully pushed to production and once our project has been successfully

89
00:06:35,980 --> 00:06:39,240
pushed to Heroku then we can close.

90
00:06:39,250 --> 00:06:44,800
I guess our local admin because we're not going to use this anymore than we can of course navigate to

91
00:06:44,800 --> 00:06:47,710
our admin that is in the production.

92
00:06:47,710 --> 00:06:53,800
So let's click on admin again we're gonna open up the admin and then if you'd want to add a new product

93
00:06:54,100 --> 00:06:59,180
which we can do if we navigate the content types and then products you can notice that as you're going

94
00:06:59,180 --> 00:07:04,540
to be adding a new product you're gonna have these extra fields you're going to have one for free shipping

95
00:07:04,830 --> 00:07:08,830
you're going to have one for category and then you're going to have one for extra field.

96
00:07:08,860 --> 00:07:13,630
Now of course don't use the extra field items just to show you how everything is going to work but most

97
00:07:13,630 --> 00:07:18,730
importantly work with free shipping and then the category not just to show you what I did.

98
00:07:18,730 --> 00:07:25,290
Let's say if this was the radio then my category was radio and free shipping for this guy was on.

99
00:07:25,360 --> 00:07:28,760
Now if let's say we're gonna go to I don't know.

100
00:07:28,930 --> 00:07:34,560
One of the computers I guess can navigate to a next page and then I had a computer.

101
00:07:34,630 --> 00:07:41,020
Then of course this one again had free shipping was on but the category was in this case computer.

102
00:07:41,150 --> 00:07:46,840
Again let me save that one and I don't know let me maybe check the phone where in this case the free

103
00:07:46,840 --> 00:07:50,450
shipping was off but then the category was phone.

104
00:07:50,500 --> 00:07:54,410
So once you have the setup once you add as many products you would want.

105
00:07:54,580 --> 00:07:58,810
And again the more products you're going to add the more interesting is going to be filtering.

106
00:07:58,810 --> 00:08:04,510
Once you do that once you have the product then you're ready to proceed to next videos where we're going

107
00:08:04,510 --> 00:08:05,650
to set up our logic.