Laravel 8 E-Commerce - Show Review & Rating on Product Details Page

hi everyone welcome back to the laravel 80 commerce tutorial in last video we have created add user review and rating on product you can see here write review link if i click on this link it's opening a page from where you can set the rating and also add your review okay so let's add here the rating at review so i'm just going to select here 3 star and review so i'm just going to write here good product all right and if i click on submit you can see here the message your review has been added successfully all right now let's see how can we so uh this review and rating on product details page okay so first of all go to the product details page so go to the shop link and from here just click on any product so i'm just going to click on this product and you can see here this is the product details page and here it's showing the product rating and number of reviews okay which is which are dummy okay which are statics and if i install the page you can see here the reviews tab and here it's showing the all reviews of this product which are also static okay so now uh let's make our dynamic these things okay this star star rating and also showing here the number of reviews and also display here the all reviews of this product okay and also remove this form all right so for doing this switch to the project and first of all let's open the order item model so just go inside the app directory then models and from here just open order item dot php file okay this model and inside this just let's create one more function here public function and function name let's say function name is review and inside this function simply return here dollar this arrow has one and add here the model review column column class and also i get the column name order underscore item underscore id all right now save this now go to the review model so just open this one review dot php and inside this let's create here a function public function and function name order item and inside this simply return here dollar this arrow to order item model column column class all right so this is the product model and you can see here this is the order model okay all right uh now go to the details component view file so for that just go inside the resources directory then views livewire and from here just open details component.blade.php file this one all right now inside this file you can see here this is it's showing the product rating here okay this is the first start second third fourth and fifth and you can see here this it's showing the number of reviews all right okay now let's uh make thing dynamic so before this before this just add here php directive and inside this let's create one variable which is avz average rating okay and set here the default value zero now after this let's add here the forest directive for h and inside this simply write here dollar product arrow order item where our status our status is equal to one as dollar order item uh product order items all right and we need only this one and after this just close here the forest directive so right here for h [Music] no need here so just cut this and fist after this and inside this forage simply write here dollar avc rating is equal to this variable all right is equal to dollar abc rating plus dollar order item this one and call here the review function review and also call here the rating okay and before adding this just add here the php directory and inside this just paste here all right and after this forage uh let's add here the four four different four and dollar i is equal to one dollar i is less than five okay then dollar i plus plus and after this just close here therefore for directive info and now just remove this remaining like [Music] refstar okay this one this one and now save this uh before displaying this let's add here the if directive at the rate if and check here if dollar i is less than and equal to this one okay if it is true then display this star otherwise just add here else part and now let's copy this and paste here inside the else part and after this just close here the if directory in if and inside the else part let's add here one more class uh color dash okay okay now let's copy this class name and before this let's add here the spell tag will close here style tag and now dot color dash green and set here the color as e6 b6 a6 okay this color and also add here the important important all right now so here the number of reviews so for that just select this and add a double curly bracket and now just write your dollar product arrow order item items okay arrow add here the condition where if where our status is equal to 1 then call here the count method all right okay now save this now let's check this sources to the browser and just refresh the page and now you can see here the rating for and number of review which is one okay now it's dynamic if i change the rating so let's change the rating so just go to the localhost phpmyadmin and just open the database laravel 8 e-commerce tv and from here just browse the reviews table and if i change the rating here of this product this time i'm just going to add here 2 and if i refresh the page you can see here the rating 2 all right okay now inside the reviews tab uh let's display here uh the review okay all review of this product and also remove this form okay so switch to the project and let's call the page and let's find the review step and you can see here this is the reviews tab reviews description tab and you can see the review tag okay and from here first of all just remove this form so collapse this div and let's select this and remove this all right and now for showing the review uh after this let's add here the forest directive for h dollar product arrow product arrow order items one arrow and here the condition where our the status is equal to 1 then dollar as item all right and after uh this closing a line just close here foreign all right and now for displaying the uh first of all let's display here the number of reviews and here display the product name okay so just select this and add here double curly bracket dollar product arrow order items so i'm just going to copy this same line all right and also call here the function and now for displaying the product team just select this add a double curly bracket dollar product arrow name product arrow name okay now uh let's display here the rating so for that inside this width percentage uh just select this one 80 and add a double body bracket now inside this curly bracket just write here dollar order item order item this one okay arrow review arrow rating okay and now uh let's multiply with 20 with this rating okay and now just copy this rating and here inside the double curly bracket just paste here order item review arrow rating all right and now for this let's add here some css so after this just add the style tag and inside this style tag width dash and then the class name width dash if zero percent so right here zero percent this one percent then set here the width 0 okay now let's copy this and paste five time all right now change here the percentage if 20 then sit here the width 20 percent if with 40 then sit here the width 40 percent and if it is 60 then sit here the width 60 with 80 set here the width 80 and in last if 100 percent then set your width 100 okay all right now reading done now uh let's display here the username so for displaying the username just right here order item all right order item order user name and now for displaying the review date and time just add a double curly bracket then order item arrow review arrow and just let's access here the column created created underscore at all right and before accessing this just add here urban for displaying the formatted date okay so added the carbon carbon column column parts and inside this just paste here okay order item error review arrow created and now just call here the format function and inside this let's pass here the format d small d the space capital f plus space capital by small g colon i plus a capital a all right okay and now for showing here the review now let's select this text and add your double curly bracket and now just right here order item arrow review and let's page here the comment column comment all right and now it's done so save this and now let's check this okay so switch to the browser and now just refresh the page all right you can see here the rating number of reviews and if i click on reviews tab you can see here the one review for this product and you can see here the rating and username user okay and this is the review date and this is the review okay all right now let's check the another product so i'm just going to click on soft page and if i click on this product you can see here uh for this product there is no any rating available and no review okay zero review and inside the reviews you can see here the nothing okay zero review for this product all right so in this way you can so review and rating on product details page so that's all about story view and writing on product details page so thanks for watching this video and if you still have any kind of question you can ask me in the comment box don't forget to subscribe my channel thanks for watching

Channel: Surfside Media

Views: 2,909

Keywords: How, to, Program, laravel (Software), laravel, laravel v8, laravel 8, laravel project, laravel setting up, laravel v8 setting up, laravel v8.0, v8.0, laravel 8.0, laravel 8 playlist, laravel 8 tutorial, intro to laravel 8, laravel tutorial, laravel 8.0 tutorial for beginners, laravel tutorial for beginners, laravel8, laravel 8 ecommerce tutorial, laravel 8 ecommerce, ecommerce project in laravel 8, laravel 8 ecommerce project, show review, show rating, review, rating

Id: tIZvDxbzO0k

Length: 19min 57sec (1197 seconds)

Published: Sun Jun 06 2021