Coding

Laravel 5.2 PHP – Build a Shopping Cart – #9 Cart Views

  • 00:00:00 to actually show our card in our app and
  • 00:00:04 not only see it by dumping I need to do
  • 00:00:07 some extra steps of course the first
  • 00:00:10 step very easy one is to go to my header
  • 00:00:12 and here where I have my shopping cart
  • 00:00:16 list item my shopping cart link I want
  • 00:00:19 to display a badge with the number of
  • 00:00:21 items in the shopping cart so that in
  • 00:00:24 our app here if I go back we're able to
  • 00:00:27 see a number next to the shopping cart
  • 00:00:28 link to see how many items we do have in
  • 00:00:30 a shopping cart
  • 00:00:31 so I'll just reformat that it's a bit
  • 00:00:34 easier to type so I'll have my shopping
  • 00:00:40 cart here and then I'll use the
  • 00:00:43 bootstrap batch class on a span here to
  • 00:00:47 actually display the number of items for
  • 00:00:52 that I'll use played here play
  • 00:00:54 expression my session for save and here
  • 00:00:57 I'll check if we do have this card in
  • 00:01:00 the session if so then I want you get
  • 00:01:05 the card and of course then I want to
  • 00:01:08 get the total quantity otherwise I'll
  • 00:01:12 display nothing course a different way
  • 00:01:15 would have been to use an if statement
  • 00:01:17 to conditionally add header or detach
  • 00:01:19 dispatch but whatever works for you
  • 00:01:21 so if dad if I reload we don't see
  • 00:01:24 anything but I click add here we see one
  • 00:01:27 if I Claire click add here we see two so
  • 00:01:29 this seems to work that's great
  • 00:01:31 but still if we click on it we're not
  • 00:01:33 taken to the shopping cart and we don't
  • 00:01:35 see anything here so let's work on that
  • 00:01:36 next I'll add the link immediately so
  • 00:01:40 that I don't forget it again so I want
  • 00:01:42 to link to a route named product
  • 00:01:44 shopping cart now in my routes file I
  • 00:01:49 need to create this route so I'm copying
  • 00:01:51 this at your shopping cart route course
  • 00:01:54 change the path to be shopping cart and
  • 00:01:57 I don't need a parameter here the name
  • 00:02:00 should be product shopping cart
  • 00:02:06 and here I will just access the get card
  • 00:02:09 action which doesn't exist yet so let's
  • 00:02:12 welcome that I'll add a new function
  • 00:02:15 public function get card and here I want
  • 00:02:21 to be able to fetch my card so what I'll
  • 00:02:24 do here is I'll first check if my
  • 00:02:28 session has this card object so if we do
  • 00:02:33 have a card stored in the session and if
  • 00:02:36 this is not the case that's what I'm
  • 00:02:38 actually checking if this is not the
  • 00:02:40 case then I want to return a view I will
  • 00:02:43 return the shopping cart view show the
  • 00:02:49 view in my shop shopping cart folder
  • 00:02:51 which I haven't created yet I'll do so
  • 00:02:54 in a second so what turn this view and I
  • 00:02:57 will return products a variable which I
  • 00:03:00 will set to null so basically I will
  • 00:03:04 return the view but in this view all I
  • 00:03:06 want to check if we actually are able to
  • 00:03:08 display some products if some products
  • 00:03:10 are in a shopping cart and in this case
  • 00:03:12 I would return null so that in the view
  • 00:03:14 I can appropriately display something
  • 00:03:16 like please add items or anything like
  • 00:03:18 that
  • 00:03:20 otherwise I will if we do have a card
  • 00:03:23 I'll fetch it here so fetch it through
  • 00:03:26 session get card and I'll create a new
  • 00:03:30 card as before as I said I'll always do
  • 00:03:32 that I'll pass the old card just to
  • 00:03:37 recalculate everything and yes you
  • 00:03:39 should be able to use the old cars here
  • 00:03:41 directly
  • 00:03:42 that's just more of a good step here if
  • 00:03:45 you were to add certain functionalities
  • 00:03:46 to your card model which need to run
  • 00:03:50 each time you recreate it for example if
  • 00:03:52 you had a total price and quantity which
  • 00:03:55 needs this old card to be correct or
  • 00:03:58 anything like that
  • 00:04:00 so back the product controller I'm
  • 00:04:04 creating my card and then I return view
  • 00:04:07 shop
  • 00:04:09 shopping card again I still have to
  • 00:04:13 create this view I'll add or I'll return
  • 00:04:16 my products and of course I can fetch
  • 00:04:18 them not cookie thank you card items and
  • 00:04:22 I'll return the total price which I can
  • 00:04:26 also fetch from my card where I do have
  • 00:04:29 this till price property so the last
  • 00:04:34 step therefore is to create this view in
  • 00:04:36 the shop folder in the views folder so a
  • 00:04:39 shopping cart blades dot php' of course
  • 00:04:43 and then here what I'll do is I'll first
  • 00:04:47 copy the beginning of the other file
  • 00:04:49 here so it's don't need that but so that
  • 00:04:52 I already got all these sections and so
  • 00:04:55 on and then in the content here what I
  • 00:04:59 want to do is I will check if I actually
  • 00:05:04 do have my card
  • 00:05:13 and also have a else statement and that
  • 00:05:16 close this block do you know if I want
  • 00:05:20 to simply display a message like your
  • 00:05:21 card is empty or the actual items and
  • 00:05:24 therefore I can actually change this to
  • 00:05:28 not pass any products here now that I
  • 00:05:30 think about it so in the case that we
  • 00:05:33 don't have a card I may just return the
  • 00:05:34 view since I'm checking this anyways in
  • 00:05:36 my view here let's start with the case
  • 00:05:40 that we do have a card so we have items
  • 00:05:43 in the card I'll use bootstrap to create
  • 00:05:47 a row and then some columns here and yes
  • 00:05:52 not a thing of it I could have left out
  • 00:05:55 the MD part I had a different style
  • 00:05:58 before anyways I'm going to leave it
  • 00:06:00 here that's not really a bootstrap of
  • 00:06:02 course here right so I'll add an ordered
  • 00:06:06 list in here or an unreleased with the
  • 00:06:08 bootstrap class list group and in there
  • 00:06:12 I want to loop through all my products
  • 00:06:16 so products as product and products of
  • 00:06:20 course is the item groups in my shopping
  • 00:06:24 cart don't forget that I don't have one
  • 00:06:27 item multiple times but I do have
  • 00:06:28 multiple items as aggregated groups kind
  • 00:06:32 of so oops that is what I'll loop
  • 00:06:35 through and inside here I will have a
  • 00:06:38 list group just we'll get the class list
  • 00:06:40 group item and in this list item I will
  • 00:06:44 have several things I want to have a
  • 00:06:46 badge where I display the quantity let's
  • 00:06:49 say two and of course this batch here is
  • 00:06:54 a which class and it doesn't matter
  • 00:06:56 where you place this element it will
  • 00:06:57 always float on the right that's how it
  • 00:06:59 is configured by bootstrap I'll then
  • 00:07:02 have my title my product title and I'll
  • 00:07:06 soon or I can replace it right now why
  • 00:07:08 not so I can access this with my within
  • 00:07:13 blade template expression boy
  • 00:07:16 accessing my product and then the
  • 00:07:18 quantity remember we're on the on the
  • 00:07:25 item group level here so this will refer
  • 00:07:28 to the quantity of each product groups
  • 00:07:30 of Harry Potter for example that we have
  • 00:07:32 three times the same Harry Potter book
  • 00:07:34 in our shopping cart then the Tyler so
  • 00:07:39 product then I have to access the
  • 00:07:43 individual item here and then the title
  • 00:07:49 of that item then I'll also add a span
  • 00:07:55 here with the CSS classes success nope t
  • 00:08:00 classes label and ylabel success again
  • 00:08:04 bootstrap classes of course this label
  • 00:08:07 should display me the overall price for
  • 00:08:09 this group so I'll also enter expression
  • 00:08:13 here product and then this is just the
  • 00:08:17 price field again on the group level and
  • 00:08:20 with that I get all the information set
  • 00:08:23 up now I also want to add a button this
  • 00:08:27 button should be a drop-down button
  • 00:08:30 where I can for example remove one item
  • 00:08:32 or remove all of that group and so on so
  • 00:08:36 I'll use boots began to create a button
  • 00:08:38 group here to create a drop-down button
  • 00:08:40 basically so this will be a button which
  • 00:08:44 gets the classes button button primary
  • 00:08:49 button exit button excess and drop-down
  • 00:08:56 toggle so a lot of bootstrap related
  • 00:08:59 stuff to have a working drop down
  • 00:09:02 looking like button and then still
  • 00:09:06 effort yes that's a great feature and
  • 00:09:08 then still a forgot DD here drop-down
  • 00:09:11 toggle so now this should be alright
  • 00:09:13 I'll make this off type button and I'll
  • 00:09:16 also add the data toggle attribute here
  • 00:09:20 to tell bootstrap that this button will
  • 00:09:23 toggle a drop-down so that's all needed
  • 00:09:26 for bootstrap to work right
  • 00:09:27 then I'll give it a label of action and
  • 00:09:30 I'll add this span with the carrot or
  • 00:09:36 carry don't know class here you have
  • 00:09:39 this little error pointing to the bottom
  • 00:09:41 so that we see that this is a drop down
  • 00:09:42 so just a little image or I can hear
  • 00:09:45 that's the button but also I need to add
  • 00:09:49 the drop down itself so I can do this by
  • 00:09:53 adding drop down menu an unrealistic
  • 00:09:57 represents the menu shown when I click
  • 00:10:00 this button and here I'll have a list
  • 00:10:03 item with link I'll hook those links up
  • 00:10:05 later and I want to be able to either
  • 00:10:08 just remove one item off that so if we
  • 00:10:10 have three times the reporter remove one
  • 00:10:12 book or remove all of them and of course
  • 00:10:17 you'll see this working template soon so
  • 00:10:21 that were always there but there are
  • 00:10:23 still some things missing
  • 00:10:24 I'll grab all of that code including the
  • 00:10:28 opening tag here even because I am in
  • 00:10:30 good mood today and I will get rid of
  • 00:10:34 the unordered list I will keep the rest
  • 00:10:36 usually row in two columns to add a
  • 00:10:39 strong tag where I in will output the
  • 00:10:41 total price of my shopping cart and I
  • 00:10:47 can access this with the total price
  • 00:10:49 variable which I'm passing the product
  • 00:10:51 controller if you remember this total
  • 00:10:53 price here so the total price of my
  • 00:10:56 shopping cart I'll copy that one more
  • 00:10:59 time and I'll insert a horizontal line
  • 00:11:04 between that price and the next part and
  • 00:11:07 here I want to have a checkout button
  • 00:11:09 which will later hook on so here I'll
  • 00:11:13 add a button of type button that doesn't
  • 00:11:17 work type button and I'll give it some
  • 00:11:23 classes of button button success to make
  • 00:11:26 it green because everyone wants to click
  • 00:11:28 the green button yay and give it a
  • 00:11:30 caption of checkout now in the else
  • 00:11:34 block here I'll also copy this
  • 00:11:37 row and column thing but all I want to
  • 00:11:41 have here is h2 tag saying no items in
  • 00:11:43 cart so that's been a lot of work and
  • 00:11:49 yeah let's see if all that does work
  • 00:11:52 indeed so we have two items on a
  • 00:11:54 shopping cart if I click here wow works
  • 00:11:57 right away of course I was expecting
  • 00:11:59 that so here we see Harry Potter Lord
  • 00:12:01 rings if I go back that doesn't work at
  • 00:12:05 least something so if I hook up my brand
  • 00:12:07 here so that I have an easy way of going
  • 00:12:10 back to my root page the product index
  • 00:12:13 page here so now if I reload that then
  • 00:12:16 even that will work astonishing so now
  • 00:12:19 if I add this one here we see with free
  • 00:12:22 items that looks great there's dropdowns
  • 00:12:26 work the overall price seems to be
  • 00:12:28 correct – if I add Lord of the Rings two
  • 00:12:31 times we have it now three times the
  • 00:12:35 price still seems to be alright great so
  • 00:12:39 with that we got a working shopping card
  • 00:12:41 you saw have to store it in session how
  • 00:12:43 do you configure it dynamically how to
  • 00:12:45 add new items see to it how to output it
  • 00:12:48 of course and if that were well prepared
  • 00:12:51 to use it in the next steps of this
  • 00:12:53 series I can't wait to start there and
  • 00:12:56 see you there bye