Transcript of "First Steps in Drupal Commerce" at Colerado 2011 (making a Drupal Commerce site from scratch)
So what we're going to do is we're just going to take a little bit of a look-around here on the Store menu and see what we find. The first thing that you think about when you think about a store is going to be the products that go in the store. So, if you come down here
to the second last option on the store menu then two columns across then you see that we have a list, of those products. Then we have the ability to have "product types" and we have an existing product type that we got installed for us by default, and then we have the ability to add products. And of course we have, just like we have with nodes, we have the ability to manage the display of those products, as we work with them.
Angie: So - these products are not nodes, like they were in Ubercart?
That is correct: they are not nodes.
Angie: And then the cart [inaudible] bundles?
I'm going to show you exactly: we're going to make one. We're going to make one and that's the very next thing we're going to do. Because that's like the very first hurdle of using Commerce, is like "What's a product?" and "What's a product display node?" So the very first thing we are going to do...
Well: first of all lets just take a look. Because we can take a product and manage the fields on it. Just like you would do on a
Oh wow! etc...
What we would be going to - I bet that it does this again. I don't know what the deal would be going to something just like when you're managing fields on a node
- something like that:
seems to be part of the store menu labelled Product+ edit / manage fields (selcted) /Manage display
We can add new fields of the product, like size, like colour, and we'll do that in a miute (assuming that ... yeah we'll do that! I don't think we'll run out of time to do that)
You'll see it comes by default with a title for the product, an image, a price, and a status. So we have all that by default.
And we're going to make a couple of products now. And so: we'll do that, and then, of course, on product we can manage the display as well.
[click's the "Manage Display" tap on the top right after "Edit" and "Manage Fields"
So that's like pretty smart like [inaudible]
Angie - No idea
[inaudible and stuff until...]
This is actually Drupal 7.0 which I wouldn't normally do with a Drush make (pull that down) but next week... Next week it will be 7.1
So let's go ahead and add a product .
We'll just add a red T shirt.
So we will just do a red T shirt, and the
SKU is going to be RedTshirt, and the
Title is going to be Red T Shirt, and
I think I even have an image here that has a red T shirt in it, and
Hey! Look at that red shirt.
And: I think this one's going to be $9.99
And: if we add other fields here, which we will have in a little while, we would fill that out just as we would on a node - a node-type bundle: the exact same thing.
Let's make a Blue Shirt
Angie: - Is the SKU something like a Node Title like a required field that's always there?
Um: I don't think that's required. I don't think so. I don't think it is because it's [inaudible].
This one's going to be $9.98. So.
We've saved that, and now we have: What we have are a list here [screen shows Products+ in white on dark and "list" "Product Types" as tabs. We are on "List"] and these two things. [two lllegible lines - probably about two T shirts]
Now: this is the administration screen for: Product. But look what we have here.
Thanks to some of our friends right here in this very room - this is a View!
So, not only can I change the administration screen in any way I want to...
....but it can display fields in any way that I have added, and I can have multiple administration screens.
This is NOT a private like "Oo yeah: Commerce presents this screen that you have to live with". This is a - you know: this can be a Views Cock Operations. Right now I could turn it into a VDO administration screen. So I won't go there because it's kind of distracting from it, but because this is Views, I can
[changes screen somehow]
go into the wonderfull new Views 3 screen which does some great things like popping up a nice little screen in front of us, instead of below the fold. Oh it is so, so sweet. Um: thank you very much. "Not just me". It really is just absolutely stupendous - it's a great User Interface improvement.
Views was always good But having this here: we can just configure it. So there we have the admin page and there we can just configure it.. Every list is presented. Remind me to stop-off and see you some time. Every list is presented, in the whole Commerce world, is a view. So that you can do that. Including the checkout pane, and everything else. So.
OK. So. Now Here we are [on the front page] and we should...
We don't have anything on our front page!
We had that list of products.
I'll go back to the ist of products.
Here it is and I can go and I can
-add new products and
-we can look at it.
But this is an admin interface, and the intent is not that your users would ever directly access product. That's not the intent here. I imagine that some people will figure-out a way to do that, but that is not the way that it is supposed to be done.
Person: So is there no equivelance to like the Node [inaudible]
So now we are going to make a node display.
Now we are going to make the Product Display Node, OK, to display these.
So what we are going to do is we are going to go in, and we're just going to go to Node Add
it beats me what he's doing in the blur here
and you see that we have a Product Display Node here. And we're going to say...
We're going to say Red Shirt, display node, something like that.
"Node? What would you name it, because you don't want the users to see 'node'?"
Yeah. No, I was doing this for you. OK,
And, you see here on the product list, we have to select the correct product.
We're going to select that product.
And now when I save this, my default presentation is here:
-I've got the picture,
-and I have the add-to-cart button.
And so the default presentation of the product using the product reference field is to have a - you know, a picture, with an add-to-cart button. There's many other ways that you can present it. You can present it as a SKU; you can do a lot of different things.
I'll just add it to a cart.
And let's go ahead and make the - er: [typing]
Let's go ahead and make the Blue Shirt reference node
"While you're doing that could you explain the philosophy there? Behind the separation of the setting-up a product entity template kind of thing and of the node that actually shows-up on the screen?"
Yeah. It was actually one of the greatest limitations of Ubercart - was that you could only display something one way. Like you couldn't have a product that was displayed fifteen different ways on your site.
"Examples of ways, like, you know: bloc versus a node, or..?"
No. No, I mean that you might be selling a red T shirt
- in the T shirt category of your site, and also
-selling it in the red category of your site. Or you might be
-selling it in a boutique site that only sells red T shirts.
And you might have a different: - a whole different node presentation, with your nodes having different fields, and all kinds of things, so it gives you an enourmous amount of capability.
You might have a mole site, that used the same products as your regular site, but you want to have different node types, to present. So it give you an enourmous amount of power there. Does that make sense?
Um: this is actually, um...
This: - Gives People A Lot Of Trouble.
So there's no question about it: this gives people trouble, so it takes some time for people to get used to that.
"inaudible inaudible lots of different fields that are just not displayed, including references to other things, it could be like if you are representing a book you can have a field representing 'author' and - bla bla bla... and then let them get thrown up by your product?"
Yes. Yes that's exactly right.
And you can present it a whole bunch of different ways.
You know lots of speciality sites don't just... you know if you go to [inaudible] or something like that ... there's lots of speciality shops that are actually presenting things in context. Like here's the cool product and
-here's why it's cool, and
-here's my big write-up about it, and
-here's my... "customer reviews?" And here's my customer review that goes with it, and this is the customer that...
And that can be it's own node.
And like, a block can have a product reference
So, it's a very very powerfull - um: a very very powerfull situation.
But it does mean that you have to plan for both the
-addition & maintenance of the products, and the
-addition & maintenance of the product display nodes.
And they, you know, take different plans.
And the import which we'll do that at the Colorado Importing School: I doubt if that
"...imports ... product display nodes ... ?"
And we're going to do that in a minute. That's a great question! But we're going to do that in a minute.
Yes. So you can have the right stuff in the right place and not be duplicating products to do so.
[inaudible "three years later" inaudible]
I want to point out to you. Here we've got this shopping cart bloc over here. Look at that.
It's a view. OK? So I can do anything to that. I can add - I can put a little thumbnail of the item on there. I could do anything I want with that view. I could go in there. And, I don't know whether it ... it probably won't actually want to do this but . You know, I could just add anything I want, right there! I could just fiddle with the View, and change how it works, because it's Views. It's just a great thing.
[jumping back to 20.26 after other subjects]
So there we've just added two products and two - this is just the bottom, straight-line version of setting up some products:
-we added two products, and
-we added two product display nodes,
to point at them.
Is that - make sense? OK? How are we doing on that? OK.
That's not very hard.
And of course now we want to do -some more things!
Let me see if I've left things out of my presentation here.
Yes. I did leave a little bit of something out, so:
Every product is an entity of its own, and it can have fields on it.
So I think that's clear, and we're going to go add: we're going to go add fields to our product in a minute, OK.
Now one of the consequences of this is that every - every unique product, every permutation, is a unique product. Which means that: it's not like you have one product with, you know, red green & blue, and large medium & small on it. You have: that's nine products. Nine products: OK? Nine products with the characteristics of those nine products. And we'll do that in a second.
But that's very important, and that's one of the things that people ask right away, that is key to that.
-Only admins go-in and look directly at products.
-Users look at them via product display nodes. OK.
And of course we've seen our wonderfull Views 3 there...
"so there's no concept of attributes or options on products?"
Yeah we're going to do that [inaudible] that's exactly what we're going to do now. Um: so - I'll show you how that works. OK?
So here we are. We have this red shirt and this blue shirt, but we want to display them in a different way. We want a drop-down menu to choose small, medium and large, of red and blue. So let's do that. We're going to go into the product: we're going to go into the product type, and we're going to manage the fields on that. And we're going to add a - a size. And that's going to be a list. And we're just going to make a select list where we're just going to make some options. We're working on the product itself now because we're talking about how the product works.
ALLOWED VALUES LIST
So this is going to be small, medium, and large.
We want just one value here. That's the allowed value. So that one's good.
[SAVE SETTINGS button at the bottom of the screen clicked]
And now lets add a colour field.
MANAGE FIELDS TAB
[inaudible / typing]
And this one will be: red, and green, and blue.
And [inaudible: clicks a button on the web page]
And here we go. We're not setting a default on it. Which of course we could.
And now our - and now: we're all set with that. So, let's go ahead and...
...go back to our products, and edit them!
Go to STORE and PRODUCTS, and: our blue shirt [screen headed Product BLUESHIRT].
We're going to make that one blue, and lets make the size small.
[choosing from drop down menus]
And, the red shirt... actually this works pretty slick! So I'm going to make this one red, and I'm going to make it medium. (And actually I hope the focus group finds it just as slick!).
And actually we only have these two products here so we should probably go back and add some more.
And now lets go over to our product reference node [where?].
And we need to change one thing on EDIT. Because, by default, the product reference was single-valued, and now we are going to make it multi-valued. Because it can have... - it can point to more than one product now. So I am going to say that I can have an unlimited number in here.
So now, lets go-over and make yet another...
You know that I was saying that you can have more than one way to sell something. But it's the same thing.
...but we still have, um: we still have the blue node and the red node. They're still here. They still work. Everything is fine about them. But I want to make a new one! And this is going to me "small shirts". [he's on a screen called CREATE PRODUCT DISPLAY]
And what we're going to do is we're going to select multiples that can be selected as options here.
I should have changed - I should have changed the SKU on these so that it said
So now we have a cool shirts display node.
And you see: now we can switch between the blue shirt, and the red shirt.
And add-to-cart: this way.
And you'll notice that because there's not more than one kind of blue or red shirt, there's not an option for us to change the size. So let's go ahead and make a ...
Well, I mean: let me stop there before I run-on.
I'm going to make a couple of more products, so that we can add them to this.
Did what we just did make sense? We did one node, now, that points to two products.
And therefore that it can automatically can present the right picture, and a select [drop down select button] the right picture. With magic Ajax switching - which is cool!
Did that all make sense? Do you want me to - er - back up on that? Any questions?
"Can you switch between two products that have different information? And by information I mean all the inputs have to be the same accross all products, like..."
Like say you put in a different colour of thumbnail [sized picture] - accidentally. Something like that you mean?
"Yes. Maybe I'm misunderstanding the concept but I was just wondering if there was a - like:
Like if one of the products has size selection but the other one only comes in medium or whatever. Will all that data change as well?"
That's why we're going to do that right now. So that's what we're going to do. Any questions before we do that? I think I've answered your question.
"Actually I've just got one more. It's really a follow-on [question] but...
Is there a way to require selection of the attributes?
I think so. [inaudible]
There should be a check-box. [inaudible]
"I understand that if I have a shirt that comes in three colours, and three sizes, I have to define it nine times?"
Correct. That is absolutely correct. There will be nine products. That is absolutely correct.
"And I have to define each one of those individually".
And you don't do it by hand the way I'm doing it right now. You do it with Commerce Pains, or you do it with Commerce Migrate, or one of the others. There's Commerce Bulk Product Creation (which is actually not in working order right now). But it - you know [that this is pre-release]. So you don't actually do it. You don't actually do it the way I'm doing it because that would take a long time.
"That's what I was saying!"
And there's actually another couple of projects out there that I'm aware of that are intended to make that easier for you. OK?
"So you would, like, upload a spreadsheet or something like that?"
Like: at the Denver - at the Drupal Camp in Colorado - I'm going to demonstrate how you would do that with
and actually I might succeed in showing you how you could to that after this session if you want to. Bug there's actually a couple of bugs and weeds and actually it needs a couple of patches for it to work right. It's not all there for certain yet. So I decided to tweak the process to show you here. But in that I can download a hundred products off of a feed and then download off the same feed and turn those into product reference nodes. And it all works. I won't say it isn't a little tweaky, but it will work. OK?
Yes. And there are / there is more than one way to approach that. This is the way it works in [Drupal ]Commerce. So.
So we're going to add some more permutations. And see how this works.
So we're going to do to >>PRODUCTS and we're going to ADD - more product.
By the way: you see we have product types here?
? being a product type of a product doesn't doesn't mean that it is the only one we can have. If we have things which should have other attributes than size and colour, we can have loads of classes for these in here as well.
"So it's like when you ...
...product type for 'shirt', and then you have a different product type for 'book', and book would have a SKU ISBN number..."
I think that would be a perfectly reasonable expectation, yes.
Now I can't remember what I had!
"I think you only had small"
I only had small? Yes: we can do it. If we fail, we just fail.
[filling-in PRODUCT SKU, TITLE, IMAGE, PRICE]
"But that's an interesting question. Is there any kind of validation if you have exactly the same product, and it has exactly the same attributes?"
Although you could. I'm sure you could figure-out a way to validate that.
Actually these are not that hard to make, so we can make a blue medium, and use the same picture for it, and this one is going to be $21.99
So now lets make the red [types PRODUCT SKU, finds an image] we're getting to expensive shirts now. The red large
"Is it the title field ... displayed"
"not by default?"
The way we're doing it, it's the node title that's being displayed. So.
"So this title field is only for the admins?"
You know what I could do with, I could do with help from that, just to see what I've got.
So I have blue medium and large, and then I have blue who-knows-what, and then I have red who knows what. And who knows what.
"You know: you already know you could have fields for that"
Yes. Oh yes. Lets do that.
I love this, this is so great, I can just type a little bit. Yes. Yes siree. yes.
And we'll add another field which is colour. Is that sweet? That's so sweet. OK: so now we can see what we've got. So now we can see all the things we've added to the admin interface.
And we've done blue large and medium and small, and we've done red large and medium, and that's all OK. That should work fine.
So now lets go-see if we've had any sucess with our stuff here. Here's our shirts, but it has the other
I'm not sure I see
Hey Randy quit the
I've got the same problem. I don't have .... Let's go.
Lets go see if we can go and sort this out. Um.
We're going to go to the -er - the Product display and no we have to make the filed multi-value. That's part of the, um part of the magic here. Just make sure that the field is - that this field is multi-value.
And we should be able to have the choice of blue... You know: of colour, and size. And have it switch for us. And that's what we're not getting.
Oh! You have to have REQUIRED FIELDS! On the - er
Yuh, this is a piece of magic that shouldn't be that way.
There is an FAQ on Drupalcommerce.org that tells you exactly what to do with this.
But this is
So now we have SMALL and MEDIUM, and we have the proper things that are available there.
And it's in red. How do you get to blue? [answers by selecting from a drop-down menu] And blue has small and medium.
"Randy did you remember to add all those different products that you created to the display?
You remember there were..."
Oh I didn't do that! OK. I didn't get'em all in there. And now we're going to select all of these [using control+A to highlight every select option] and that could have been done with autocomplete or whatever. [someone is talking at the same time saying "can you have a VIEW instead of SELECT nodes?"]
"Randy: where you just were?" [a display of two shirts with the admin view and edit tabs visible], "Can you just like replace that with, certain: like - you know how certain node reference fields can reference like a VIEW of things? Instead of, like, manually selecting? Can you do that here?"
Lets's see what we can do. I don't know if we can do it here, but I'll bet you that you will be before long.
So lets go to the CONTENT TYPE.
So this is just an ordinary CONTENT TYPE, so you go to
CONTENT TYPES > PRODUCT DISPLAY > MANAGE FIELDS
...continues trying to answer the question and then finds it not yet solved...
Yup - that's the kind of thing that I am sure will be here in a little time.
So now we look here and we have all the things that we should have.
We have small medium and large.
In small we have blue and medium.
In medium we have blue and red.
And it switches for us. And we have all those things that we were asking for.
...we're out of blue mediums. And we can save this to the cart. And this cart is a view, of course. And I can say "checkout. And the checkout page is a view.
"That REMOVE [button on screen] by the way: that is so much better than it was in Ubercart".
Oh yes. And you can actually change that remove [button]. That remove is a Views too. So it we go-in to that, that's just one of the fields that we can have in there, and by default we have a remove button. And a delete button - so: there it is. So we can say [typing] there it is!
Oh and it didn't work either! Oh and that's the title - the title on top. But you can change the menu button.
Anyway, so on this page, which is the checkout page, you can just confugure any menus a zillion ways. Do I want this to be a five-page thing? Do I want my modules to add some extra information to the checkout? There's just so much. You can do a whole bunch of things. Like you might want to charge sales tax, which would mean that you would want to get their address before you get to the sales tax calculation. That's all wired-in there. That you can do that, already.
"So how would you - how would you an eye on sales of stock [inaudible] T shirts, if you've got less than one of them?"
For a start there is a contributed module called Commerce Stock, and it's actually got an alpha release, and it will prevent you... You can actually display the stock that you're getting: it will let you display the amount of stock that you are gettiong. The customer will see that. It will prevent them from adding-to-cart when [stock] is zero, or below. Not perfect! I doubt that any stock module is perfect. Because, like: when do you decrement [reduce stock by one] it? Do you decrement it at the checkout; do you decrement it at the shipping stage? Those are questions that you know, like the airlines don't know how to solve that problem. They just sell some [plane tickets] and hope it works out!
"Is the checkout page a view?" Sorry? "Is the checkout page a view?"
Is the checkout page a view. A view. Yes. Here it is. We can just go and fiddle with it right there.
"inaudible ? so the footer is views flexible ?"
Yes. Actually what it has, is you have a footer.
ON A PAGE HEADED DISPLAY, clicks on FOOTER > CONFIGURE FOOTER: COMMERCE ORDER: ORDER total
And in VIEWS 3 you have these - um: what are they called? Like the footer is something provided by the module. The module can provide other footers. So the total calculation is something provided by the ...
"So the shopping cart is provided by the
So the billing information is provided by the module: just that. [shows]
I was talking about the footere here ... [shows]
Well the way I do it is: actually I have a video on Vimeo and Drupalcommerce.org. I can show you where to find it after the show or you can find it without too much trouble. I have a video showing you how to do an import of the whole product nodes and the product reference nodes. Using the same input fields. Using the same .csv [comma separated values]. Like in my case it's coming from Amazon.com. So you can do it with the same data set. Like in a one-to-one situation, you can do it with the same dataset. [inaudible] Yes, that's exactly what I do to.
[inaudible question about payment gateways] That's a good question. The Paypal one is in good shape; the authorise.net one is in good shape. There are like a dozen others from various countries of the world. None of them is wholly mature. But the authorize.net one I believe.... I haven't actually tested it. But I my understanding is .... and I don't think they're in bad shape. And a couple of the other ones. I mean, if you look-out on the DrupalCommerce.org page, we have a showcase page where we show some of the sites that are live. It's at Drupalcommerce.org/showcase. It's not fully filled-out yet but there's a list of some of them. And there are some cool ones! And there actually are a couple of write-ups of people building their stores on Drupalcommerce.
"Is there support yet for recurring billing?"
The recurring billing is not yet implemented. There is a service called Recurring that does recurring billing, and we expect that to be implemented within the next few weeks. No promised. Because there is a lot of paperwork!
"...roles...access to content....editing content?"
You know, because it's all wired-in - I didn't even show you RULES [module] and how this integrates with rules, but when we checked-out [in our demonstration], we could have granted a role to somebody, which is one of the ways of solving all those things that you're talking about. That's: if a role is the appropriate way to do it you could do it with a role and private files for example. I actually haven't explored that whole terretory.
But I have explored RULES in some depth, and you can do a lot of crazy stuff when you get on good terms with rules - you can really do a lot of crazy stuff! If you're writing code. You know people say: Oh - Rules. You know. You're writing code and they don't know how to write code. Well that's balloney! You're writing code. You happen to be writing it in a web browser. And you do have to understand the language of rules. But it is crazy good stuff, and if you keep it simple and you keep within the range where you understand what's going-on, then it works pretty well.
I guess that's how the whole commerce stock module works. Commerce stock provides the default rules, so that when the inventory level goes below something: something hits. It watches the bottom. That's a rule, that you can actually change-up.
"...bundles?..." Bundles is a work in progress.
Can you complete the checkout? I'll try.
"what about donation - so I can put an open field so I can put whatever I want in, for a donation?"
[concentrates on the screen and finishing the checkout]
[then the http://www.ioby.org website from the list of completed websites on drupalcommece.org and looks to see how they do donations]
1hour - example donation
I don't actually know how they're doing it but they're doing it.
Then shows the usual background points on a chart - bigger, better, different etc etc
One point says an "Entity driven architecture based on Views and Rules"