This episode is for members only

Sign up to access "Build an E-Commerce Platform" right now.

Get started
Already a member? Sign in to continue
Playing
39. Filtering by price

Episodes

0%
Your progress
  • Total: 8h 42m
  • Played: 0m
  • Remaining: 8h 42m
Join or sign in to track your progress
01. Introduction and demo
9m 42s
0%
02. Installing Laravel, Breeze and Livewire
4m 47s
0%
03. Creating categories
9m 4s
0%
04. Recursively displaying categories
8m 21s
0%
05. Product model and migration
2m 50s
0%
06. Showing a product
7m 50s
0%
07. Product variation setup
10m 26s
0%
08. Creating the product selector
10m 34s
0%
09. Loading child variation dropdowns
4m 28s
0%
10. Faking adding the final variation
9m 33s
0%
11. Setting up product stock
4m 34s
0%
12. Calculating variation stock levels
9m 1s
0%
13. Adding product images with MediaLibrary
8m 50s
0%
14. Creating the product gallery
7m 28s
0%
15. Providing a fallback image
2m 56s
0%
16. Adding media to product variations
3m 37s
0%
17. Creating the cart model
3m 37s
0%
18. Registering the cart service
6m 34s
0%
19. Creating a cart session
11m 4s
0%
20. Showing the cart in the navigation
9m 19s
0%
21. Caching the cart instance
3m 2s
0%
22. Adding items to the cart
14m 1s
0%
23. Creating the notification component
8m 5s
0%
24. Showing the user's cart
6m 50s
0%
25. Outputting cart items
4m 50s
0%
26. Showing variation specifics
8m 8s
0%
27. Updating item quantity
8m 2s
0%
28. Removing an item from the cart
6m 1s
0%
29. Calculating the cart summary
8m 7s
0%
30. Showing the category products page
5m 1s
0%
31. Indexing products in Meilisearch
8m 32s
0%
32. Hooking up products to categories
4m 15s
0%
33. Building the product browser
13m 32s
0%
34. Showing child categories
1m 51s
0%
35. Indexing product variations for filtering
8m
0%
36. Outputting variations for filtering
12m 52s
0%
37. Hooking up product filters with Livewire
7m 48s
0%
38. Filtering products
12m 24s
0%
39. Filtering by price
9m 50s
0%
40. Adding global navigation search
7m 50s
0%
41. Handling products that are not live
3m 22s
0%
42. Price range category fix
1m 18s
0%
43. Scaffolding the checkout page
8m 6s
0%
44. Listing shipping options
9m 3s
0%
45. Calculating the cart totals
2m 52s
0%
46. Validating the account form
9m 10s
0%
47. Validating the shipping form
5m 47s
0%
48. Saving the shipping address
8m 4s
0%
49. Selecting a saved shipping address
6m 39s
0%
50. Fix shipping address error for non authenticated users
1m 7s
0%
51. Redirecting if the cart is empty
2m 42s
0%
52. Checking for quantity changes
7m 11s
0%
53. Syncing if quantities have changed
11m 59s
0%
54. Flashing a message when quantities have changed
5m 48s
0%
55. Setting up for orders
5m 17s
0%
56. Creating an order
13m 24s
0%
57. Attaching variations to order
6m 13s
0%
58. Reducing stock after ordering
2m 56s
0%
59. Meilisearch filter query fix
1m 33s
0%
60. Showing the order confirmation page
7m 39s
0%
61. Attaching orders for registering guest users
5m 17s
0%
62. Scaffolding the orders page
5m 30s
0%
63. Filling in order variation details
5m 24s
0%
64. Returning the order status
4m 39s
0%
65. Detecting order status changes
10m 49s
0%
66. Sending the order status change email
5m 12s
0%
67. Sending an order confirmation email
2m 47s
0%
68. Handling deleted cart records
4m 44s
0%
69. Transferring the guest cart
2m 44s
0%
70. Creating a presenter for the order status
4m 31s
0%
71. Setting up Stripe
3m 43s
0%
72. Creating and updating a PaymentIntent
16m 21s
0%
73. The Stripe card form
3m 35s
0%
74. Validating before payment
5m 34s
0%
75. Submitting a payment
6m 40s
0%
76. Checking for a successful payment
5m 47s
0%
77. Handling Stripe client errors
3m 11s
0%
78. Entangling Stripe customer data
2m 18s
0%

Transcript

00:00
We're now going to work on our price slider. I'm going to head straight over to the markup for this and just work out the kind of information that we need to get this to work. So as we can see, we've got an input type of range.
00:12
This requires a minimum, which we've set to zero and a maximum. Now, this maximum needs to be the maximum price or the highest price within this category. Now, behind the scenes, I've gone ahead
00:23
and changed Nike Air Force 2 to $120 and I've gone ahead and in my editor or my terminal, run phpscout import. We need to make sure that we run that artisan command to update this in Metasearch so we can actually query it properly.
00:40
So once you've got two different products of two different prices, the first thing that we really need to do is find out this max. Now, just to demo this out, let's go ahead and set this to something like $50,000.
00:51
And let's go over to our product browser and create our public property, which will keep track of this value within this slider. So I'm going to go ahead and call this price range. We could technically put this information inside of our query filters,
01:03
but we'll separate it out just so it's a little bit easier. Now, the max in here, we don't know at the moment. We're going to set this to a default of the highest priced item, but we don't know what that is just yet or how to get that.
01:16
So just while we're demoing this out or just while we're playing around with this, let's do that print R again just to grab out the price range just so we can see that and yeah, so let's go ahead and use print R here. There we go.
01:33
So the first goal is to work out the maximum price item and put that within the slider so we can see that value. So to do this, let's go down or we can do this amount actually. And let's go ahead and say this price range and max and set that to this
01:52
category, grab the product from this category and then go ahead. And because this is a Laravel collection, we can use the max helper or the max method on this to grab out the max price range. So that's going to set that by default into that price range of max.
02:11
If we give that a refresh, sure enough, we've got one hundred and twenty thousand or twelve thousand. Sorry for one hundred and twenty dollars. Now we've done this in here.
02:19
But what we also need to do is pass this down so we can put this within here. The max price is always going to be a static value. It's never going to change because we're only ever going to have one highest product price regardless of the filters
02:33
that we apply. So what we can actually do is we can move this down. Into our search just here, so let's put it down just under here and then that should be just about it, we'll need to make a tweet to this in a minute. But what we can also do is create out a variable called max price,
02:54
set that to here, the maximum price within that category, set that as an initial value on our price slider, but also pass down the max price on its own so we can add that to our HTML slider. Let's say max price.
03:09
So first thing to do, grab the max price of any of the products, not the products that we filtered, because that's going to vary. We want the overall maximum price. Set that as the default value,
03:20
default value to the price range slider and pass the max price down. And with that max price, we're going to put that into here. Like so. And what we can actually do now is we can
03:32
update the value of the slider in here by using the money helper and then saying price range max, because we know that's going to be filled now, because it's going to be set initially to the maximum highest price product. So if we click on that, we now get $120 in here and we get our slider.
03:50
And if we just inspect this, you can see that we've got a max of one hundred or twelve thousand. So the only problem is we're not hooking this slider up at the moment. We can change the value of it, but we're not hooking this up anywhere.
04:01
So that's very easy. Just with wire model, we can go ahead and set that to price range. And I think we'll just say dot max. Let's go over, give that a refresh and there we go.
04:12
So by default, this is now set to one hundred and twenty dollars. And if we move this down, it updates. But you can see that when I adjust this, it just bumps right back up to the star.
04:25
And the reason for that is down here, we're always setting this on every render to the max price. This is going to be one hundred twenty dollars wherever we move it. So what we want to do is we want to say, well, if it's already got a value.
04:37
So if the price range max already has a value, then use that. Otherwise use the max price. So now we start off with the maximum price, but then we can adjust this further down and filter by max price.
04:51
So now that we've got that maximum price in there, of course, what we can do is apply this to Melissa to only show products with that in there. So just under where we apply our filters, let's go ahead and say if this price range max, so we only want to do this if we've got
05:09
something set in there, which we should always have, then we're going to say options filter, which remember we've already set. So we're going to have to concatenate onto this. And then we want to set that something like and price.
05:24
And we want to say less than or equal to a certain value. Let's just set that to ten thousand for now, just so we can test this out. And if we come over and give this a refresh, that doesn't look like it's working at the moment.
05:40
So let's just adjust this maybe and we get undefined a raky filter. That's just because we're only applying this if we've got filters. Therefore, at this point it doesn't exist. So just to get around this, let's go ahead and always add in a filter key.
05:55
But we'll set this to null. We won't set it to an empty string because Melissa won't like that. We'll set it to null to start with. So if we come over now and we filter this,
06:03
this should now be being sent down to Melissa. Great. So we now end up with this error and we can demo this by just dying and dumping on options and filter. And what we will see is if we come back
06:18
and give this a refresh, get rid of this and then pull that back. When we slide this, because we don't have any variation filters, this filter starts with the and operator. So that's not what we want.
06:33
We want to kind of get rid of this and operator before we start sending it through if there aren't any filters in there. Now, there's probably a much cleaner way to do all of this. But let's just add this in line here.
06:45
When things start getting a little bit more complex, we know it's time to refactor, but we'll just keep it simple. So let's say if there are filters already or even if options filter is in there already and we could use an is set on that to be a little bit more explicit.
07:03
Then we want to go ahead and concatenate on and to this. So let's concatenate on. Wrap this in brackets, we'll go over this in a second. Otherwise, an empty string.
07:16
So basically set the filter if we already have filters with a prefix of and and that would be like that and that. And otherwise don't prefix anything. And we could actually get rid of that space there and do that.
07:33
So we end up with and before price and after what we've already got in our filters, otherwise we just end up with price on its own. So let's try this out. Give this a refresh and let's just close this off and just try to filter something.
07:47
And yeah, price is not filterable. So we need to go ahead and add this over in postman. So let's head over to postman. There's going to be an easier way to do
07:55
this a little bit later directly within Laravel. But let's add price in there and send that across. And let's go back over and try this again. And we should be there.
08:04
So let's scroll down and there we go. Great. So if we just sort of go as a max price of one hundred and one eighty, of course, that includes the Nike Air Force one. But if we go all the way up to the top to one twenty, we should include the other shoe.
08:18
Now we don't at the moment because we've said greater than or equal to this hard coded value that's going to be the actual price range slider. So as soon as we fill this in, we should be good to go. So let's say price range and max.
08:32
And that's getting a little bit long, but not to worry. If we come over now and we pull this down, that is looking good. So we can really filter down. Now we get to the point where there are
08:42
going to be no products that match our filter and we can start to clear up some of these filters in here, which we'll do in a second. But at least now our price range slide is working. And of course, if you had more products, this would be a little bit more dynamic.
08:55
OK, so we've got our price range slider working with a little bit of complexity here, which, of course, we can refactor later. Let's go over to our product browser, get rid of our price range dump out here. And let's just go down to the point where we don't have any products in.
09:10
And let's get rid of these two things here. So the condition that we want to show our filters on is if we actually have any products, it makes sense to only show this if we have products. So let's just wrap all of this in an if
09:22
statement and we'll just say if products and count. It's really as simple as that. So let's pull this for each in and just end that for end that if there. And then when we go down to the point where we don't have any products,
09:37
there we go, found no products matching your filters. And of course, you can output anything there if you want to. OK, there we go. There is our basic price slider now working with that request over to Metasearch.
78 episodes8 hrs 42 mins

Overview

Build a robust e-commerce platform with a Laravel and Livewire. Features products with unlimited and flexible variations, a product browser with filters and price range slider, global product search, guest checkout, shipping and payment implementation, order status tracking and more.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!