Ubercart is an awesome Drupal shopping cart, and the best part is it's free! In part 1 of this Ubercart tutorial you'll learn how to install and configure a basic Ubercart store, including a catalog and a couple of products. I'll also show you how to include Ubercart image support for products and catalogs.
In future parts of the tutorial we'll setup payment through Paypal, and configure shipping quotes. Here's part 2 and 3:
Part 2:Ubercart Paypal Tutorial
Part 3:Ubercart UPS Tutorial
Modules Needed for Ubercart Tutorial Part 1
You'll need to download the following modules to set up your Ubercart store. We're using Drupal 6 and Ubercart 2.
Transcription for: Ubercart Tutorial - Install Ubercart
Hi I'm James and I'm going to show you how to configure an Ubercart store. We're going to create a catalog, create some products, configure images so that they work.
It's a very fast paced tutorial so make sure that you pause when you need to and follow allow while installing your own build if you like. The modules that you need to download are actually listed at my blog post right here: http://www.freelancedrupaldeveloper.ca So yeah, go check that out first, and download those and upload them to your modules directory. Alright so lets get started.
Ubercart Modules Needed
So first we need to install Ubercart. Here's a clean installation of Drupal, and we're going to go online and find the Ubercart module. We're using Drupal 6 and Ubercart 2. So google Ubercart and look for the module and download the version for Drupal version 6.
There's a bunch of other modules we'll be using in this tutorial and they're all posted on my blog freelancedrupaldeveloper.ca.
You'll want to download all of them there's links to them, and then just go into your drupal installation folder. Go to /sites/all/. You're going to want to make a directory called modules in there, and then unzip or untar all of your module files here such as Ubercart, FileField, all of them there. They're all listed at freelancedrupaldeveloper.ca. The one's that you need.
So be sure to check the description of the YouTube video for links to my blog, and the post that has all the modules you need to download and unzip in that folder.
So you go to Admin > Modules and we'll enable all the modules we need. First we need to enable the Content module, enable the FileField module, ImageField, as well as Path. We also need ImageAPI, ImageAPI GD2, ImageCache, this will give us support for images for products. We need Token, Cart, Conditional Actions, Order, Product, Store, Catalog, and that's it!
So we save our configuration, and after we've enabled all the modules we need, it's time to start configuring the store.
Ubercart Store Configuration
On the menu click on store administration and then configuration and then choose store settings. So this is all the information about your store. If you pick edit, you can pick your store name, Ubercart Demo Store. Store owner, put in your name, and put in your email address below, your store phone number, your store fax number, and then the address of your store here. Pick your country and province, or territory, or state and then your postal code.
You can put in a help page if you want, you'll have to configure that later though.
Enable image support in Ubercart
At the next screen after Save Configuration, scroll to the bottom and click on "click here" to enable image support. Now images are enabled for our products and our catalogs.
Creating products in Ubercart
If you click on Create Content in the menu, and click on product, we'll create our first product here. So I'm going to create a fish hat. I don't know why but I saw a cool fish hat on reddit and I've been a bit obsessed with it ever since. I want one, I want my girlfriend to make me one.
Now we're going to find an appropriate photo for this fish hat. I wouldn't recommend google ganking like this on a production web site, but this is just for fun. So browse and find the image. Make sure it fits the file format standards.
You can add some text here that will show up in the alternate. You need to enter an SKU. It can be anything but Drupal requires that you do. Also add a sell price, that's the cost that customers will be charged. You want to put in a weight, and you also want to put in the dimensions of the product in whatever unit measurement you want or else you won't be able to ship the product and get shipping quotes later on.
Now we'll have to go into Administer > User Management > User Permissions. For the anonymous and authenticated user enable the following permissions:
- View ImageCache Cart
- View ImageCache product
- View ImageCache product_full
- View ImageCache product_list
- View ImageCache uc_thumbnail
So save your configuration and if you go to the home page you'll notice that the fish hat is now a product that's showing in the front page. You can go to your cart and play around with the shopping cart that's provided with Drupal, and ya it' looks pretty cool.That's how you create a product.
Creating an Ubercart Catalog
We are going to go to store administration, and you'll notice we have an unlisted product. We have created a catalog for it yet, so we need to add terms for the product to inhabit.
We'll do that by creating a catalog by clicking the link below, add terms for this product to inhabit.
Now I'm trying to find a suitable image for this. We'll add a silly hats catalog for the fish hat to inhabit. Add an image and a description and then click save. You've just created a catalog.
So now if you go back to store administration, and click on the orphaned products link at the bottom. Find the orphaned product which is the fish hat and if you go to catalog, just add it to the fish hats catalog and click save.
You'll see there are no more orphaned products which is great. Now we go to our catalog and our fish hat is in the silly hats catalog which is very nice.
Creating a menu link to the Ubercart catalog
So now click on administer then menus and then primary links. We're going to create a link to the catalog here. You want to put the menu link title silly hats catalog down below, and in the top you put the path to the catalog which is /taxonomy/term/1.
Create a description, click enabled, and then click save.
So now the silly hats catalog will show up in the primary links menu, but now we have to go to Administer > Blocks. Go to the very bottom and find Primary Links Menu and set that to the right sidebar and click save. Now you'll see the Primary links in the right side that now has our catalog on the right.
Creating more Ubercart products for our catalog
Now lets create another product for our catalog. Lets call it beer hat. Everyone loves beer hats, if you've been in college anyways. Add a description, add the catalog silly hats. Lets find a beer hat picture real quick off google. I wouldn't recommend this, this is for demonstration purposes only. Lets rename the file here real quick. There we go we can upload the file now.
Add a title here called beer hat. Change the weight, add a length, width and height, I don't really know what it is I'm just guessing here. Oops we forget to add the SKU, add the pesky SKU, just add beer-0001, it can be anything. Now click save and you've got a beer hat in the catalog here.
So now you can see we have a beer hat and a fish hat in our catalog. You can add each of them to your cart and play around with it. You can checkout and pay for it, but we haven't set up payment yet, and that will be the next step.
Wrapping up and Ubercart Tutorials parts 2 and 3
This is going to be part of a 3 part Ubercart tutorial. The first one shows you how to do basic setup for your store. The second shows you how to setup payment with Paypal. The third one will show you how to get shipping quotes working properly with UPS or FedEx I haven't quite decided yet.
Well thanks for following along, hopefully now you have a basic Ubercart store setup. You can't accept payment yet, but we'll cover that next time in part 2 and in part 3 we'll go over how to set up shipping for your stores, so you can get shipping estimates on all the products you're shipping from your address to your customer's address. We'll see you next time.
