Hi there, in the previous lesson, we worked on the product details and now we just need to calculate
the price and update the product image.
Let's get started with the price.
So we need to create a new function to calculate the price based on the parameters.
Let's go back to Visual Studio Code and let's create another function here.
And let's call it calculate.
Price.
And then every time we update the order details, we are also going to calculate the price to update
that element for now, I'm just going to execute this function here.
Just so we know if it's working and then when we make sure this is working, then we can change this
a little bit to actually send the price to the element we want.
But for now, as this is inside here, this is going to be executed once on page load because we know
that we are calling this function.
So this is good for now.
So let's see what we need to calculate the price.
Well, let's go up here.
So the first thing we need to do is try to get the unit price.
So for this, we know that we need first the color and then the style.
So we need to go inside products and then the collar, then the style.
So inside here, let's create a variable.
For the unit price.
Which is going to be.
Products.
And then we are going to use the Brace's notation and hear the property we are trying to access.
So first is the color.
So we have search Bagram's dog collar, which is going to return exactly this property.
So we can use it here.
And inside it, so now racist's again inside the collar.
So let's say we are now inside this element now we have properties with the same names as the styles.
So then we just need to use search programs, not style as the order property search programs, dot
style.
And then once we are inside the style we want, so here it is.
We just need to get the unit price.
So here we can use the dot notation, because that's not dynamic, that's the actual name of the property.
So now we have the unit price inside the variable.
Let's send it to the console so we can get started and see if this is working.
So unit price, let's send it to the console.
Let me save this.
So now let's refresh the page and now we're getting nine point forty seven.
Let's see if this is right.
So we have a colored and printed style.
So colored and printed and as you can see, we have the correct price here, which is nine point forty
seven now, we just need to pay attention to the other rules.
So we have a 12 percent increase in case we have a high quality shirt.
So let's do this now.
So now we can start an if statement and we could say that if search programs.
Dot quality, and now let's remember that if we have the high quality, let's see the idea of this element.
So the idea is skew one ninety.
So this is what we are going to have as a value if the high is selected.
So if we have.
This.
Inside the quality parameter, it means that the high quality is selected.
So in this case, we need to add 12 percent to the unit price.
So the way we do this.
It's just I'm going to do the longer version and then let's make it shorter, so unit price is going
to be a unit price.
Times one point twelve, this is how we add 12 percent to something, if you want to add 20 percent,
you can do at one point two.
If you want to add 50 percent, one point five if you want to add five percent is one point zero five.
We want to add 12, so it's one point twelve.
This is just basic math.
And now that we have this, we actually have a shorter way of writing this, just using the incremental
operator using asterisk.
Equal.
And then this is exactly what we had written before.
So if we have the high quality, we are just going to increase the price.
All right.
So now let's calculate the total.
So let's create another variable so total.
So actually, it's not calculate the price, but calculate the total.
I think it's better like this, so now we have a variable called total.
Which is going to be the unit price.
Multiplied by the quantity, so we know we have the quantity inside search programs, not quantity.
Before we go ahead and see if this is working, let's remember that the quantity we have at the moment
is actually a string because we are getting it from an input field.
In this case, since we are starting the operation with a number, JavaScript is going to automatically
convert this into a number.
But if we have the opposite so search programs, not quantity, then the asterisk unit price, this
would result in something unexpected.
So in order to avoid this, let's always convert the quantity to a number before we use it.
So the best way to do this or the best place to do this is here.
So we are getting the value and now we can use the pass.
In this case, it's a quantity so we can use pass int.
Which is going to convert this into an integer.
So by doing this, let's save this.
Let's refresh the page.
Let me just go to the consul so as you can see now, inside a quantity, we already have a number,
so now it's safe to use it in our calculation.
So now we already have a total.
We can send the total to the consul and see if this is working.
We had nine point forty seven.
We have 10 units.
So if we refresh the page now, we have ninety four DOT seven, which is correct.
We are now calculating the price time 10 and we have the total of the order.
Now we just need to get this value and send to this element.
Or before we do that, I think we still need to do something here, so we are already adding 12 percent
for the high quality, but we are not applying the discounts.
So let me just copy this and before we finish this.
Let's create another if statement.
So if the quantity, so search programs, not quantity.
Is higher than or.
Equal to a thousand.
Then the total.
It's going to have a 20 percent discount and again, this is just basic math, how do we reduce a number
by 20 percent?
We just multiply it by zero point eight.
So.
We need to do this or.
Just use the shorter, incremental operator.
Now, let's start in Alice, if.
And now instead of a thousand.
We can do 500.
So in this case, the discount.
It's going to be 12 percent, so.
Eighty eight.
Now, another else, if.
And we also have a discount for greater than 100 in this case, we have a five percent discount, so
we just multiply it by point ninety nine.
So if we have a number greater than one thousand, does it mean that we are going to apply three discount?
Actually, not, because let's remember that when we have if and if statements.
When we have a true value, so let's say it's greater than a thousand, we are going to stop here,
we are going to execute this code and we are not going to continue inside this structure.
If we didn't have the house here, then this would be problematic because we are going to be making
all these tests and applying the discount three times.
But since we are using Aushev, if we go inside here, we are not going to continue testing, so if
it's greater than a thousand, it's going to stop here.
If it's between 500 and 1000, it's going to stop here.
And if it's between a hundred and 500, it's just going to stop here.
Otherwise, we are not going to apply any discount, so by doing this, we already apply the discount.
So now we have the total now instead of sending it to the council.
We can just return.
This value, which is already a number.
All right, so now that we are returning it, we just need to send it to that element.
So let's go back there.
Let's check the idea.
So here we have price, so we have an element with the idea of total price.
So total price, not text.
It's just going to receive this, so let's remember that this function is returning a value so you can
put it directly here, or if you think it's less confusing to have a variable, you can create a variable.
Like order total.
So you know that you are actually calling this function and storing the value here and then you can
just send the order total to the element.
Let's save this, let's see what happens.
All right, so now we have finished this or the details section, we have all the details here, we
also have the total of the order, which is really good.
We still need to form at this price to force two decimal places and to include a thousand separator.
But let's do it later because now we don't even see it.
So after we put the filters to work, we can format the price.
Now, in the next video, let's work on the products photo, which is going to be very easy, so I'll
see you then.