Saturday, 26 October 2013

Drupal 7 / Ubercart Video Tutorial 9 of 10: Creating Product Kits, Store Stock and Order Status
[related: which is about attributes from a stall-holder's point of view]
In the 9th Drupal video tutorial of this series, we continue developing our Ubercart site by
  • configuring product kits,
  • setting up store stock and
  • looking at our order states.
This is the final video tutorial before we actually test our site and push it live.

[Drupal 7 / Ubercart video tutorial 6 of 10 showing how to set UPS, Paypal, and conditional taxes]
[Drupal 7 / Ubercart video tutorial 7 of 10 showed how to use the default catalog module]
[Drupal 7 / Ubercart video tutorial 8 of 10 showed an alternative flexible method of showing a catalog]
[Drupal 7 / Ubercart video tutorial 9 of 10 shows how to use product kits, stock, and order states]
[Drupal 7 / Ubercart video tutorial 10 of 10 shows a simple checkout, reports, and suggests a theme]

Hullo and welcome back to the ten part video tutorial series on using drupal for ecommerce with ubecart. I am Pete Yarorski, the Toronto website developer specialising in Drupal, and like all the video tutorials in this series, this is brought to you in a collaboration between myself and the team.

Following-up on the previous video tutorials....
We have gone-ahead and created our site. [0'23]
We are pretty close to having it finished and launched. [0'25"]
But there are still a few things we need to cover, which include
-setting up product kits, and
-stock notifications .

In this video tutorial, I hope without talking too long, we will cover
-checking-out an order, and covering the
-order status workflow [from a shopkeeper's or a programmer's point of view].

So, with that [introduction], let's dive right into it [the rest of the video].

Product Kits

The first thing we are going to do is take a look at setting-up product kits. [00'46"]

If you are not familiar with product kits: essentially what they are is an item in your store that will pull-in various Ubercart products that you have already created, so [for example] you can specify two products [as a customer] and specify that specific discount for your customer [as a shopkeeper or developer]. [01'02"]

I'll show you that in a quick second, but, just briefly, we can go to [admin] store>configuration>products>product kit settings, and we can set the default for when we are setting up a product kit.

The three different options are essentially that you can create a
  1. unit, and not list the components when you check-out, or
  2. product list and components when you are checking-out, or
  3. put all the parts in to the checkout and let people choose individual parts as they want to.
We are going to leave it [the default setting] as a unit and let people see the individual productst as they order.  [1'30"]

Now, to add a productkit  to our site we are going to
content>add content>product kit
Just briefly - when we do this: remember that we have set-up our specific urls when we went to
configuration> search and metadata > url aliases > patterns
We set these up for product kits as well, so if you don't have the proper-looking url down here at the
content>add content>product kit> ?create product kit?>pathauto settings [near the bottom of the page on the left], you can go over there and set that up.[01'56"]

Now this:
[name in the name box] will be "Super Saver"
[description in the description box] "buy two products and save big"? - I dunno. Give it a proper description, based upon what you are actually creating, but, again, for this video tutorial we are not going to do that, and,
[image in the image box] as always, we are going to put Bailey [the dog picture] up on our site.
[How is this product kit handled by the cart?
-as a unit
-as a unit; list individual products - default option
-as individual products] We will leave this as the default settings.[2'21"]

-download of purchase
-Pete's awesome product
-Pete's super awesome Drupal book
-Pete's super awesome T shirt] And what they're going to get - any customer that purchases this kit - is going to get our Drupal book and a Drupal T shirt. [because they are highlighted on the form][2'26"]
[list settings] We don't have to change the list settings.[2'32"]
[shipping settings] Interestingly we don't have to change the check-box for "make product shippable"
So you'll see, when I save this, that I will get an error-message. I will explain that to you when we do that.
[menu settings]
[meta tags] Beyond that, you know, we can add some seo tags.
[revision information]
[url path settings]
[xml sitemap]
[comment settings]
[authoring information]
[publishing information] The rest of this ought already to be set-up

[promoted to front page] We just need to promote to the front page so we can see it.
[sticky at the top of lists]

So, now we have got our image up there, let's go ahead. We will press save and continue.[2'54"]

[Notice: undefined index. shippable in uc_usps_product........line_134. ] Here is the error message that I warned you about. It is usually in relation to an undefined variable.
So looking at line 134 of this module's code, it just relates to the form of code for UPS [United Parcel Service], it just relates to
the form settings: whether or not "shippable" is set. Because the "shippable" setting is not enabled for a product kit, it looks as
as though [that is why] we are getting that error. If you ran into something like this, it would be a good time to post an issue on Ubercat's
mainenance page on I have not gone-over to check whether this might be already addressed, or already pointed out: that kind of thing. So: it won't affect
us, but if you are doing this, and you get that error message, that's the issue.[3'36"]

The reason why we are not pressing "save and continue" is that we have the opportunity to apply discounts here.
So if we bought these two individual items, our total would be $109, but if we want to add a heavy discount here for users, we can do this:
[Total price box]$70.
We'll make that $70, and then if we press "save and continue", that discount is applied to both products. Not necessarilly evenly, but we can change that if we like to.
Actually, it looks like it [the default reduced price on each item] is probably a percentage of their costs, so it could have been applied evenly.
Obviously, you can change around the quantity and the discounts if you want to, but now we can go over to preview.

And of course we get tonnes of errors. This is not necesarilly a good thing. We don't really need to preview; I meant that we can go to view.
There when we are reviewing the product, we see $70. The two products that we are specifically getting here, the image for our product,  and then we had an attribute on the awesome book, so we can choose whether to use that as well. We will go to yellow.
[add to cart button] And now if we added this to our cart we can see here that we've got $70, we have got the colour yellow, and our two products are listed.[4'46]
So that is creating a product kit. It is pretty straightforward; it's pretty easy to to, and it's a nice convenient way for you to add products to your site for users, obviously, not to have to purchase the items individually.[5'00]


From that, which is a pretty basic look at those [kits], we are going to look at stock notifications
Just briefly, we will step into Pete's Awesome Product here. Actually: I am sorry. Before that,
we are going to go to

store> configuration>stock notifications

This is just the default setting for the stock notification system itself.
[send an email when stock reaches a certain threshold] we will send an email when stock reaches a certain threshold, because I want to maintain my stock levels, so I want to know that.
There is the subject [of the email] that I would get, and the text.
[presses "save and continue"]
So: pretty basic; nothing complicated.[5'35] We'll save those configurations,
[content> ] and now if we go to our content, we can actually enable stock notifications for a specifict product.[5'43] So...
[looking at a list of products with links] What we were going to look at was Pete's Awsome Product, I think,
[clicks on the link for Pete's Awsome Product]
[clicks on the view |edit tab on the product page] and we will edit this, and when we edit the product we will see that there is a
[product | attribute | features | stock ] tab for stock, so we will go-ahead
[check box under heading "Active"] So we will check "stock". This check-box would normally be un-checked [6'00"], but we will go-ahead and check that off.
[box under heading "STOCK] And we will add our stock [amount] here. I have already created an order, and that is why I am at minus two. So let's say that I have 100 in stock
[box under heading "THRESHOLD"] and my threshold is 10. So when I have 10 left, I get an email that says "you are getting low".
[button "save changes"] So I save those configurations,
[screen returns to the view wnd edit product page] and review the product. Nothing changes here for the product the customer or anything. They have no idea what your stock levels are at, and ubercart by default will allow customers to continually purchase the item, regardless of the stock level.  This can be a good or a bad thing. This can be a good or a bad thing for you. You know, if you are dealing with a physical product, you could have something that goes to back-order, but you don't really want them to know it, but then you don't really know when it is going to ship, and you can create some issues there. [06'50']

If you are looking for a solution where customers can't purchase if there is no stock, there is this module, which is the out of stock module. [7'00"] This will replace the add to cart button with an out of stock message. The good thing about this is that customers can no longer order something that is out of stock. The bad thing is that you don't know if someone is trying to order a product that is out of stock; you are not really sure what your demand is.  Nonetheless, I will briefly show you here: I have installed the module to give you some kind of idea of what we are looking at.
So I scroll-down to Ubercart Extra modules... Out of stock notifications [button: save configuration]. Then we will enable this. [enables module].
Then when I go back to my product [view | edit screen], I have 100 in stock, so the customer knows that. And if you go-over to [the stock page] stock, [stock column] press zero. Save changes.  Go back to our home page. You see an "out of stock" message. [7'57"] That "out of stock" message is actually customizable. [08'00"]
store> configuration > store > out of stock notification
...over at out of stock notifier. Or notification. Sorry.
[on to a page of options]
[tickbox: display throbber = moving wheel on the button] And we can display this "throbber". which is a kind of annoyance, so we can take it out.
[tickbox: display customer stock information] We don't have to show customers the stock information, so customers will not see that.
[pre-filled message box reads "out of stock"] What we see here is what customers are going to actually see.
And this is dependent upon our html here. So this is, by default, filtered. So if you saved that, you would see this whole thing. By default we have the red [text]. But you can set that as whatever.
[button: save configuration] go ahead and save the configuration. And there we go. So if we go back to our home page. [8'33"] you will see "out of stock", and that we have removed the actual notification for the throbber and for the actual stock level. But we don't see that because we are out of stock anyway.

So that was that module. Again, there are positives and negatives to both [ways of displaying out of stock items] . It [the best option] depends on what your preference is.

So that was product kits , and that is stock notification.
That's typically it for the Drupal set-up with Ubercart.

Now, wrapping things up, what we are going to do is walk you through the process of making an order and  walking-through the order status, just so you are aware of how that works, and some of the options that you have. That we will be it for the tutorials.

order process

So lets go ahead and do that, by going back to Products, and I think we have already added that [product] to the cart, but we will go ahead and add to cart.  So we are going to add two of these. We are going to have the $5 and the $2. Just as a point of reference, we had the $5 which added another $5 - sorry
we had the colour attribute black which adds a $5 charge to our products so it adds $75 as opposed to $70 (the yellow does not have an increase). So we will go ahead and checkout, and if you remember....

...we've got some issues here with our out of stock module, so maybe it wasn't as great as I recommended: use at your own risk! I apologise for that.

But we will go ahead. We will check-out here [10'01] This is all set-up on my sandbox site, so I can checkout with that. Again, I would recommend that you do this in a sandbox site, just to check that your order statuses work and that you can checkout. So: we are reviewing our order. Everything looks good. We are shipping to Hollywood. And now we can go-ahead and submit that order. Again, I have my sandbox customer ID. This was set-up in one of my previous video tutorials so, hopefully, if you followed along the entire series, you know what I am talking about there. Now I can check-out here. [10'34"] I can go to "pay now".

Just briefly, here, again, you see the individual product items [in a paypal shopping cart and payment screen], rather than having the product kits listed. So if we had changed that and we had just listed product kits, it would not be the individual products [showing] here.

So we can go ahead and pay now. We have just completed our order so we will go-ahead and return back to the site. [which says "order complete"]. So we can now go to our orders and check them out
store>orders>view orders
and you will see here that the newest one at 1.45 was completed.
The reason why it is completed is that the products that we had were not actual shippable products. We did not set those up to be shipped by UPS or anything, As a result, if we go to our order status here, you will see that we got that payment. We got the payment and boom! the order was completed. There is not much [else] going-on there. We could send, you know [11'30"] an order comment, and then send that (by pressing "update") to the customer himself or herself, and that would be it. Again, if you take a look quickly at the log here, it shows you how this proceeded through our system.

Now that is all great for the one product that, you know, isn't shippable, and is available online, like your product roles, or your downloadable products. But if you have a shippable product, there is going to be another product that you are going to go through.  So let's go ahead and do that. [11'55"]


I am going to go to my content and [click on] I think "super awsome T shirt" - this is a T shirt with Bailey's photo. It is an actual shippable product. So we will go ahead and add this to the cart. We will check-out. And we will choose "1 Main Street". My billing address is the same as my delivery. We have got our shipping options here - so we will keep it [the option] at $15. We will go to review. We will submit the order. Enter a password. Pay now. And [12'39"]
when we return back to the store, when we go to
You will see here [next to the order] that we have "payment recieved"; we are not actually completed. The reason for that is that this is a shippable product, and we actually have to package and then ship. So, the next step here, if you are administering a site like this, is you go to your
"packages", and we will make a package, [12'59"]. This is going to be in packet one. So that is done. Now we go to
[dropdown menu: ship manually] We are going to ship it manually, and so in doing that, we have the saved address - the ordering address, the destination - where it is going which is to the customer, the package and we obviously have one,
[box: package type] you can enter a package type if you want to here
[box: declared value] you can enter a declared value, again, if you want to
[box: tracking number] if you have a tracking number - so if you are using UPS - you can manually enter that in.
[boxes: weight, dimensions] Weight in pounds. Again, all of that information which can be included.
[boxes under a "shipment data" heading] Now: shipment data. Because we are doing this manually, we would be entering this data in for whoever our shipping [company] was - you know, perhaps we are using [?] data, and, you know, we don't have that installed in our site, so we go ahead and do that.
[drop-down menu for number of days' delivery] Expected delivery will be - say - the 31st.
[box: shipping cost] Shipping cost is  - I don't know - let's say $10.
[button: save shipment] We will save the shipment

We can also go and them print the packing slip.
And if we checkout the log, we see that nothing - we see that here we don't actually have the completed [order] or anything beyond pending - right? That's right. And "payment recieved".

So if we now go back [14'21"] what we can do here, is that now we can go to
[box: order status] completed, and we can add an order comment and say "order shipped October 27th" "tracking number is..." and then enter a tracking number
[checkbox: send an e-mail notification on update] make sure we send an email notification to the customer
[button: update] press update.

And now our order has been updated. We see that here, the order status has been changed to shipped, our customer has been notified, and then when we go and actually check our store orders [it's done]. So the one thing [to remember] here is that we went from the order completed meaning "payment recieved" to mea

We might want to indicate that there is a step between them when we are actually shipping. So if we went into confuguration unders
you will see here that we have the order statuses. We can go ahead and add a custom one, and we will say
[box: order status id] shipping
[box:title] Shipping
[drop down: payment recieved] payment received
[button: create] So we will go ahead and we will create this.
And now you see that we have "payment received" here.
So now what we can do, is that we can go back to our orders themselves, look at this [order], and it is not completed; it is actually shipping. So if we update this and we go back to our orders, we now see that this is shipping. Right? Once we have confirmation that it has been delivivered from our courier and we know that we are good, we can come back in here and then enter it as completed. Again, it's a minor thing; it's totally up to you. You could also add another status that says, you know, that is is packaged, so then you know during the day - maybe you have a pickup every other day or something along those lines, maybe you could have something hanging around in your warehouse that is packaged but not actually shipped.

So that's it for this video tutorial.

In the last video tutorial what we will do is wrap everything up, to take it to [being] a production site, which is not very complicated. It is pretty much just our UPS [United Parcel Service] and our  and our Paypal that we want to change-over. But we also want to walk-through as an anonymous user to make a purchase, and a few other things.

So, again, if these video tutorials are helpful, leave a comment, let me know. Hopefully we will see you in the next video tutorial. Thanks very much

[Drupal 7 / Ubercart video tutorial 6 of 10 showing how to set UPS, Paypal, and conditional taxes]
[Drupal 7 / Ubercart video tutorial 7 of 10 showed how to use the default catalog module]
[Drupal 7 / Ubercart video tutorial 8 of 10 showed an alternative flexible method of showing a catalog]
[Drupal 7 / Ubercart video tutorial 9 of 10 shows how to use product kits, stock, and order states]
[Drupal 7 / Ubercart video tutorial 10 of 10 shows a simple checkout, reports, and suggests a theme]

No comments:

Post a Comment