1 00:00:00,180 --> 00:00:07,110 So let's do it, people we have filtering here and I'll say text, then I'm going to go above the water 2 00:00:07,110 --> 00:00:08,850 and make sure that you don't go below it. 3 00:00:09,210 --> 00:00:14,760 And we're going to go with company here, company, company again, for some reason. 4 00:00:14,760 --> 00:00:19,770 I don't know how that company and or, you know, sorry, I should have won that category. 5 00:00:19,770 --> 00:00:21,110 Probably my bad. 6 00:00:21,240 --> 00:00:22,890 So let me leave this comment. 7 00:00:22,890 --> 00:00:24,300 That is going to be the next one. 8 00:00:24,720 --> 00:00:31,170 And we're going to go with category over here and for the category similar to how we have for text, 9 00:00:31,650 --> 00:00:38,280 if the category is not equal to all that, of course, I would want to filter based on that category. 10 00:00:38,280 --> 00:00:38,670 Correct. 11 00:00:39,240 --> 00:00:45,720 But then if the category is all, I wouldn't want to run that coalition because I would want to see 12 00:00:45,720 --> 00:00:48,650 all the categories same like we have with tax. 13 00:00:49,020 --> 00:00:52,760 So the moment we'll click on all, we'll display all the categories. 14 00:00:52,980 --> 00:00:57,980 Now, there might be some different filters here, but as far as categories, we'll display all of them. 15 00:00:58,140 --> 00:01:00,990 So let's go here with category MyState value. 16 00:01:01,200 --> 00:01:06,800 And I'll just say, if it is not equal to all, only then I would want to filter. 17 00:01:07,290 --> 00:01:14,190 And by the way, this needs to be a string of Alegría, or if it is not equal to all, then of course 18 00:01:14,400 --> 00:01:20,220 I would want to do the filtering based on certain category and we just go here again. 19 00:01:20,340 --> 00:01:22,800 10 product is equal to a ten product. 20 00:01:23,160 --> 00:01:27,240 So if we already filtered based on text. 21 00:01:27,570 --> 00:01:33,270 Now, of course, again, we're just adding to this array because we need to keep in mind that once 22 00:01:33,270 --> 00:01:39,030 I'm done with this condition, if this condition is met, I possibly already have less products. 23 00:01:39,270 --> 00:01:40,960 Correct, because I already filtered. 24 00:01:41,220 --> 00:01:46,250 So now, of course, when I'm grabbing the 10 product, this is going to be filtered already. 25 00:01:46,260 --> 00:01:52,980 If, of course, there was a text file and then one by one, we'll just add more of those conditions. 26 00:01:53,280 --> 00:01:59,280 That's why, again, for this scenario, of course, you would want more products in your array, because 27 00:01:59,280 --> 00:02:04,320 otherwise, again, if you start filtering based on, I don't know, six conditions, of course, you 28 00:02:04,320 --> 00:02:10,440 need to keep in mind that if you only have, I don't know, 17 or 20 products, you might run out of 29 00:02:10,440 --> 00:02:13,980 those product quite quickly, the ones that match your condition. 30 00:02:14,250 --> 00:02:17,300 So we go here with them product again, we set up the filter. 31 00:02:17,640 --> 00:02:22,860 There's going to be quite a few repetition here because the functionality essentially is the same. 32 00:02:23,010 --> 00:02:25,580 We're just changing those conditions over here. 33 00:02:25,890 --> 00:02:29,250 And in this case, I will set up the implicit return. 34 00:02:29,610 --> 00:02:38,240 I'll say that I only want the product whose category value matches to whatever I have in the state. 35 00:02:38,700 --> 00:02:41,370 So in here I'll say product and then category. 36 00:02:41,380 --> 00:02:44,490 That is the property that I can find in the object. 37 00:02:44,640 --> 00:02:48,480 And if it is equal to the category beautiful paternalist product. 38 00:02:48,480 --> 00:02:49,050 If not. 39 00:02:49,850 --> 00:02:52,720 And of course, I'm going to remove them from that. 40 00:02:52,730 --> 00:02:53,030 All right. 41 00:02:53,390 --> 00:02:59,480 And again, we're going to navigate to the bigger screen and we should see that once we click on office. 42 00:02:59,840 --> 00:03:07,310 Now, of course, I'm getting those products that have the value of category equal to the office. 43 00:03:07,550 --> 00:03:12,920 And of course, I can combine these filters where if I change something here as well, for example, 44 00:03:12,920 --> 00:03:20,870 if I say, well, then of course I can see the products that start with l hopefully it's clear and of 45 00:03:20,870 --> 00:03:22,860 course we can add more filters. 46 00:03:23,090 --> 00:03:27,680 Now we don't have an option of clearing the filters yet, that's why. 47 00:03:27,830 --> 00:03:30,140 Or you know what, actually we do my bad. 48 00:03:30,220 --> 00:03:31,650 Let me actually showcase that. 49 00:03:31,910 --> 00:03:38,420 Remember, the only thing we're doing with clear filters, we're just setting back to the default. 50 00:03:38,840 --> 00:03:39,290 Correct. 51 00:03:39,470 --> 00:03:45,440 So we don't need to do anything here in the filter product because we'll change those state voters anyway 52 00:03:45,920 --> 00:03:46,910 the moment we click. 53 00:03:47,270 --> 00:03:51,020 So actually, it is going to work my butt once I click notice. 54 00:03:51,380 --> 00:03:54,050 Now I'm setting back to the default. 55 00:03:54,410 --> 00:03:57,650 So category goes back to the default search goes back to default. 56 00:03:57,920 --> 00:04:02,570 And I'm getting the product, which is actually pretty nifty if you think about it. 57 00:04:02,870 --> 00:04:08,200 And we have a category that is done now would want to do the same thing for the company. 58 00:04:08,570 --> 00:04:14,900 Again, we can pretty much copy and paste in this case because functionality is going to be extremely 59 00:04:14,900 --> 00:04:15,340 similar. 60 00:04:15,590 --> 00:04:17,300 We copy and paste now. 61 00:04:17,300 --> 00:04:20,030 Please, please, please make sure that you change the values, though. 62 00:04:20,270 --> 00:04:27,080 So in this case, I'm not looking for a category, by the way, I can right away select in multiple 63 00:04:27,080 --> 00:04:30,710 places and I just need to say company like so. 64 00:04:31,040 --> 00:04:38,300 So if company is not equal to all, then I would want to filter product based on the company value. 65 00:04:38,660 --> 00:04:42,860 So if the company value matches to whatever I have in a state, yes. 66 00:04:42,860 --> 00:04:44,210 Please return those product. 67 00:04:44,210 --> 00:04:44,660 If not. 68 00:04:45,490 --> 00:04:51,110 And of course, that product is removed from my right and essentially I don't display. 69 00:04:51,370 --> 00:04:58,120 So that's why we can go back here and I can say that I would want to see all the products that are made 70 00:04:58,120 --> 00:04:59,320 by IKEA. 71 00:04:59,680 --> 00:05:01,950 If I want to be more specific, I can say, you know what? 72 00:05:01,960 --> 00:05:07,160 Get me the IKEA company and I would want category of bedroom. 73 00:05:07,450 --> 00:05:08,800 And of course, I have one. 74 00:05:08,930 --> 00:05:15,370 So of course, if I search and if I say, you know, get me the items that start with me, of course 75 00:05:15,370 --> 00:05:16,390 I'm going to have no products. 76 00:05:16,410 --> 00:05:16,650 Why? 77 00:05:16,660 --> 00:05:22,780 Well, because I can see that there's only one product and the name starts with E, correct. 78 00:05:23,330 --> 00:05:24,130 All right. 79 00:05:24,510 --> 00:05:26,500 Can clear the filters. 80 00:05:26,500 --> 00:05:27,580 Pretty nifty. 81 00:05:27,850 --> 00:05:30,320 Now, I would want to work on the colors. 82 00:05:30,670 --> 00:05:36,250 Now there's going to be a gotcha with colors because keep in mind that colors is an array. 83 00:05:36,910 --> 00:05:41,740 So each item has the colors, but the colors is an array. 84 00:05:42,070 --> 00:05:47,990 So you have to run one more callback function inside of the filter. 85 00:05:48,400 --> 00:05:56,530 So in here, let's go with common colors and then I'll say if color is not equal to all again, because 86 00:05:56,530 --> 00:05:57,650 there's an option for all. 87 00:05:57,670 --> 00:06:01,280 So then of course I would want to display all the colors. 88 00:06:01,480 --> 00:06:05,500 So if color, by the way, that kind of doesn't make sense. 89 00:06:05,500 --> 00:06:13,690 I guess in my state I have color, but we know that in the product the name is colors, so I'm not going 90 00:06:13,690 --> 00:06:14,410 to change it right now. 91 00:06:14,420 --> 00:06:18,460 Just keep in mind that it's easy to make a small typo. 92 00:06:18,790 --> 00:06:24,100 And I'm going to say, if the color is not equal to all that is, of course, coming from my state, 93 00:06:24,340 --> 00:06:29,560 then of course, again, I would want to go with that product is equal to whatever I currently have 94 00:06:29,560 --> 00:06:32,060 in the right, and I would want a filter. 95 00:06:32,380 --> 00:06:39,460 Now, this is going to be the case where I'm looking for a product and remember, products is an array 96 00:06:39,490 --> 00:06:40,210 itself. 97 00:06:40,450 --> 00:06:46,860 So you kind of just say product colors is equal to something because product color is an array. 98 00:06:47,050 --> 00:06:48,040 So we need to run. 99 00:06:48,040 --> 00:06:50,260 One more method than that is going to be fine. 100 00:06:50,560 --> 00:06:58,300 Where are we go with a return of one product design colors and then I'll run the fine method on this. 101 00:06:58,330 --> 00:06:58,690 All right. 102 00:06:58,960 --> 00:07:05,190 I'll say check in the array if the color matches to the one that is coming from the state. 103 00:07:05,440 --> 00:07:08,740 So that means that that product has that color. 104 00:07:08,920 --> 00:07:11,960 So of course, I will return it now in order to make it shorter. 105 00:07:11,980 --> 00:07:13,090 I'm just going to reference it. 106 00:07:13,090 --> 00:07:17,710 I say and I'll say F.C. is equal to my color. 107 00:07:18,090 --> 00:07:21,130 And that way can we can navigate to the bigger screen. 108 00:07:21,460 --> 00:07:25,510 And there is now, of course, I can see the different colors as well. 109 00:07:25,720 --> 00:07:28,750 If I want to go back to all, I just go back to all. 110 00:07:28,960 --> 00:07:35,350 And then since we always, always, always start from scratch with all the product, then once I set 111 00:07:35,370 --> 00:07:39,850 all this condition is not met and then I'm returning all the products. 112 00:07:39,850 --> 00:07:45,130 I know I've said this already 20 thousand times, but I think it's extremely important that you understand 113 00:07:45,130 --> 00:07:48,610 that because that pretty much is the whole. 114 00:07:49,630 --> 00:07:55,900 Logic behind this whole filtering, everything else here is just details how we filter it, that's it. 115 00:07:56,350 --> 00:08:02,430 And I would also want a filter based on price and the shipping. 116 00:08:02,440 --> 00:08:06,970 So let's go here with price and the shipping. 117 00:08:07,240 --> 00:08:10,290 Now, as far as the shipping, pretty straightforward. 118 00:08:10,300 --> 00:08:16,330 I just want to check whether the shipping value is true, the one that's coming from the state. 119 00:08:16,330 --> 00:08:20,290 If it is true, then I would want to run it against all my product. 120 00:08:20,560 --> 00:08:25,300 And of course, the ones that have shipping, all those ones will be returned. 121 00:08:25,330 --> 00:08:30,130 So in here, we just say if shipping is true, then again we do. 122 00:08:30,130 --> 00:08:36,270 The whole spiel with certain products is equal to 10 products and products. 123 00:08:36,280 --> 00:08:39,360 That's my trade and filter, not filters. 124 00:08:39,370 --> 00:08:40,980 For some reason I keep typing filters. 125 00:08:40,990 --> 00:08:41,620 I don't know why. 126 00:08:42,190 --> 00:08:44,380 And here I say product. 127 00:08:44,380 --> 00:08:52,230 And if product shipping is true, then of course I would want to get those products back. 128 00:08:52,480 --> 00:08:59,530 So if the shipping is true, then I'm returning the product that how the shipping properly equal the 129 00:08:59,530 --> 00:09:02,820 true, if not again, its condition won't be met. 130 00:09:03,040 --> 00:09:09,120 So we're just returning all the product and the same is going to be with the price over here on certain 131 00:09:09,160 --> 00:09:13,480 products is equal to that product filter. 132 00:09:13,870 --> 00:09:17,680 Again, filters, and then we're going to be looking for product. 133 00:09:17,860 --> 00:09:24,040 I'm guessing it's because I have state value filters, but again, that just be my bad typing. 134 00:09:24,040 --> 00:09:24,430 I don't know. 135 00:09:24,820 --> 00:09:32,650 And I'm going to go for a product and I'll say if the product priced properly is less or equal to the 136 00:09:32,650 --> 00:09:35,500 price that is coming from my state. 137 00:09:35,740 --> 00:09:37,720 So as I'm going to be changing this value. 138 00:09:38,530 --> 00:09:44,650 I'm going to be checking for the price probably on the product, and then if the price is less than 139 00:09:44,650 --> 00:09:51,130 I would want to return those products, if not, then I will be excluded from the array product price, 140 00:09:51,130 --> 00:09:55,410 probably less or equal to my current price. 141 00:09:55,810 --> 00:10:00,000 So I say over here and I should be in good shape or not. 142 00:10:00,520 --> 00:10:02,090 Now, of course, we controlling the virus. 143 00:10:02,320 --> 00:10:08,650 Now, there is a big gap, of course, because I think my biggest one was like three thousand and then 144 00:10:08,650 --> 00:10:12,740 the next one is two thousand and the rest of them are below thousand. 145 00:10:12,810 --> 00:10:20,690 And that's why you'll see this kind of long way of getting the products were not only once I get below 146 00:10:20,770 --> 00:10:27,340 thousand, then I'm kind of rapidly removing the products, but then between three thousand and one 147 00:10:27,340 --> 00:10:27,850 thousand. 148 00:10:28,420 --> 00:10:33,670 The difference is not that big because we only have like three or four products or whatever, something 149 00:10:33,670 --> 00:10:34,120 like that. 150 00:10:34,390 --> 00:10:40,350 And Meyera and hopefully it makes sense once I click on Klinefelter's. 151 00:10:40,360 --> 00:10:43,600 Now, of course, I display all the products. 152 00:10:43,810 --> 00:10:51,400 Just keep in mind that we also have the sorting option where if I had the office and the company is 153 00:10:51,400 --> 00:10:59,910 going to be key, I can still support based on A to Z or Z to a more price, lower or prioritized. 154 00:11:00,250 --> 00:11:01,960 So that still works. 155 00:11:02,230 --> 00:11:08,140 And once we're done setting up our product page and of course I would want to work on my car.