.NET 8 Blazor Ecommerce: Part 7 - Creating Banner & Recommended feature for Products. 💻🔥

Hello friends and everyone you're welcome back  to net code H Channel I am Frederick as you know   already and I'm happy to meet you today in this  another episode of our e-commerce Blazer web   assembly app in this video we are going to look at  how to display product based on category selected   in our last uh video we able to display category  as you see on the screen now if I click on each of   the categories I must have the product related  to each part category displayed on this screen   that is what we're going to have a look in this  video so please you can do any of the following   to support this channel whil you also watch our  videos you can just subscribe and also hit on   that notification Bell so you never miss out any  of our upcoming content you can also like this   video by clicking on the thumbs up icon and if  you are interested or if you like this video too   much you can also buy me coffee a hot one and  if you want to do that please check the video   description a link has been provided thank you in  advance for selecting any of these and you know I   would love you so much if you to do all okay I  do offer training sessions for those people who   are interested in net Technologies talking about  Blazer which comprise of the Blazer ser and Blazer   web assembly for web app development netm and my  blazer hybrid for mobile and desktop development   and you have Network API for web services so if  you're interested you can write to me through an   email specified in the video description all right  so let's jump into to this and this is going to   be a part seven of the e-commerce Series so if you  haven't watched any of them please check the video   description I'll put them here and I suggest you  watch them one after the another if you have any   comment or any issue to put it at the comment  section and I'll attend it to you all right if   you have any any additional to you please let  me know as well okay so the last video we able   to create this category as you can see we have  four of yeah four categories here and we able to   implement this select to to get it activated but  if I click on this now I must be able to retrieve   all data related to this particular category and  that is what we're going to have a look today so   let's let let me close this up and now this is a  code that we use so I'm going to close everything   and we're going to create a component and this  going to be a product list component to close all so click on solution Explorer now we  see from our Pages folder you can see we   have category Pages we have other pages and we  have product pages I click on the product pages   and let's add one component and it's going to  be product list page okay so product list page   now within this component this what you want  to have is going to be a parameter we going   to accept a list of products so is just going  to accept a list of product after that going   to look through and display it on the screen  this very simple thing that we are doing in   here okay we are not adding any event call back  yet so here user can see buttons such as add to   cut um share like but user cannot click and now  it's not going to work because you're not going   to implement anything we're going to just display  the product as it is so let's close this and um we   can close this and open it again to get rid of  the that's the black and white isn't it I hate   that so much I want to see this okay so in here  we want to just have um a look through this and   now you want to create just a diff class that's  going to be a card so you can see is a container   fluid and here we having what a row so with this  row we have this class as featured filter now we   looking through this and we are creating this  class you know it's a column LG2 or in case   it is a medium make it three in case it is small  make it six but success and we are creating this   so inside here we are passing an image with  a weight of 150 and the height of 200 and now   we have this as a Hoover items so as you can see  for this we have the FF height and this is going   to be the I said height or height so I love it  you can to click on this to love the product   you can treat it or can retweet maybe you can  send it to um that is Twitter to um maybe you   can just can just do something else with it  okay and here we can also add it to cut what   you're going to focus here mostly is the first  one that the Hat you can just click to like it   and you can also click this to add to cut that is  what you're going to focus most from the middle   one I'll leave it up to you but maybe the next  time I'm going to have a look we have a video   done on that how to so maybe if you want to put  something else on that to maybe a tra or ET you   can also um do that as well and now we have the  featured item test which will to be display at   the bottom we have the item name we have the item  price since it is decimal you can see we can able   to format this into a string and I specify our  um currency and also the format that we want you   know dot dot dot dot so that's going to be dot dot  dot dot that's going to be the string format for   that all right so this is all that we need so the  next thing to do here is we are going to use this   category or this component inside the main or  the product list h home page so in here we have   to use the category in here so we can provide  product list page and now we can close this up okay so you know that here we having it we  are taking two and I we add the next 10 making   12 and that's going to be the full row of a page  but you know there's a CL class attached to this   and that's a CSS class okay so with this class  this I'm going to do um we can start this class   one after the another so I'll just copy this  and I'll just paste it in here maybe when you   check the get repo this class will be available  but this what you're going to do you're going to   create a class attached to this if you don't  know how to create a CSS class right click on   the same um this uh folder click on ADD and now  maybe um new item and then here you're going to   select style so this is a style now the name  of the component here must be the same as a   component name now instead of raer I'm going to  make it Riser CSS as you can see from this it   israa CSS and that is a CSS isolation So This  Ss is going to load as soon as this page is   been loaded into the screen okay so click on  and add it and I want we add it this the CSS   that we have we have all the CSS and that is what  we using actually you want to H as you can see we   have some h test in here and that is all that  we are using in here so I'll leave this under   the video description so you can just C from  the guab we're going to have the CSS as well   okay so the next thing that we need here is we  need to when you check this we need to provide   the product list see this has a parameter known  as a product as all product so we need to provide   this list here so this product can render the  the product in the page that we created so to   do that you know we have subscribed to this and  we are calling this load data and on this load   data it is loading or is calling this product  service and get all product setting us feature   to force meaning getting the entire product so  in here what we can do is we're going to have   access to the product list then let's provide  all categories or all product so there's uh   you know we've cash this into the service that  we created so once we provide this as product   so so all product here we specify the product  service. all product because as soon as the page   loads and record this method this method is going  to call uh the get all product which will through   the data from database and I'll cash it into this  all product so we can um um use this in here all   right so now this what we have let's try to um  run this application and see the prodct ler we have so now the page is ready so let's click  on this and I believe okay so it must be SL product and now we must have the list of prod  that been displayed alongside with the category   all right so the page is now loaded and as you can  see if I move the the mouse on you can see we have   these icons and that is add to cut we have this  that's a retreat and this the Love So currently   back click on the nothing happens because you have  not implemented any so let's let's see but we have   this icon here as soon as you have the mouse  on you can see you can have this all right so   now we have this the next thing I'm going to do  here is if I click on each category what should   happen I want to retrieve the items in here right  so we are going to we have four categories here so   we're going to set one each to one so you're going  to have three I'm going to use after that you're   going to add the real product ourself and I'm  going to see um it's um live okay so let's let's   let's do this all right so in here I would like  to put this in a diff so maybe I'll have this card   um set up over here let's go let's close this up  and where we have our product list homepage maybe   here here I can just have this div class and know  this is a class that you want to so let's close this so let's see we have we have to close one okay so we have this sets and this this one and we have to div okay so we have just a card  header and there's nothing here but we have this   border sucess subil so this just a color that  you want to surround it with this okay so um we   see we have MB as two to just space the botttom  to two so in here with the all product that we   are providing you see currently defaultly when the  page loads we are providing um all product but in   case we click on category and now we get product  so in this case this product by category um list   is going to have the current list by product  so what we can do here is we want to check   if this product or product is null then we want  to use this product service product service dot   then here product by category so we going to have  this product by category so anytime this product   service is n then you want to use this product by  category okay so control k d we can format this well okay so let's save that but I'm sure that  is this should come here so instead of this we   should because this this is going to be changing  all the time so if this is null that is where we   want to um use this product service. or product  so this is how you want it to be done so in case   as soon as I click on this category event clicked  and now we we get passing the ID and now we set   this me is going to set the values or the list of  product into this um list that has been catched   in there so soon as this list has data then it's  going to switch up this and um we going to Loop   through this and display on the screen but in  case this list here is null then you're going   to use a default one that is a all product so we  can save this so let's click on the SQL Server   object now in a category let's open the category  view data let's also open the product to as view   data as well now let's say from that category  table we have idea of two three and four so we   have 1 2 3 and four let's see from the product we  have um two three and form so we have categor so   maybe this one we can set this to two and we can  set this to three and maybe you can copy one and   now we can uh paste well can we paste this okay so  we can past as five and now this we set this to 4   so let's save this so this means that if I click  on all I'm going to get all product if I click on   individual um category I'm going to have one for  each now let's find this again and I'll check it out so let's navigate to the product list okay so we have four product in here now that  is for all if I click on Apple you can see I   have only one product if I click on Samsung I  have one product if I click on opo I have one   product if I click on Nokia I have there's  no product in here so this has no product   but why is it that we seeing okay so this one  one two 3 four one for each so this is this we   have this and we have that okay if I click  on all then it's going to set them to null   that is the product by category going to set  it to null and therefore if it is now then we   going to use all product and we have this so  category has been implemented and it is now   working what I'm going to do here is I'm going  to go offline and try to add product you know   we can add product from um this section we  have categories added and we have a product   so this is a product that we have right so  this what I'm going to do with this is ADD product so that is ADD product so I'm going to go offline and I'm going  to add multiple products here with their images   and I'll come back so you can see this app  live okay okay so I'll be back in a minute   all right so that is the list that you can see  so I've added some categories over here and I   have also added some product and that is it  what you see from this when we click on this   homepage nothing happens here the reason is we  have not set any product as featured so quickly   let's go back to our database and maybe from  our product section if I refresh this I'm I'm   going to have the whole list of product that  have been added into the database now let's   try to set all of them feature that's through so  we can display them in there so let's set this to True okay and then the last one here  so when you save this and let's try   to reload this page and we're going to  see five of these featured product being   displayed here and going to see the same f  um the same list of this featured product   displayed beneath here as the featured  product let's wait for this to get loaded   okay so that is a list that we have from  here and when we we still navigate to the product you're going to see all the products um  in the product page okay so let's click on this   now if I click on this um this category it  has no data click on the Samsung and it has   this data if I click on the vi nothing happen  since I click on the Apple it has this data in   here so you can see that the app does not get  reloaded and there's no call made if I can see   from here there's no even route specified  click on the all no route specified right   click on this let's go to inspect element and  now let's see in here click on the network tab so if I click on Samsung let's see what going  to happen here you will see with the Samsung   nothing happens click on the apple and I can  see from here we are just retrieving the data   but we are not having any call from the API  because it is coming from the memory cache as   you can see from here it is coming in from a  memory or a cach data inside the application   already so we've able to achieve um what we  wanted to do yes so we have this and that is it okay so the next thing we're going to talk  about here is we want to have some card on top   here now this card may be um May display two  product randomly um picked from the featured   product and that's going to displayed on here  so let's quickly go to the application let's   minimize this and I in here there maybe you can  create Banner like let me make it as Banner which   going to display two product two random products  so we can put this inside this product folder so   let's see I'm open this right click on the product  pages let's add a new razor component and the name   of this going to be Banner page so within this  page we want to just have maybe maybe maybe two   yes so get all products when the page loads we  want to call this method so maybe as the page   loads we want to um call this method and this  method must come in in the code session so at   code the l space in this okay so featured product  called to through so you want to grab all featured   product in here now we have to subscribe to and  also that is when it changes you also also want   to change this or maybe we can also do that so  let's have this as override then uninitialize async so override a sync then  this going to be a task so uninitialize a sync then it must be protected so in here we're going to have product service dot so you're not having a popup right  so let me close this and reopen it again so from this Banner where  is it okay so we have this now   product service dot now we have product  action and we say plus equal to state has changed so you're going to have state has changed now we do the same thing even the page  is initialized already so you know I didn't see   that okay so I just have to grab this and I'll  paste it here okay and let me just remove this   from the top here and now when the page it  discarding so public void then you have this post we can copy the same thing and now we make  sure we attached it before it dies up let's Implement I disposable in here okay now we want to just  have a container and now maybe some two divs so let's check if featured product is not now  then we want to grab two so we check if featured   product is not null because here you know we are  calling we set this feature to through and then   we are calling this service which will load  and populate the data into this feature list   that we have so we are saying that if this is  not equal to n then we want to run this we want   to get random numbers so Random products so we  have Banner one Banner two we specify Banner one   to this and at the banner two also to this so we  have two data or two Dives now each day is going   to randomly pick a product anytime the page is  being loaded or being rendered so we're going to   have multiple Pages multiple product displayed  anytime the user navigates with that because   it's an advert that you want to um do we want to  portray to user to buy so we have to um randomize   the the product we have to pick them randomly  and to display them okay so don't want to make   it as static so that what we are doing but before  we do this we have to create a class in method in   this service and this the name supposed to be  get random product so let's do that let's go to   the service so we go to the product service so  I product service and now inside this i product   service we are going to specify a method and  which going to return just a product so here   we say that product and get random product so  let's implement this interface we can do that   from the client service now let's control period  to this I product service and let's implement the   interface okay so implement it and we have the  interface specified in here I think they're down   here so I'm going to grab this and now let's go  up because it's a product type so I'll put it to   this as a product type and that's a get random  product so in here to get random product we can   just use um random so you can see here I don't  want to have this method twice so let me remove   one okay so as you can see we check if featured  product is null then want to return because it's   the feature that you want to pick data from now  if the list here is not it means you can cannot   pick any data so you have to return it now if  it has data then you can see we are creating   random number we create an instance now here we  have to specify the minimum and the maximum now   this is what we are doing the minimum here we're  going to find the minimum ID of this feet product   and now with the maximum you find the maximum  idea of this feet product by what random does   is going to pick from the minimum and a number  which is lesser than the maximum so the maximum   number that the last ID here won't be picked  because it's the maximum number that's why we   are adding one so the adding addition of one going  to make it at maximum and going to to pick below   that which going to include this the next number  of the maximum number of this product so once we   have this then we are um create generating as you  can see from The Nest so it is picking from the   minimum and from the maximum in between of these  you're going to pick any of them and I return it   the result you can see so the number that's going  to pick we want to check from the the featured   list and I pick that number check to the ID and I  retrieve it and return it to a product so anytime   that you call this product instance it's going to  get us a random product and that is exactly what   we are doing in the banner session so we we've  C it twice the first one get us a new product   you also get us a new product now when it come  to a description maybe you like not you would   like to uh I'm shorten the description we want  to display the whole description message or info   over there so remember that we did this somewhere  else when you go to uh the product let's see that   is a front page I think we made that in there so  front page that is a car you can see that down   here we created so that's a get description so  let's cut this up okay save this let's go to the   general and this is going to be our general class  and in here let's paste this let's make it as static and you know we have to make this as  public okay so public static is returning a   string it is accepting a list of um a test at  description and we are P dot here and I think   I've spend this long time already so that's  what we are doing now we can even modify this   let's see you can use a substring as you can see  use range operator we can lot but let's maintain   what we have okay you want to maintain this now  when you go back to this front page you're going   to have an error in here so what we going to  do here is let's add the general that going   to be the class to it so I'm going to say  General Dot and now this is now solved so   when we go back to the banner page we can also  use the same class in there remember that you   don't need to repeat yourself all the time so  in the same class then you pass the descript   destion and this pass description so if the  description test is more than 100 going to   shortcut it and I'll append three dots to it  and that's what we are doing so anytime that   this page is reloaded it's going to have a  new data set set in here okay so now let's   see let's go to our product list homepage  and now on top here we can add our Banner okay so after this you can see it is a  Al 10 so we want to add this Banner page   and now let's save this and now let's  refresh application and see what we have so the app is ready now let's navigate  to the product session so this is the product yeah so now we got it now you  can see we have this beautiful banner   displayed over here now see this a Samsung  Galaxy z43 and we have Apple iPhone 15 Pro   Max right now let's say if I if I click  on this I can see I have a new one set as   you can see this is a new one this is the  new one click on this and maybe you could   I have a new one so it keeps changing if I go  to the homepage and I return back again let's see but once it changes it doesn't get from an  API it only get from the data that is the internal   data the cat data and it is making this app more  um um and going to is increasing the performance   let me put it in that way it is increasing the  performance of there you see we have a new one   Samsung W 2017 and we have the same thing in here  okay so this also are suggesting the type of phone   that the person can get and we can actually add  that now the last one left here it is we want to   display a banner down here maybe that could be a  recommended product so if I click on recommended   product or maybe I'm going to have this going a  slideshow what tell you that this product have   been recommended maybe you can create a separate  model to handle that but in this case I'm going   to use the featured product and I'm going to  display them there as a recommended product to   the user all right so let's see how to also  um do that then me bring this video to an end so let's close this okay so let's close  this and in here we we can close all of these   because we are done with um each of them close  all these now let's go to solution and now in   the same product I click on this let's click  on add a new component and on this time around   you're going to say is recommended page so at  this page this what we are going to do let me   just add just a simple code that we going to  be using let me just grab the code in here and   if you check this code we are creating a list  of this featured product so let me save this   let me close this and I open it again so we can  get rid of that black and white so recommended product so you know that here when the page  loads we are subscribing to this and here   can see we have this we create an instance of  this a list of product then we cat it in here   so we create a container we initialize to new  when the page initializes we want to grab all   featured products so we call this in case this  product U the featured product list has no data   you call this and it's going to make a pi call and  I'll cat data for the whole application to use if   you have data in it then we're going to say this  list that we have here we're going to assign the   list of this product fure product to the list  in here then we going to call this method has   populate what is it going to do here you can see  that it's going to populate this we are creating a   a dictionary here you see we want to group The  the list so we want to pick maybe um six at a   time and group them so you see we are creating a  dictionary the key here it is a integer and then   the value here is a list of product and I we give  it as recommended or recommend Carousel um group   um group product so here we get get end item  per view so on the line like this how many item   do you want to display that is six let's find the  total product so we get product service. featured   product. count so we want to get the whole product  that we have to display in there aside from that   we want to find a number of groups so we divide  the total product here by the item view that is   a six to know the number of groups in there now we  have initial value of a start number and we have   skip so start number it is one and our skip is  zero so we are saying that if start number or if   number of groups it is less than or equal to zero  meaning here there's no product because if I have   total product in by this six I must have more than  that right so we want to say if it equal to zero   or less than that then return if not we're going  to use a y Loop to group this so one start number   that is a one it is less than equal to number of  groups so there number of groups here so maybe   when you have 12 six 12 by 6 going to have two St  number is one so one is less than equal to two yes   so it's going to Loop twice and now when it Loops  you going to pick going to skip this the current   skip is zero and now what is the current item you  take that is a six and the next one after taking   this is going to add this to this addition which  comprise of the start number that is an ID or the   key and the value here it is a list of product we  increase the Skip and also we increase the start   number so it's going to also loop again and it's  going to also add it so we going to have a key and   a value key is going to be the integer and the  value is going to be a list of product now once   we have this we want to Loop through this so we  don't need we don't need this dispose so we want   to look through this so how do we look through we  are going to use the C that we installed from the   same Fusion that we use in our front component  and in that we are going to customize ourselves   so we can have the this feature in it okay  because that default one does not have this   list it has only one product display at a time  you want to display six at a time so let's see   what we're going to do but before we do that I  suggest we also so before we populate this um   we must have this product already so I believe  we have to in include yeah the dispose so here   because definely when Pro is been added this  must also get changed so we have to subscribe to this and now we have to implement  maybe the ey disposable on top so here let's implement it here okay so that  is this one and now with the with the C maybe we   can use container fluid and now we're going to  have this style also attached to very simple one   and when you check this we checking if F product  is not null that is where you want to run this   you have a container fluid and this is a row we  using the card and this is an SF car as we used   previously we have visible on H that is a button  and we have all these STS in here we've done this   already in the the feature that the first the  first or the second that is the second um video   now we looking through this dictionary okay  and now here the first one is the key so once   you have the key we also looking through the key  that is the item diary over here and now this key   has eight value which is a list of product so we  Loop through we create a card that's a column LG2   then we display the six in at the time and so one  this finishes um the the looping this also going   to Loop until the items in here um finish it so  the item here it is I think how many item do we   have we have two items here so until these two  item finish they it will still keep what looping   through it's going to have a group of groups okay  a group of groups and that's what we um we did so   it just a customize one that we are doing to to  um achieve what we want okay and that is is the   same thing that we have been doing but don't worry  I also put this at get tab so you can also go in   there and and grab this as well okay now once  you have this set let's save this and let's go   and use this component in the in the product list  homepage so this is the product list homepage so   once you come here at the end of this you want  to uh replace it or want to just continue with   this it is an lg12 me going to take the whole um  R then we have this card on top and we have this   recommended page so if I save this and I let's  try to run this application and see what we have now okay so let's navigate to our product and you must see this recommended product  and that is what we have here we have recommended   section down here now let's wait for the list  to pop up so down here and now let's see good   so we have it set now you see we have the  commended product and we have the name of   the item we have the description you can see  we having this append dot when the test here   is more than 100 we can do that maybe you can  shortcut this maybe 60 or 70 Etc but maybe you   can do that yourself and I believe so as TR  you can make it so we have two we have 1 2   3 4 five six so six item per view if I click  on this I have the next batch at six so this   recommended product that the user can click on  in for now if I click on this nothing happens   okay we haven't added anything yet so maybe in  a later video we going to see I click on this   I can just view the item in here and now I can  click on add to cut or I can click on um return   and Etc to do that all right so that is what we  want to do today I believe this is clear I'll   leave this at the source code no I'll leave the  source code at the GitHub so please do check it   about there if you're interested in this and  want to support this channel want to support   especially this project please and want to buy  me coffee to support it I'll be very happy to   accept it and thank you in advance for doing  that okay check the description and have a link   about there you can also do it from there okay  so for now I think I'm not going to continue   this anymore let's end here and uh we're going to  talk about adding this product to cat maybe next   I'll VI details of each product in the next  video that's going to be part eight I think   so all right so thank you take care of yourself  and I'm going to catch you up in the next video

Channel: Netcode-Hub

Views: 562

Keywords: EcommerceApp, BlazorWebAssembly, DotNET8, OnlineShopping, PhoneShop, WebDevelopment, ProgrammingTutorial, AspNetCore, WebAssemblyTutorial, TechLearning, CodingJourney, AppDevelopment, WebDesign, DotNETDevelopment, Ecommerce, Blazor, DotNET, OnlineShop, PhoneApp, WebDev, CodeTutorial, AspNet, TechLearn, Coding, AppDev, UIUX, FullStack, DotNETDev, CSharp, DevTools, Web API, client services, .net 8, .net 8 blazor project, ecommerce, online shop, category repository, optimize code, banner, featured, products, category

Id: HVw5GPMFdyg

Length: 39min 14sec (2354 seconds)

Published: Tue Dec 19 2023