Discover a Simple Billing Statement Sample for Product Management

Simple billing statement sample for Product Management

hello ladies and gentlemen this is Destiny from desix and welcome back to another video in the e-commerce project using Jango in this one we'll get started working with other list other detail and other item detail we'll also work with updating the status and basically everything that has to do with managing the order that is what we working on hopefully you enjoy the video and learn something new so let's get started so the very first thing I'm going to do is open up my code editor and we'll be writing a couple of views before we start actually implementing the template so let's get started without wasting any more time I'm going to open up the vendor I want to close up all this and open up the vendor views py so we have like four views to write starting with the other list so firstly the login required and I'm going to call this one orders just passing request in there so all I need to do is just grab all the orders so I'm going to say orders should be equal to store model. orders. objects. filter by vendor is equal to request. user and I only want to get the order that has been paid for so I'll say payment uncore status should be equal to paid very good immediately after fetching all the orders let's create a context and this context to be used to pass those orders in so that we can access them in our template all right all right so after doing this the next thing will be to create a template I'm just going to take one that we already had so we don't have to retype everything from beginning then I just have to replace the products with orders and we are done that is it for the order lists let's create another one for the order detail so I'm just going to say Define _ detail and I'm going to pass in requests and _ ID very good after that I'm going to f order by saying store models. order doobs doget where vendors is equal to request do user and also _ ID is equal to _ ID very good and I also want to make sure that payment uncore status is equal to feed all right there you go so what we doing over here is getting one particular order based on whatever ID we are passing in here okay and after we get that order what do we want to do we can create a context again just like we have over here and in fact if you don't want to have to retype out all this you can always take the context and paste it okay and just replace the texts instead so the template name is going to be order deto HTML very good now let's also create an other item detail so it's will look almost identical to those one so I'm just going to duplicate it and call this instead of order detail order itmore detail and it's going to take request order ID and based on the facts that we'll be fetching an order item we also need to pass in the item id very good now we fetched one order let's go ahead and fetch it item so we will say item should be equal to store models. order item doobs do get where the item or let me see do we have any field called item id oh yeah we do so yeah item id should be equal to item id good and also order should be equal to order so what we are doing here is making sure that we are fetching an item that matches whatever ID we passed in here when we call this function and also we are still boiling down the the filter to make sure that this order that we fetched over here is actually the order that has this item linked to it okay so if you pass in order here you can also go ahead and pass in item so item item and that is everything that we want and also you can pass in the other item detail. HTML and context guys that is it so we have just two more views to create and we should be done one of the views that we create now is um let me make sure that I'm yeah and I'm going to say login required and for this one I'm going to create a view that is going to help us update the other status and also another view that is going to help us update the other item status So based on the fact that this is a multivendor e-commerce platform different vendors we have different items so what we do is this we update the order item by vendors and maybe the order will be updated when the user goes to pick up their item okay I don't know if that makes sense so if you've ordered something from say Jia for Africa when you make an order different vendors actually have the different orders so the vendors might actually be the ones that Mark the order as delivered that is when they have delivered the order or maybe when the order has been shipped or maybe when the order has been you know dispatched to the center where it should be collected but after the order gets shipped and all the other items in that order gets shipped and delivered the officials maybe the platform officials will then Mark the order as completed when the user goes to pick it up so we need to create two functions to help us do this the very first one is going to be the update order update _ status and we just pass in request and _ ID very good and after that I'm going to say order should be equal to store models do order do object. getet where vendors is equal to the vendor that is currently logged in and the _ ID is equal to the order ID that we're trying to get and the order is paid so payment status is paid good when you have done that we then need to go ahead and check for something request. method is equal equal to post then we want to update to other status so I'll say order underscore status should be equal to now the front end or the template is going to send another status to us the user will have to select another status from a drop down pending shipped cancelled delivered now when they select the other status and hit update order we will send a request to the back end and this is the view that is going to catch that request so we will be sending the order request to the request post so what we just need to do is say request do post and we want to grab the value of the other status that they trying to update and it will be stored in an input name called _ status don't worry when work with the front end you'll see how this works so all we need to say is order dot _ status should be equal to _ status then we save order do save very good and after we've done that we can then say messages do success okay let's import messages we don't have it imported I think that should be from Jango do contri import messages very good and after we've imported that we scroll back to the bottom and say messages to success passing request in here and then we need to then say maybe something like order updated order status updated good and we need to return redirect them to somewhere we don't have redirect so let's go ahead and import it import redirect good and then where do we want to redirect them to Let's redirect them to the order detail page so we say vendor _ detail then order _ ID good so this is a very simple function that will help us update and order status based on whatever information the user sent to us from the front end which might be pending can who failed delivered or fulfilled okay then after we do that we update the other status in the database and save the newly updated order status show them a message that says hey your order status have been updated and redirect them back to the vendor detail page one more thing that we are missing is just the comma over here so we add that and we should be done very good so another thing that we need to pass in is one main return redirect in case everything when wrong so if it's not request method just return them back to the other other detail like that very very very very good so now that we have done this we need to create another one you could duplicate this so that we don't have to retype everything and say other other update other item status it takes other ID and also it will take item id now you need to fetch the item just like we did here if you don't want to have to type that out just copy and paste and you're good to go so after this we check if request do method is posted then say order do status we grab the other status again this time around we want to grab two more things one of it being the shipping service so shipping service I'm going to grab that and I'm also going to grab the tracking ID tracking ID so there's going to be an input for the vendor to actually choose a shipping service whether DHL FedEx or whatever and add the tracking ID that was given to them when they shipped the items and after they have typed all this in the input we grab them using this code and then we update so we say item do order status should be equal to other status we also want to say item do shipping service should be equal to shipping service and finally item do tracking ID should be equal to tracking ID then and we save by saying item. save very very good now instead of saying other status updated they should be item status updated and um let's still return back to order item detail Okay order. order ID and item do Item ID so guys one thing I want to say before we continue is in a very short time there will be a jungle complet crash course that will be dropping where we will indepthly explain every single thing about Jango so for any reason you are still finding a difficult understanding simple things like maybe parameters and how we use them like this or how redirect works or just basic gungle logic and you still don't really know how to wrap your head around them in a very short time a very comprehensive and details tutorial will be coming out where we will go step by step and explain everything you need to know concerning jangle so that you can start writing better jangle code and we'll also be doing this using the help of twws which is a tool that I am creating that is going to help us follow tutorials step by step in a very short time it's going to be active and I'll will notify everyone about that okay so after you have created this that is everything that we want to create now the next thing will be to go ahead and start configuring the URLs for all this and after that we should start working with the templates okay so I'm just going to duplicate this one and call ERS oops not that but ordas and also replace it for the route and also for the name same thing I'm going to do for the order detail so I'm going to say order detail and replace it for the name and also for the route and for other detail you already know that it needs to take the _ ID parameter because somewhere here in the view we have order ID does this make sense and after you have done that we will go ahead and duplicate this again and this time around this one is going to be order item detail same thing for here same thing for here but the difference with this one is that you also need to pass in the item ID and that is because you can clearly see that when we come to this view we have an item id here so whenever this function is called you must provide variable or a parameter here or there's going to be an issue okay so that is why we adding this item id over here two more things that we need to add one is going to be order update update order status and we need to change it for the name and also we need to change it for the route good for update other status it doesn't need an item ID so I'm just going to remove the item id good but then we have another one that is going to be called update other item id good then we just need to replace that one here in the name and also replace it here in the route but this one then need an item ID so itmore ID and we done that is pretty much it we have everything that we need in case there is an issue we will make sure to get back here and fix them okay so yep everything looks good let's start configuring all this now all I need to do is get back to my vendor template not the zero put to my templates and close the customers we don't need this close the store vendor sidebar now I want you to replace this order over here with the actual URL so I'm going to say URLs and over here I will just say store and orders after you've done that one important thing you also need to do is add this class okay so that we know when the order is active or when it's not active Okay so I'm going to add that class over there and say hey if the request. part is vendor SL orders then add the active class else remove the active class very good so with all this out of the way when you open up your browser you can now reload this page and there shouldn't be an error okay well there is an error so let's see what's happening um reverse for ERS not found because ERS is not a valid view okay let's see the error is because we said store here instead of vendor now when we reload everything should work well and there should be an error there you go so clicking on this will show us an error that says vendor let's see what's going on it says canot resolve keyword vendor oh yeah I made a mistake it should be vendos and not vendor so let's check out the view for the for the orders see it should be vendors over here good and also let's see if we made such mistake again this is vendors this is vendors this is vendors this is vendors all right no more mistakes now we could get back here and reload this page and good we don't have any error anymore so let's configure the templates I'm going to get back to my zero templates and I have three templates that I need to I need to use now right I need to add the other detail let me see just hold on the other other item detail other detail and others HTML so let's grab those we got the order detail other item detail and others copy this control C and then get back to your vendor dashboard and paste the templates so that when we get back here and reload we should now see that oh your base is missing so please open each and every one of these and change this vendor SL Bas to store / Bas um is he in the store please hold on let me see store no paral okay please change it to paral good now we need to also do the same thing for the let me see where we have the templates templat should be close this close this there you go here's the template vendor so I want to do the same thing for orders change vendor to partials and for the order item detail also change vendor to P house good now let's see what we have when we reload no more problems and everything looks good right yep so now let's go ahead and change up this informations starting with with listing the orders so in the orders HTML instead of five orders here just say orders do count and let's see if that is working as expected so when we reload we shouldn't see five but some other number now seven which means we have seven orders so all we got to do now is Loop through items I'm going to collapse this and um I believe that should be the item that we should be looping through so I'm going to say for order in orders so for order in orders and I'll paste what I just copied okay and now what I going to do is basically go into the database and loop through the seven orders that we currently have and display it for us over there on our page so let's see when you reload you can now see 1 2 3 4 5 6 7 and so on so after listing through this orders we can open this up and change up the informations like the order ID so for this one all we just need to say is order do _ ID and now we should see that all the order IDs here will be changed to the actual order ID can you see that yep so now after we have done that we can now go ahead and update this with the order detail so create a new URL tag and I'm going to say vendors or rather vendor then colume _ detail remember it needs to order do _ ID for it to actually not show an error and know how to navigate the order detail page so after you have added that in let's Loop through the items so this one that has single item I want you to copy this or cut it rather and say for item in order that we have already looped through at the top then say _ items. all which we wrote in the order model decorator order model method rather then we paste this and now we should see each product that is associated with each order you can see this has one product one product one product I think all this actually just have one product in them okay but let's see what we have going on here so start changing up the the items for example okay you know what let me close the side I have space to work with all right so after looking through all this let's start changing up the items this over here will be the other image so I will just say URLs um not URLs my bad that should be Jango variable and for that we just need to say item. product. image. URL very good and after we've done that let's see what we have over here reload there you go we have this camera image you could also change the prod Name by saying product item do product. name and we also want to do the same thing for the vendor so for the vendor name you could just say item. product. vendor do username pipe title so that's the first letter will be capitalized um you can see Destiny showing up there or if you don't want to do this you could even say vendor. profile. for name and now when you reload this you should see Destiny sound good now color red we just need to check for something here I'm going to cut this and say if item. color actually exists that is only when I want to show the color same thing happens for size if item do size actually exist that is only when I want to show the size so that is it for the size and color and actually change the size yeah so size I'm going to say item do size and for color I'm going to say item do color very good and also for the price you just need to say item. product. price and we should be done with the product now when you reload you can see $10 $10 $10 and yep let's change the shipping status from from shei I'm just going to say or order do _ status whoops good like that now how about payment status I'm going to say order. payment uncore status good and for order dates and time I'm going to say order dot dates good so that is everything that we need over here and um paid using instead of credit card I'm just going to say order do payment uncore method and the order total is going to be order dot total very good so now when you reload you can see paid using PayPal raise or pay with the total showing up over here all right that is pretty much it for this let's work with order detail page so for us to get started with order detail all we just need to do is click on this button over here and then let's change up all the informations that we have here how do we get started with that you need to open up the order detail. HTML and start off with changing the order do order ID okay that is the very first thing and after you've done that what is the next thing we should do I think we should probably start with the um let me see okay let's start with updating the other status which is this one over here and to do that the action should go to the vendor then update uncore _ status and remember for that to update it needs the order do order ID for you to update and after you've done that I'll replace this over here with the csrf so after replacing that with the csrf that is basically everything that we want to do and name over here is already order status that is how we are able to grab this from the template okay by adding other status as a name over here and after that is done I believe that should be everything that we need so let's just get back yeah let me see So currently the other status that we have should be showing up over here right if we reload this page now we we'll always keep seeing pending which is the first thing here so what if we change this other status to ships and now if we save see other status has been dated but why is it still showing pending over here instead of shipped that is because we need to dynamically fetch the value and how do we do that so to do that you need to write a conditional statement here remove the selected and then you need to say if and if what if order dot order underscore status is equal to p in so if you to go to pending then that is when we want to show selected in here so selected very good so now I'm going to take all this the simple line and put them everywhere here good just like that so now you want to change this pending to processing and change this one to Shi fulfilled cancelled I'm just going to put all the same things here good so now when we reload this we should now see Shi there you go that is because it will go through each and every one of this and if other the status currently is shipped it will mark it as selected and it will do the same thing for every other one that we have over here okay and we could also change any of this maybe to cancel and when you save you can see cancelled remains so let's go back to pending which was where we were on so we went back to pending and now let's change up the other informations starting from here so this is other items right which means I'm going to collapse this and let's Loop through other items here by saying for item in order do _ item items. all I want to display this other item down here and now when we reload let's see what happens there you go we still have only one that is totally good let's start changing the product name image and every other thing that we have so I believe we already have this in the orders yep we sure do have it here in the items so what I'm just going to do now is copy this and I'm going to put it in the order detail here okay let me minimize this and I'm just going to put it here and save good so now when we reload we should not be able to see the image and everything showing up like this very very good the only thing that we might be missing is just the I think the icon to go to the other item detail so to do that I'm going to say div and we should give it a class like this also okay so give it a class like this then create an a tag and say what we want to have in here let me fix the indentation and say what I want to have in here should be an i icon so class f f a-i and let's see what we have okay this is what we currently have I don't really like that so let's fix it this one is six I'm going to change it to 4 XL2 6 8 10 12 now this should be good there you go so what I just did was divide the columns over here by 12 so the total of all the columns must be 12 so then we have four here 4 + 2 is 6 6 + 2 is 8 9 10 11 12 which now made this to be on the same line good and one thing you can do is just give this a class of say BTN bn- primary very good okay and let's see how this looks all right we could work with that now what else can we do here well you know what let's change this up a bit instead of BTN primary I'm just going to say BG primary so BG primary and I want to say text white btns SM and then rounded so that so that the button looks good like the save button here so now when we reload we should be able to see it looking more better all right all good that is what I want let's also add this URL by saying vendor then order uncore item uncore detail then over here I'm going to say order do _ ID and item do itmore ID now when we reload we shouldn't get an error that was working perfectly well so let's go ahead and change up every other informations that relates to the order that's related to the order like the sub total so this one is going to be order. soore total and I'm just going to pass in an in comma over there you don't want to have to retype all this one by one you could just grab this and replace it with other those ones so this one is going to be order do shipping and this one is going to be order do stxs and this one is going to be order do discount order do discount and um okay instead of this kind I think I called it saved rather this one is going to be order dot total very good now for the biod data instead of this it's going to be order dot address do _ name remove the in comma we don't need the in comma Now same thing is going to happen for the email and same thing is going to happen for the phone so this one is going to be email this one here is going to be mobile very good and also for the address this one is going to be order. address. address this one is going to be order. address. City this one is going to be order. address. State and it's going to be order. address. country good and for zip code let's not forget that it be order. address. zore code so now when we reload this we should see all the informations coming in here that is it perfectly well if there is no zip code let's say hey the default if there is no zip code should be no zip code instead of it to show none over here we want it to show no zip code that's more friendly all right that is everything that I want now let's go over to the other detail other item detail rather and we should be done by the time we are done with the other item detail so for this one what do we need to do so the other thing we need to do firstly is change up this information here and for us to be able to do that we just need to get back to our code editor other detail and get back to where we looped through the items here copy everything here inside the item minus the loop I'm not copying the loop take note of that and in the other item detail I'm going to replace it with this so replace it with um hold on let me see yep I'm replacing it with this okay so replace and let's see how it looks here good that's what I wanted there's a there's a little bit of problem now the problem is it should be replaced from here instead okay please replace it from here rather good from the from this one that says row align it itms Center justify content center that is what you should replace with what you copied from the other detail okay I hope that makes sense and when you reload this should be looking better now let's change up the shipping status shipping service and the tracking ID and how do we do all this ones quite simple let's get back to our page and scroll all the way to where we have this form here now those form is going to have an action this action is going to be vendor colume update uncore order underscore item uncore status and then we need order _ ID and also item do itmore ID good so when you've done that let's also change the shipping status this one we have pending processing ships fulfilled and cancelled it's almost the same thing with the one we had over here so if you don't want to have to type all this out again you could just copy this one you see this one here please just copy the select let's save ourselves some time and then the other item detail all you need to do is replace it with the select here replace what you copied with this one okay and also we have this one over here um we don't need to replace anything we have to type it instead so here create an if statement and check if item do shipping service if item shipping service is equal to DHL because you can see that we're currently working with DHL here then we want to make it selected all good let me put this on one line on line one line very good now see that you can now take this and put it for the other ones that we have here and just change their values to FedEx ups and God is good Logistics very very very good good last one is for the tracking ID for this value over here change it to item do tracking ID okay and make sure that the name here is tracking ID and the name for the shipping service is shipping service and the name for the other status is other status and also the button should have a type of button all right so one thing that we shouldn't Miss is the csrf or there's going to be a big problem and after you have added the csrf let's refresh the page no errors but now if we change this item from pending to shipped this vendor now is trying to mark this particular item as shipped and they shipped is via FedEx and then the tracking it was some random number like this and they save shipping info see shipping item sh item status updated now you can see Fed X this and wow this isn't changing I made it fulfilled why is it not changing so let's see what's go oh that's the problem over here we have order order status instead of item order status so please change that now we should see shipped good that is pretty much it it's start working as expected just remove this I icon here we don't need it anymore so I'm going to remove the I icon good good good there you go this is everything that we have and it's working perfectly well for orders so we can go back clicking on this will take us back so let's look for that button that takes us back um oh we haven't even changed this other ID so let's do that so I'm going to say order do _ ID and for us to go back it needs to be a URL that points to vendor _ detail and remember order detail URL needs to order _ ID for it to go back okay and um yep that is it that is pretty much everything that we have so now when we click on this we will be able to go back to the main order you can see and we can update the main order so whatever you want processing there you go order status updated we can view each items so if we have multiple items the vendor can view each item and add tracking ID to each item okay so that is why it's a multivendor e-commerce platform and this is how we manage shipping so you can choose a service UPS if for any reason the service that you used wasn't shown over here maybe used something else then all you just need to do is contact the administration the site admin and tell them hey there's a shipping service that is not included please include it now it's left for the admin to go ahead and add a new shipping service and deploy the application for the vendors but for now this is pretty much how it works and this is everything that we have so that is pretty much it guys in the next one I believe we should get started working with coupons and everything that has to do with coupons like updating coupon deleting and creating coupons and that would be really cool hopefully you enjoyed the video and learned something new if there is something that you don't understand let me know in the comment section and I'll be very happy to help you out Des is almost live and almost launching everything is almost ready we are currently in the process of creating content for everything that we'll be needing on the platform and hopefully it will be really nice when we are done for now that is going to be it I to see you in the next video and until then my love peace out