Introduction & How to Support the Channel
Hello and welcome back to etaldeveloper.com. I am P.D. Wary, the etal on developer specializing in Drupal. And in this first video tutorial 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, I'm over at etaldeveloper.com/store. Here you can support me by purchasing video tutorial series that I've already completed. These help me to go on and continue to develop these and keep them free, keep them frequent on YouTube. They're only $20 and there are discounts if you go ahead and purchase additional video tutorials at the same time.
If you followed 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 module development.
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 in my previous video tutorial 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.
Tutorial Series Overview
Before now, we've said all that, let's go ahead and get started with this video tutorial 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. That said, I'm not going to set up any payment configurations here, but in later on in 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.
Exploring Advanced Topics and Customizations
Time permitting, what we'll look at is some custom stuff like how do we sell files, how do we sell roles, 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.
Drupal 7 Install & Enabling Modules with Drush
That said, localhost/commerce/install.php. 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 WAMP server because I'm on Windows. I go ahead, save and continue, save and continue. And now my database name, this is something I've preconfigured. 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, it doesn't matter. [email protected]. Default settings. Got to represent, especially after our big gold medal victory. Sorry for everybody else in the world that loves hockey and didn't get a gold medal. Let's go ahead, visit our new site. We're over here, brand new site, nice install, all we have is Drupal core right now.
Now, in other video tutorials, I've showed you how to install modules through the interface and actually FTPing. What I'm going to do in this video tutorial series is use Drush. It's a nice command line tool. If you're not sure what it is, highly recommend you just do a quick search for it. This will save you a ton of time and headaches. I've gone ahead and I've downloaded all the modules that I need. So typically what I do is go drush dl and then a list of modules, Commerce, whatever. Instead, I've done all that, so I'm going to start enabling things. So drush -y en addressfield is a module that Commerce requires. I'll do all the Commerce required modules first and then talk about the other ones. So CTools, Commerce required, Entity, Rules, Token, Views, Views UI. And then other modules that I find helpful are Admin Menu, Module Filter, Pathauto. Go ahead save that. Okay, great.
Disabling Core Modules & Enabling Commerce Modules
So let's enable all those modules. Last thing I need to do is just disable Overlay and Toolbar. Those are two Drupal core modules which I'm not a huge fan of. Add my y flag. Okay, great.
Now what we're going to do is go to Modules. Perfect. Okay, it redirects us. Go to Commerce. Let's start enabling things. So I need Cart, Checkout, Commerce UI, Commerce Customer UI, Customer... just enable everything. Okay, that's what I'm going to do. So let's go through all this stuff, except for payment example. I'm not going to use payment example. Payment, Price, Price UI, Product, reference. So everything except for the payment example is what we're enabling. It's going to tell me I need rules UI to install tax UI. That's fine.
Why Drupal Commerce Uses Entities
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 going to take a quick two-minute theoretical detour here. If you don't care about this, just fast forward a couple minutes. I recommend you listen to it because it'll give you an idea of what Drupal Commerce is all about.
In Drupal 7, what the community went towards was what's called entities. So you can think of an entity in terms of like a piece of content, right? So that has, you know, a common structure. So nodes are entities, users are 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 you to do is create common frameworks so that you can integrate modules together, you know, make a nice API—that's Application Programming Interface—that's easy to use and hides some of the magic that Drupal does behind the scenes.
Now, other Commerce solutions have not gone the entity route. Because 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 when we were enabling 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 your customers, you had your 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 site. So you can create new pages or blocks or different ways of rendering content without having to write all these SQL queries. So Commerce is nice because it's based on entities and Views uses entities or leverages the entity framework; they can plug in nicely together. And so because Commerce leverages Views, we can easily change any of the screens that they actually define and start customizing all that stuff. And you'll see that as we work through 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 don't know, send an email that 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 going to see this as we start working through things.
Understanding Customer Profile Types
First thing we're going to do, 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 sorry, Drupal Commerce. And if I go Manage Fields, you can see that all it has is an address field. This comes from the Address Field module that we did download and enable. 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 fieldable. 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. For now, we're just going to use this 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.
Creating a Custom Product Type
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 installed this—we're going to look at products. And so I don't have any products that I've created yet, but I can look at Product Type. And what these are are different types of products that we will be selling through our site.
So think about this in terms of a store. You know, you could have a product type which would have common stuff to it. So 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 you're women's shoes you have a heel, I don't know, 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 can have a color, which could be completely different from your shoe color. So those are two fundamentally 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 going to 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. I'm going to go save and add fields.
Adding Fields to a Product Type
And you'll see here, this is where we get to leverage the fact that Commerce uses entities. And so product types are fieldable. So I can go in here and I can say, let's add a dog image. So I'm going to say, 'Dog Picture', right? And I'm going to choose an image. If you don't have this ability, it's probably because something's disabled in Drupal core, so go check that. Go ahead, save this. Don't want a default. So required, because it's an actual picture, so we got to have a picture. I'm going to save this to 'dog_images'. So this is where my file images are stored. It's going to have a subdirectory for dog images. Don't care about my minimum, maximum resolution because it's only me uploading. I'm going to enable the alternative field and the title field so that I have some accessibility and I also have some search engine optimization. And I'm going to go ahead and I'm going to save this.
Now I'm going to take a brief side detour and go into taxonomy, going to add vocabulary and I should explain this to you, and I will. So I'll go ahead and save this once I complete it. Let's go add terms. If you haven't followed any of my tutorials, you don't know about my two awesome dogs, Bailey and Suzie, but I use them for everything, so they will be created here. I'm going to go ahead and save that. Now I can go back to taxonomy. Essentially what this is, taxonomy is a way to classify stuff on your site. So I'm going to classify my products by Bailey or Suzie 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 this is going to be 'Dog Name'. Go ahead and save this. It's going to use the vocabulary 'dogs', so save that. Required field. I'm going to enable this as an attribute for the add to cart forms. I believe it was a radio button or something. I don't know. We'll go ahead and save this. To be honest, I don't really use this too much. I'm not even sure what it is. There we go. So we've created our product for pictures. We can add a picture to it and we can associate a classification with it. So that's great.
Creating a Product and Its Display Challenge
Let's go ahead and add a product and then we will see one of the problems we're going to run into. So I'm going to create a picture and I'm going to call this 'Bailey 1' as the SKU. The title is going to be 'Bailey lying down'. $10 because I need the money, so please help support me. Status is active, right? It's an active product. And I'm going to choose one of the ones that I like of Bailey lying down. One of the cuter ones, let's go with a closeup. Upload that. 'Bailey lying on a couch with a toy'. Right? We want that to be accessible, so we provide a nice description there. And we go '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 going to 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. A 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, now you need somewhere to display it to people.
Creating the 'Product Display' Content Type
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, I'm 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, it's going to use our Product Reference module that we enabled when we enabled Drupal 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 save 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 and pictures, so those are the two different product types that I have. Autocomplete, I can go ahead and save the settings here.
Configuring Product and Display Fields
Now the last thing I'm going to show you is Manage the Display. So this piece of content is going to render out 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 don't need the title of their status. So I lied, we're not going to do everything. Let's go ahead and save that.
Now what we can do is go home and I haven't actually created any content, so we're going to go add content, product display. I'm going to say 'Bailey lying down'. 'For a limited time, purchase a Bailey picture and support me'. So product auto-complete, you see we type it in, comes up, Bailey lying 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 Store, Products, Product Type, Pictures, and this is fieldable just like everything else. We manage the display. So we managed the display on the actual product display, but that just pulls in information from our product type. And so that's what we're changing here. So we've got the price that's going to be shown. We've got image, we see that its labels are above. We want it in line, 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 the medium image and we're going to link it to nothing. So we'll go ahead and update that. And dog name link is fine. We'll go ahead and save this.
The Complete 'Add to Cart' and Checkout Flow
Now if we go back to our homepage, click on 'Bailey lying down', going to take a minute, but you can see here inline label and a nice, nice medium-sized image of Bailey. That we now have this product that we can go ahead and add to the cart. And you'll 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 won't actually see anything. Something we've got to configure later. But I can go ahead, add to cart, and now if I go to my cart you'll see I've got my shopping cart. I've got Bailey lying down, I've got 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 integration with Views? If 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 going to look at a little bit later. So in another video tutorial, I'm going to go ahead and check out. You'll see here, remember the billing profile that we created? Person has to enter their first name: John Smith. Canada, 1 Main Street, Toronto, Ontario, M4M 4M4. Continue to the next page, and there we go. I can continue to the next step. This is actually going to complete my order because I don't have any payment gateway enabled. And so now if I go to Store and go to Orders, you'll see that I've got one order from John Smith. The actual user is me and it's pending.
Conclusion & Next Steps
So that's it. That's how you can get Commerce set up. Sorry, my eye's bothering me there. You get Commerce set up, you can create a product. Product type is what we created, then we added a 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 it to a cart and purchase that off.
I know that seems like a lot upfront to just get a store enabled, but the power of Drupal Commerce is going to become so evident as we work through this video tutorial and you can see how we can customize things, that that initial headache is going to be well worth it in the long run.
So again, if this video tutorial helped 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 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 the next tutorial.
