Drupal Commerce Module Tutorial 1: Setting up Product Types, Products and Product Displays

[Music] [Applause] [Music] hello welcome back to the trial of sir - Albert calm IMPD worsening the eternal ones to developer specializing in Drupal and in this first food is jor-el of our 10-part video tutorial series on the Drupal 7 commerce module I want to introduce you to how we can set up products and get them ready for display and sale on our site without customizing too much before we do that over at Toronto Alissa developer comm / store here you can support me by purchasing video tutorial series that I've already completed these helped me to go and continue to develop these and keep it free keep them frequent on YouTube they're only 20 dollars and there are discounts if you go ahead and purchase additional video tutorials at the same time if you follow along with all my other video tutorial series you'll know that I have a couple tutorials that I haven't put up here yet I just haven't had the time to get to them yet but I would like to get them up for sale if you're interested in purchasing them they are introduction to PHP and Drupal 7 module development where we looked at creating the flag application module that's something you can find on YouTube now if you're interested in wondering about look now if you don't have the money to purchase a video tutorial series but you would like to help out and contribute please just give this video a thumbs up or leave a comment on youtube I greatly appreciate that YouTube uses that information to track how engaged people are in the videos and actually recommend them to other people that are on YouTube so that does help me additionally if you haven't already please subscribe to my channel you'll know before and my previous videos Jarl I was aiming to hit 4,000 subscribers I've now surpassed that and I'm continuing to shoot for improvements so if you haven't subscribed please do so I greatly appreciate that before now we said all that let's go ahead and get started with this for digital series as I mentioned I want to show you in this tutorial series how we can get a product created out there displayed ready for sale I said I'm not going to set up any payment configurations here but in later on the video tutorial series what I want to show you is how we start customizing these products how we customize their display how we start accepting payments how we can do you know some shipping weights taxes all that kind of stuff I want to cover in this video tutorial series as well time permitting what look at is some custom stuff like how do we sell files kind of we sell rolls take a look at registrations that kind of thing and some additional modules that we can use to plug into Drupal commerce to add some additional functionality that said localhost / commerce / installed that page fee brand new install if you're not sure why I'm at localhost or what's going on here you might want to check out my other video tutorial series this is actually local development I'm using a lamp server because I'm on Windows we go ahead save and continue' save and continue and now my database name this is something I've pretty configured and this is all on my own computer so we're all good go ahead and save and continue so site name Commerce tutorial series that's fine username whatever doesn't matter test on test calm default settings got to represent especially after a big gold medal victory sorry for everybody else in the world that loves Hakeem didn't get gold medal let's go ahead and visit our new site we're over here brand new site nice and install all we have is Drupal core right now now in other videos duros i've showed you how to install modules through the interface and actually ft peeing what i'm gonna do in this video tutorial series is used rush that's a nice command-line tool if you're not sure what it is highly recommend just do a quick search for it this will save you a ton of time and headaches I've gone ahead I've downloaded all the modules that I need so typically what I do is gold rush rush DL and then a list of modules commerce whatever instead I've done all that so I'm gonna start enabling things so Josh Ian - why address field is a module that commerce requires I'll do all the Commerce required modules first and then talk about the other one so CTools commerce required entity rules token use views UI and then other modules that I find helpful are admin menu module filter auto or go ahead and save that okay great so let's enable all those modules last thing you need to do is rush disable overlay and toolbar those are two Drupal core modules which I'm not a huge fan of rap my why flag okay great now what we're gonna do is go to modules perfectly okay to redirect let's go to commerce let's start enabling things so I need cart checkout converse UI commerce customer UI customer just enable everything okay that's what I'm gonna do so let's go through all this stuff except for the payment example knock-knees payment example payment price race UI reference so everything except for the payment example is over and abling it's gonna tell me I need rules UI to install tax UI that's fine okay and you'll notice now I've got this nice store drop down menu which comes from Commerce and I can go ahead and enable a bunch of stuff here now we're gonna take a quick two minute theoretical detailer detail here detour here if you don't care about this just fast forward a couple minutes I recommend you listen to it cause it'll give me an idea of what Drupal commerce is all about in Drupal 7 what we what the community went towards was what's called entities so you can think of entity in terms of like a piece of content right so it has you know a common structure so nodes are entities users or entities comments are entities and what it does is it's a fundamental underlying structure to the data on your site and so by using this common background common functionality and making everything an entity what Drupal allowed to do is create common framework so that you can integrate modules together you know make a nice API that's application programming interface that's easy to use and hide some of the magic that Drupal those behind the scenes now other commerce solutions have not gone the HT route those commerce is so new for Drupal and it was developed in Drupal 7 it did it from the ground up and used entities so you saw one more enable a bunch of modules there there were all these fragmented pieces and they represented components to each part of an e-commerce solution so you had your cart you had your customer ginger products you had all of this different stuff taxes and they're all based on entities and so the reason why that's nice is because they integrate nicely with other systems in Drupal so as we're working through this you'll see that we're going to be using this module called views and views provides a nice user interface to create these nice displays on your on your site so you create new pages or or blocks or different ways of rendering content without having to write all these sequel queries so commerce is nice because it's based on entities and and views uses entities or leverages the entity framework they can plug in nicely together and so because commerce which is views we can easily change any of the screens that they actually define is their customized a lot of stuff and you'll see that as we were to do that the other thing is it integrates nicely with rules and so rules is a module that allows you to do certain things at certain times responding to certain actions on your site so if a user creates an order commerce will invoke a rule and then you can make something happen on your site so I'm now send an email it says thanks for your order automatically send it out and you don't have to touch any code and that's because of this nice integration between rules and commerce so that's the brief detour you're gonna see this as we start working through things the first thing we're going to do and I'm going to show you is looking at custom profiles so I can go in and I can click on this profile type and you'll see that I have one specific profile type and it's billing information and this is what comes default with Drupal or s or Drupal commerce if I go manage fields you can see that all it has is an address field this comes from the address field module we didn't download it and enabled and if I edit this you can see it's a required field I've got available countries and the information that's required in the address field block how many addresses I want all that kind of stuff so that's nice this is where being an entity is kind of nice because I can add fields to this entities have a common framework and they integrate with Drupal core which allows entities to be feeling the both and so if I want to add something on top of address say I don't know a membership ID or something because I'm linking to some external service I can go ahead and add that field and then when a person is checking out they have to add that when they go ahead and they complete their order and you'll see this throughout Drupal commerce as we're working through things and we're going to leverage this so for now we're just going to use this the standard billing information profile type that's something someone's going to fill out when they're purchasing an order and we'll see that as we complete this video tutorial series or this video tutorial but now what I'm going to do is rather than show you orders because these are we don't have any orders we just install this we're look at products and so I don't have any products that I've created yet I can look at product types and what these are are different types of products that we will be selling through our site and so we'll think about this in terms of a store you know you could have a product type which would have common stuff to it so I'll think of it as shoes you're selling shoes on your site create that as a product type you know you'll have a size you'll have a color I don't know if your women shoes you know he'll and whatever but then you might sell t-shirts and so t-shirts would have their own different set of attributes associated with them so you could have a size but it's a different size it's a large medium small you have a color which could be completely different from your shoe color so those are two fundamental different products so you want to create different product types so in this video tutorial what we're going to do is we're going to create a product type for images so I want to sell dog images on my site so I'm going to create that as a product type because it's going to have a file associated with it it's gonna be a fundamental structure that's different from other products that I could sell on my site so I'm going to name this pictures I can give it a description I don't care you're go save and add fields and you'll see here this is where we get to leverage the fact that commerce uses entities and so product types are feel double so I can go in here and I can say let's add a dog image so I'm gonna say dog picture right and I'm gonna choose an image if you don't have this ability it's probably because something is disabled in Drupal core so go check that you know how to save this don't want to default so required because it's an actual picture so I'm gonna have a picture I'm gonna save this to dog images so this is that you know where my file images are stored it's gonna have a subdirectory for dog images don't care about my minimum maximum resolution because it's only me uploading I'm gonna enable enable the author of the fields and title fields so that I have some accessibility and I also have some search engine optimization and I'm gonna go ahead and I'm gonna save this now I'm gonna take a brief side detour and go into taxonomy and add a vocabulary and I should explain this to you I will so I'll go ahead and save this once I complete it let's go add terms if you haven't followed in my tutorials you don't know about my two awesome dogs bailing Susie but I use them for everything so they will be created here I'm going to go ahead and save that and now I can go back to taxonomy essentially what this is taxonomy way to classify stuff on your site so I'm going to classify my products by Bailey or Suzy and add tags to them and then I can do a whole bunch of nice stuff later on down the line so what I'm going to do here is add another field which is a term reference it's going to be an autocomplete and it's going to be dog name go ahead and save this it's going to use the vocabulary dogs will save that require field I'm going to enable this as an attribute for the add to cart' forms believe it as a radio button or something I don't know go ahead and save this be honest I don't really use this too much not even sure what it is there we go so we've created our product for pictures we can add a picture to it then we can associate a classification with it so that's great let's go ahead and add a product and then we will see one of the problems we're going to run at you so I'm going to create a picture and I'm gonna call this Bailey one is the SKU the title is going to be Bailey lying down $10 because I need the money so please help support me I status is active right it's an active product and I'm gonna choose one of the ones that I like a Bailey lying down one of the cuter ones let's go with the closer upload that Bailey line on a coach with a toy right we want that to be accessible so we provided misdescription there Bailey that's my term save the product and now we've got this product I can click on it I can see that I can edit it all this kind of stuff which is awesome but how do users find this product and that's the problem commerce whereas other e-commerce solutions for drupal don't require this step commerce does and the reason for that is because let's have an example I'm gonna sell you this battery this battery is a product but in order to sell this battery to you I need to show it somewhere I need to have a store so store will display this product you will see it then you can add it to your cart you know your actual physical cart that you're walking around with and you can purchase this battery same idea with Drupal commerce so you've created this product now you need somewhere to display it to people you do that by creating a new content type and so I'm going to call this product display and this is going to actually display our products to people so I don't want my author information and closing my comments again I'm moving quickly here I'm setting up structure content types if you're not familiar with any of this stuff I have other video tutorials that explain all this check those out save and add some fields I'm going to add a product field and what this is going to use is going to use our product reference module that we enabled when we enable the Google commerce and I'm going to choose Auto select if you chose select list or checkbox radio buttons what this does is it'll just show you all your products you select them out I'm using autocomplete because I'm going to type in the product that I'm adding so we'll go ahead and say this you'll see this in action in a second required field I'm creating a product display I obviously want a product with it I'm going to be able to show products in pictures so those are the two different product tips that I have autocomplete I can go ahead and save the settings here now last thing I'm going to show you is manage to display so this piece of content is going to render up my product I can determine how that is going to be shown so I've got this product price it's visible I've got this product Add to Cart form I'm going to have that in line I'm going to show the dog picture I'm going to show the dog name and let's add everything here SKU and I don't need the title their status all I like we're not going to do everything let's go ahead and save that now what we do is go home and I haven't actually created any content so we will add content product display we're gonna say Bailey lying down for a limited time purchase a Bailey picture it support me so product autocomplete you see we type it in comes up Bailey line down save that now we look at our product and we think what the hell just happened here we have this giant photo of Bailey how do we change that well remember we go into a store products product-type pictures and this is filled the bowl just like everything else we manage the display so we manage the display on the actual product display what that just pulls in information from our product type and so that's what we're changing here so we've got price that's going to be shown we've got image we see that it's the labels above we want to inline same as the dog name and image is showing the original image so whatever huge image we upload that's what they're going to see we don't want that we want it to be a medium image and we're going to link it to nothing so we'll go ahead update that and dog name link is fine we'll go ahead and save this now if we go back to our homepage click on Bailey lying down then take a minute but you can see here in line label and a nice medium sized image of Bailey that now had this product that we can go ahead and add to the cart and just see we added the SKU down here and we've got the dog name this isn't set up correctly so if I click on it you want to actually see anything something we've got to configure later but I go ahead Add to Cart and now if I go to my cart you see I've got my shopping cart I've got Bailey lying down about my price I can remove and I've got my total sidebar here remember I talked about us using entities and it's nice because there's an integration with use I want to change all the information that's here like maybe I want to show the actual image I can go ahead edit the view and I can change that up that's something we're gonna look at a little bit later so in another video tutorial I'm gonna go ahead and check out you'll see here remember the billing profile that we created person s them to their first name so John Smith Canada one Main Street Toronto Ontario and for and for M to do the next page and there we go I'd continue to the next step this is actually going to complete my order because they don't have any payment gateway enabled and so now if I go to store I go to orders you'll see that I've got one order from John Smith actual user is me and it's pending so so that's it that's how you can get commerce setup so reminders bother me there your commerce setup create a product product type is what we've created then we added the product we had to create a different content type which was our product display to actually show that product off and then get it out there to the world where people could add to a cart and purchase that off I know that seems like a lot up front to just get a store enabled but the power of Drupal commerce is going to become so evident as we work this where this video tutorial and you can see how we can customize things that an initial headache is going to be well worth it in the long run so again if this video tutorial helps you please leave me a comment let me know thumbs up always appreciated hopefully we'll see you for the next eight or rather nine video tutorials in this series and they help you out so again if you'd like to see them like to keep them coming let me know I always appreciate the feedback thanks very much and we'll see you for next term

Channel: Web Development Tutorials

Views: 50,625

Rating: 4.9261365 out of 5

Keywords: Drupal, Drupal Commerce, e-commerce, Software

Id: Wp0fsHV5vMI

Length: 19min 7sec (1147 seconds)

Published: Sun Mar 02 2014