Saturday, 13 October 2012

Drupal 7 / Ubercart Video Tutorial 7 of 10: catalog



http://www.ubercart.org/docs/user/30436/ubercart_3x#S1E7
In this 7th of 10 drupal video tutorial on creating an e-commerce site, we continue by creating products including shippable products, purchased roles and downloadable products. Once done, we take a look at configuring the catalog which includes examining the taxonomy system in drupal.]


The next video 8 will show how to over-ride the default catalog module and write new product attributes, with a chance to expose a product filter to the shoppers...


[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 seventh video tutorial in this ten part video tutorial series on creating an ecommerce site using Drupal [7] and Ubercart. I am P Yaworski the author of [? sturctural analysiing in Drupal ] and, like all the video tutorials in this series, this is brought to you in collaboration between myself and the Ubercart.org guys, who suggested it; thought it would be a good idea to get it out-there for new users of Drupal and Ubercart. So lets get - er: let's get started.

Hopefully you've already viewed the first six video tutorials so I'm not going to re-hash those. But we've got a site set-up; we've got it configured, and we're ready now to create some products.
..so..
There will be three different products, which we are going to create. Firstly there are
  1. shippable products, and
  2. purchasable roles, and then
  3. file downloads.
..but...
Before we do that we actually need to do is take a look at the product content type that gets set-up by default when we install ubercart.
..so..
To do that we are going to go-over to Structure>Content Type>Product
and we are going to take a look at Product to begin with.
(..so..you need to ignore these security updates: obviously some updates from Drupal have just come out)
..so..
Let's walk-through what we've got here on the Product. First thing's first: a product field which is actualy referred to as Name. ..so.. Why don't I call this a "product name"? Right. So you can change that . Preview before submitting. I'm going to change that to disabled, because I am going to be creating the products so I don't have to preview those, so that's fine. Publishing Options. I don't want mine promoted to the front page. What that actually does, is: by default if you're using Drupal, it will create a stream of your published front page nodes on your front page. So it just pulls those in, newest being the first. So we saw on the front page there at the beginning, it was the product there that was promoted to the front page. ..so.. I'm not going to use that. What you could do is create your own front page on another node of the site:  "checkout my store"  - that kind of thing, so you won't be necessarillly using that. If you want to: by all means: you'll see all your products on you're front page as you're adding them, but I want more control.

Another thing: I don't like to display the author and date on products; I don't think it's required. 
I also don't want any comment-things: I'm just going to close that.

My Title. Remember: we set this up just briefly  - pre requisiting that we have set up our page titles and configured our search engine optimisation, you can  see here that this will just pull-in the defaults, including our current page and then our site name. If we want to put something specific we can just do it, if we've got some seach-engine optimisation that we want to do. You can also control the fields and let it happen, or we can do it specifically for each product.

One thing we should note is that product and its derivatives are shippable. So, by default: all our products can be shipped...and..
The Product Image Field, if you have multiple images. By default the product just has one: we are just using the image itself.
My Sitemap is going to include all our products.
So I am going to save that product.


So with that, we are just going to talk about the actual fields. And I'm just briefly going to talk about these: I'm sure you know what we're talking about here. ..So.. Remember we've got our catalog set-up? We enabled that amongst our modules, so that is what we see here. [3'00"] The catalog is actually based on Taxonomy Terms, so we are going to walk-through that in a bit: the catalog  is actually a vocabulary, and you can add some terms to that. 

Additionally we've got the image here - that was what we were talking about before: you see product image. You could add additional fields if you wanted to. It's beyond the scope of this video tutorial series, but it's an option that I just want to make you aware of.

Before we move on, I'm just going to show you this select list here, because this is going to have some implications for your site. ..so... We go to the "widget type" for your product catalog. It goes to this little select list. So you get to pre-populate your different taxonomy terms for your catalog. .So, you know, if you have: - What we are going to do as an example here is: we are going to have pictures of my dog Baily, pictures of my dog Suzie and these are going to be different terms.  If we wanted to do free tagging so we are constantly adding new types of prodducts, what you want to do is choose that one, and type it in as you go: it will get added-in.  You can add multiple tags for one product. Or, with the select list, you just kind-of pre-populate that.  So just be aware of that when you go ahead and you are using that.


The next thing we're going to take a look at is just the Manage Display. The reason we're going to do that is that you can change your labels here. So you might not necessarilly want your labels for your image, so that could be hidden.
....uc_product...
this will actually scale your product to different sizes of images - so uc_product is what we are using.

So normally I would save my configuration,  because I have changed this to a hidden label, but I don't really care. An additional thing too - and I think we said that in a previous video tutorial - is that you have display price and price, so you see the price twice on your actual products. If you want to remove that, just remove the sale price or the display price, assuming that they are both the same: I have not shown you different prices yet, but that's an option there, so just be aware of that.




So let's go ahead and actually create some products. [5.00]
So the first product we are going to create is pretty easy, pretty basic; it's a shippable product. So, you remember, wev'e got UPS set-up ; we've got payments set-up as well, so with UPS we can add-in our weights and all that kind of thing. So lets go ahead and do that. So we'll call this - um -  you know: we actually going to make this a shippable product, so we will call it a "T shirt with Baily's photo".  [types text] "Buy your very own T shirt with Bayley's picture printed on it". Right? And So we will go ahead and we will choose a file. I've got one here with a nice big smile on it; it will probably take a bit of time to load.

Catalog menu
You'll see here a catalog [drop down menu left of screen towards the top].I've gone-ahead and I've added -er-  Baily [to the items on the drop-down] term. So: I'll have to show you how to add new terms. But that's why I could choose that. So my SKU is going tot be BAILY_SHIRT; sale price is going to be a whapping $9.99 . And here [a ticked box under "list price" marked "product is shippable"] I want my product to be shippable so that's going ahead. The weight is going to be 0.5 lbs and the length is going to be  - I've no idea - 24 inches? ; width 20 inches? Height 1 inch. Maximum package quanitity: so you can fit 50 [T shirts] in my boxes. ..So.. All of that is required information if you are going to be shipping with UPS. If you don't add this in, you are going to get problems. So if you are having issues providing [shipping or postatge] quotes, it's likely [to be] because you did not provide a weight or dimension for your product. ..So..

Shippping settings here.
Your "package type" is going to be dependent on what your shipping arrangement is with UPS so we'll just select "store default packaging" and leave that there. The "default shipping type" [selected]. Don't worry about that too often unless you're doing something special. I know that I only have small packages set-up, so, for a default [option], that's going to be fine.

Default Pickup Address. This is one thing to note. You'll remember when we were talking about shipping with UPS and recieving errors on your quotes if your default pickup address is not correct? So if you set that up and is wasn't correct, your first product would actually be picking-up your default settings. Then when you go to troubleshoot you change your default store settings. And you have to come back into this. So it's a little bit complicated, but if you are running-into issues with this, make sure to check that.

Weight Quote
Shipping by weight: if I want to change my weight quote, so that this is a $2 added, rather than a default, I can go ahead and do that.

Flat Rate Shipping Quote
...and my flat rate: if I want to make that product-specific: I can do ahead and do that as well. The other things that we have...

Metatags 
These were all already using our defaults, which we set-up previously when we were doing our menus. So we're good.

URL path settings
same as our url path settings which we've done already so we don't really need to customise that, so all that we really need to do is go ahead and press save our product.
---------------------------------------------------------------------------------
Right: so here's a pre-set [image ize of a dog]. Right. Actually I uploaded a huge image. It [ubercart] has resized it.
I've seen that it's cataloged in "Baily". You'll see that I've got my SKU ["Tshirt_with_bailey's_photo"] and my one - my two prices - you'll remember I left them there, so I've god display price and list price, and it shows all my dimensions and that kind of thing. So that's my new product. That's a shippable product: very easy to create, and if you click on my Catalog you'll see that I've got my catalog [of] "Bailey", and then I've got two product terms that are tagged as "Baily".
..so..
While we are looking at that, I'm just going to show you how we set up the Taxonomy Term, although I'm sure I've done this previously... but ..
STRUCTURE>TAXONOMY>PRODUCT 
...here. You will see that I've got the one [Product]Type. I've got Bailey. If I want to add additional ones I'll just go to +Add Term
NAME
Suzie
DESCRIPTION
Products related to Suzie.
Right. So
META TAGS
- meta tags: - er: the Suzie page will have its own meta-information. Remember when we were looking at the catalog for Bailey: we're looking at the catalog for Suzie. This is all meta-information.
URL PATH SETTINGS
- url path settings: we could change the url path. This will all be automatically done, so we are not going to do that.
IMAGES: Choose File
- images: If we wanted to add an image to the actual catalog that we saw there, we can find a good picture of little Suzie (from a linked directory of thumbnail sized photos). So let's see if we have a good one here.There we go. So I'll just upload that. So while that image is uploading we'll just go ahead and press
Save
- Save: so we've added a term now which we can see as it starts coming-in. If we go back to the catalog now you'll see that we've got "Bailey" and thenn we've got "Suzie".


..so...
let's go back and create a new Product, and we'll make this our purchasable role. ..so .. We'll call this a
Product Name
Site Membership.
Description (Edit Summery)
Become a member to ucwebdeveloper.com
Choose File
- so, we choose an image - whatever image we want - here: another image of Bailey.
Upload File
-we'll put this in the Suzie catalog this time.
SKU*
- we'll call that Membership. 
Sell price*
- Sell Price is a whapping $99.99
We don't have to worry about our shipping settings because it's not shippable.
We don't have to worry about our menus. So let's go ahead
Save and Continue
And we will save and continue.
So now, as a slight detour, what we are going to do is: remember when we did earlier tutorials, we enabled site roles to be purchased? And when we did that we created a "site member" role here? Well if you don't have that, you can just type in here. So you have that.

So now, when  we go to our actual product, what we are going to do is go to
Features (third button of three after product and attribute on the edit product menu)
Features.
And we are going to add a role assignment [from a drop down menu]
And this is going to be a
SKU
SKU: Membership
Role
The role is going to be "site member"
Shippable Product [tick box not ticked]
It's not associated with a shippable product

Default Role Exploration [tick box not ticked]
And we've not going to over-ride the default role exploration.
Save Feature
So we're just going to go ahead and save that feature.
And now this role - this assignment - is associated with our product "Membership".
If you don't have that configured already, you're going to have to go into
PRODUCTS
It should easily drop down but it didn't. And then you go into role assignment, where you can do every thing about your role assigment. Again, that was in...
ADMIN>STORE>SETTINGS>PRODUCTS>CONFIGURATION>PRODUCTS>ROLE ASSIGNMENT
Again: very simple to create.
We then go to our catalog
We go into "Suzie".
We have a site membership, with a SKU, a title; we can add that to the cart. I reckon that if you click into it you can actually check that out. So: very simple to creat roles.

And so our last thing we are going to do is that we are going to create a product that is associated with a file download. So we are going to go to
ADD CONTENT>PRODUCT
Product Name 
Product Name: product name is going to be "download of pictures".
Description (Edit Summery)
"download a zip file of amazing Bailey and Suzie pictures"
Right: so we are going to associate a photo with this again - if we want to.
Choose File
[chooses a file from a directory of thumbnail pictures]
Upload File
Product Information>SKU*
SKU: we'll call that "file upload"
Product Information>Product is Shippable [tick box]


Product is not shippable.
And we have all our metatags set-up so we'll go ahead and click
Save and Continue [12'52"]
So now, what we're going to do is that we are going to head back to the
Features
Features, as we did before.
Add
and we're going to add a file download.
So: a couple of things to note. Obviously our [demonstration] got into it properly here but you might have some issues. So, if you are having problems: go back to your
SITE CONFIGURATION>PRODUCTS
File Download Settings

Files Path
So you'll see [that] your products really exist in a specific folder. So you'll see that mine really exist. They're outside of the root, which is what Ubercart recommend you do for security reasons, so mine is "../private" .
[ ]Warn about purchasing duplicate files
It's going to warn about purchasing diplicate files
etc etc
And they have seven days to download their files.
So make sure that's all configured.
So with that set-up, you now have to go to

Products > View File Uplaods
And here is where you can actually perform file uploads. Right. So. You can manually upload files, through this interface. You go to Perform Action.You are going to choose whether to select a file and choose to select it.
The other thing you can do is that you can FTP into your site, and you can just upload the files. So Readme.txt happened to be in that folder. I went ahead and I uploaded via FTP backupandmigrate - the backup and migrate module - and ends-up showing up here. So that's a nice little time saver. You can upload fifteen different files that you want to download, and do it all at once.
..so...
SKU
SKU is associated with the file download [by using a drop down menu]
File Dowload
File Download: this is what we are doing. The file we want is called Backup... [chooses from list] Right: so if you can't remember the name, you can go back to File Download and you will see it.
Description
Description: "awsome photos of Bailey and Suzie." I've done a typo. Don't really care.
Not shipping.
And we are not going to over-ride any limits.
Save and Continue 
So we can go ahead and save that feature.
View 
And now we can go and View.
So now anybody who actually purchases this: they are going to have the ability to download products.
And we are going to see how that actually happens in a future video tutorial. Right now we're just setting everything up. We'll be testing later.
So those are our three different product types that we have created. The last thing we are going to do is we are going to it take a look at the Catalog, which we enabled.

Just a quick note here: I'm not a huge fan of the catalog. I prefer to do this all manually myself because that way I feel like I have a little bit more control. What the catalog does is essentially to create Views for you. It will create the Taxonomies for you, and it will create all your pages associated with that. One thing I don't like about the catalog (so if you remember, we chose or we got Catalog here slash Bailey. And the reason for that is, if we go to Configuration>Sytem... no: sorry. Go to search - meta - url aliases - patterns...

We've got our catalog/termname
But it's also a taxonomy
So it's a Vocab/termname.

And what ends up happening when we do that is that we get catalog/bailey which is appropriate for catalog, and if I go dash-zero [types -0 on the end] , I get a different look to the same page. Right? I get these three different products; it's a proper page. It's catalog slash bailey.


The reason for that is that catalog/bailey, as I said before, and catalog/bailey-0 is the taxonomy view, which by default comes with Drupal's taxonomy modules. So: a bit of a problem there. I like to avoid this myself so I just use taxonomies. In a future video tutorial - video tutorial eight - I shall show you the advanced way that I like to do this. But for now, I'm just going to walk you through using the catalog.

STRUCTURE>TAXONOMY>CATALOG
So, that said, when you checkout the taxonomy, we can go to catalog, and you'll see our terms - right - then we can go ahead and edit those.
Manage Fields tab
And also Manage Fields And so, you'll see here that I've got a Machine Name, and I've got Image. And so, you know that any time when we've got an image, we have to make sure that the display is going to be proper. So if we go over to Manage Display , you'll see here that I have "image style uc-catalog" by default.This is just the image itself, so that if you upload a massive one, you are going to get a massive one. So you want to change that. I chose uc_category which was automatically created for this purpose. So I am going to go ahead and update that.
Save 
And go ahead and save that.
Right. So you know how to add terms to your vocabulary and you know how to change images.
STORE>CONFIGURATION>CATALOG>EDIT CATALOG DISPLAY
Catalog Display: Table
Catalog Display: Grid

The other thing that's worth stating and of note is that when you go to Catalog, you can acatually change the catalog display to a grid from a table. And this is all based on Views. In the next video tutorial I'll show you how to create my own custom views. But - going back - if you wanted to manipulate this you would go here and you can just edit the view itself. And its all in the UC structure [from the admin drop down menu] Catalog. Catalog is what we see here. The catalog terms is actually when we go into here. You'll see the products. So if I went in to edit this view [by clicking on the top right of a rectangle round it] Right. You can see all the fields here. So if I wanted to add dimansions I could go ahead and just add the dimensions on the table; it's all available here.
..again..
Getting into the nitty-gritty of the change of the view view is beyond the scope of this tutorial. You will get a taste for Views in the next video tutorial when we go ahead and I show you the different system that I like to use. But Catalog does provide you with a nice option right out of the box, obviously, without much configuration, I go into Catalog and I see all of my products kind of lined-up nicely. The reason we have this empty bar here [18'30"] is that we have a table; we don't have a third - a third term to create. So if I did that, your table would look a lot cleaner. But if I go into Bailey, you will see that all the Bailey products are already listed. It's nice. It's clean. It's pretty simple. So: don't be afraid to use the Catalog, but I'll show you a little bit more of a powerful technique in the next video tutorial.

So: hope this helps. Please, as always, leave a comment or a thumbs-up on You-tube: that would be awsome; really appreciated. I've been getting a tonne of positive comments: keep them coming. Its always good to know that these help you. So: if you would like to see anything changed, please leave a comment and let me know. And with that, we will see you in the next video tutorial.


[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]


♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦