Hi there and welcome back.
In the previous video, we already made some progress here, we were able to get all the selected values
from the filters.
And now in the next few videos, we are going to update the product image, the order details and the
final price.
So let's get started with the order details.
Let's inspect these elements to see how they are.
If you go inside here, you will see that I already laughed a span with some ideas for you.
So the first one is result dash style.
I already got the IDs of these elements.
You can go inside each of them to see or go to the HTML file.
I already got them and I have them right here.
So I need to send those values to these elements so I can fill the order details.
So for this, we are also going to create a function so we can we use it later, because when we change
any of the filters, we are going to update the order details.
So let's create another function called update.
Order.
Details.
So what we need to do here when we go inside this function.
It's just selecting each of these elements and.
Just putting some value inside their HDMI out, so using Jay Quarrie.
We can do it like this.
Dot h dumble.
And then we can do the same thing for the others, so for the quality.
For the quantity and for the color.
All right, so every time we update the parameters, it is a good idea to update the order details.
So instead of sending the value to the console or if you want to keep it and delete it later, that's
fine.
But besides sending the values to the console, every time we update the parameters, we can also update
the order details right after so we can do it like this.
So every time we run this function at the end, we are also going to update the details pretty good.
Now, let's just before we send the actual values, because we are going to need to do a little trick
to get these values.
So before we do this, let's just do some tests.
So I'm just going to write like test one, two, three, four, just so we can see if the functions
are working.
I think this is a very good practice.
So you don't get lost if you write a lot of code and when you test it doesn't work, it's harder for
you to spot where you made the mistake.
So let's do this step by step.
So what's going to happen when we load the page?
We are going to run this function, update programs.
So we are going to update the parameters based on the filters, send this to the console so we can see.
And at the end, we are going to update the order details.
So if everything is right here, we are going to see these text.
In the order details, so let's save this.
Refresh the page.
So as you can see, this seems to be working well, so now what we need to do is instead of sending
these test values, we send the actual values inside.
So now, based on what we have inside the search forums, variable, how do we go to this, to the actual
text inside?
So let's start with the quality.
This is a better example to get started, because in the quality, we we don't have this basic 150 G's.
We just have this value, this Q 150.
So how do we turn this into the text?
Because here this is the order details for the customer.
We can't send a code here.
We can't send you one fifty.
We need to send the actual text for the quality, the same text that's inside the filter.
So if you want, you can use that selected thing that we just did in the previous video.
But I think it's better to use what's actually inside our search parameter because this way, this variable
is always going to be the source.
So we calculate the price and update the details.
All right.
So how do we go from this into the text?
If we inspect this element, you will see that I already used those values as the ID of the elements.
So here I have an element with an idea of Q one fifty and one with Q one ninety, which is good because
if I use J Querrey.
And I select an element with an idea of Q one 50.
And I get its text.
You can see that this is exactly what we need to send to the order details, so we are going to use
this value as a selector to get the text from the element.
But how do we do this if we don't have the hash tag?
Well, this is pretty simple because we know that we can concatenate strings.
So if I create a variable, so let's say quality.
Heidi, and this ferryboat is going to concatenate a hash tag with that string.
Right, if we do this, what do we have inside here?
It's exactly the selecter we want, so here.
Instead of typing the selector ourselves, we can just use the quality ID because if we do this, if
it changes to Q one 90, this is going to be dynamic.
Instead of getting you one 50, it's just going to get you one 90.
And as you can see, by doing this, we're able to get the exact text we want.
So these are the little tricks that I told you that we haven't talked about yet.
This is why it was going to be a bit hard for you to do this on your own.
But still, this is something that it's very easy to research and find a way of doing this.
And this is actually not the only way of solving this problem.
Like I said, if you just want to go directly to the element and just get the one that has the selected
class and get the text, that's fine as well.
I just think it's better to use this variable as our source of information.
So now that we know we can do this.
Let's go back to Visual Studio Code and let's get started with the quality so we can see if we.
Can make it right.
So let's create a variable called exactly what we just did, so quality ID is just going to be a hash
tag plus.
What's inside the search programs that quality?
And now what we're going to send to this element, it's just going to be.
That exact selecter that we just formed here.
And we are going to get its text.
So let's do this, let's see if this part is working.
So as you can see, the quality is already done, so we can do the same thing for the color.
So let's go back there.
Split the collar here, we can actually copy all this instead.
And now it's going to be search programs that color, then we're going to do the same thing and the
element is result color.
Here is caller ID, so it's a new variable.
And we are going to use it as a selecter.
All right, let's see if this is working.
I'm going to refresh the page and now, as you can see, we have colored and why is this working?
Again, this is because I use those IDs for the element.
So I have colored here.
And if you go inside this element, you will see that the ID is also colored.
So this is why this works.
So now we just need to update style and quantity.
The quantity is actually very simple because we already have the value.
We don't need to get any text.
We just need to send the value to this element.
So this is really easy to do.
Let's just get the quantity here.
And instead of sending test.
We can just send Serge Bram's.
Dot.
Quantity.
Let's save this, let's refresh the page and see what happens, and now we already have the quantity
done, so we just need to do the style.
So this is going to be a bit different because we have.
A select box here, so let me get the idea of this element, which is style.
Now going back to the console.
So let's start by selecting the parent element, which is the select box that has the idea of style.
And inside it, we have option elements.
So option, you know, how do we get just the option we want?
So if we go inside it, we can see that we have an option with a value of printed.
So inside this option, there is the text that we want.
You might be thinking, wow, it's much easier to just get the value we already have and maybe just
capitalize it so we can use it.
But let's think about a website that has many languages like French, German, Chinese and so on.
Probably we will always have the same value, but the text inside here is going to change so better
than just getting the value and just capitalizing the first letter.
The best thing is to get the actual text that we have inside the option.
So how do we select the option by its value?
Well, that's very easy to do.
It's just a basic success selector.
We can just use Brace's and when we use Brace's, we can select an element using any attribute we want.
In this case, the attribute is value.
So let's try to select an option that has a value of printed.
Let's see if we can find something, as you can see, we found an element here now instead of just getting
it, let's try to get its text.
So as you can see, by doing this, we are able to get the exact text for that option.
So let's just copy this, because this is the selector that we are going to have to form.
Now, going back to Visual Studio Code now, the last one is the style.
So, again, I'm going to create a variable for the style this time is not just the ID but the selector,
so I'm going to name it style selector.
This is what we need to have, so I'm just going to put it inside quotation marks, so this is like
the end result, but instead of typing printed, we just want to get the value dynamically.
So I'm going to close this string here.
I'm going to concatenate with something and then I'm going to concatenate with the end of it.
So in the middle here, what we are going to do is just get search parameters.
That.
Style.
So before going ahead, just so you don't get confused, let's see why are we doing this?
Let's send this to the council.
So what are exactly we doing with this selecter?
Let's send this to the council and check it out.
So this is what we did, we are just forming that CSF selecter that we need to pass to Jake Wari.
So by doing this, if printed is selected, then we get the value of printed here.
But if plane is selected, then we are going to have the exact same thing.
But with plane here.
So this is how we select elements dynamically.
And when we change these values, you will see why it's very important to do this, because everything
is going to be working without us having to do anything else.
So going back there, now that we know what we have here.
We can just do the same thing we did up there.
But instead of using the caller ID.
We can use The Selecter we just created.
So refreshing the page now we can see that the order details are done, so when we first load the page,
we get all the information from the filters and we update the order details.
So here we have the right style, quality, color and quantity.
So far, so good.
Now, to finish with the order details, we need to get these values and use it to calculate the price
and then show the price down here.
This is what we are going to do in the next video.
I'll see you then.