Ubercart Ecommerce solution on x10

[Dan_M]

I'll be documenting my foray into building an online store in this thread. I'm no expert by any means, I just started looking into all of this last week, but I'll detail what I've done so far and add to it as I go along. Please post any questions or comments, I'll try to answer them, or at least point you in the right direction.

After looking around at several different solutions (osCommerce, Joomla/VirtueMart, ZenCart, etc), I decided that Drupal/UberCart (http://www.ubercart.org) looked like the easiest way to get an open source store up and running and still be able to easily configure/design it how you want. This is my first time working with a CMS, so I can't compare it to other stuff, but so far, I like the way Drupal modules are "plug-and-play" and the way you can override functions in your template. Anyway, after fighting to get it installed, it only took me around an hour to have the store up and running.

First I'll cover the installation:

• Don't use x10's Fantastico to install Drupal, they have the most recent version (6.2 I think), and the UberCart modules don't work with it yet.
• Ok, so first you will need to setup a MySql Database. This is easy using CPanel. Go to the MySql Database Wizard, give it a database name, create a user/password, and grant ALL PRIVILEGES. Write this info down, you will need it later.
• Next, You will probably need to get your php settings upgraded to intermediate. You can request that here (http://x10hosting.com/account). I was getting php memory errors during installation because the default setting is 8 megs of php memory I think. My request was accepted right away, and I got the confirmation email the next afternoon (thanks x10 guys, awesome service).
• I tried using the UberInstaller (http://install.ubercart.org/) but even with my upgraded php settings, I was still getting problems.
• The solution that finally worked for me was downloading the UberCart Package. This is Drupal with UberCart and all of the necessary modules preloaded:
  • http://install.ubercart.org/files/install.ubercart.org/package_builder/ubercart.tar.gz
• Download and unzip (http://www.7-zip.org/) the package. Then ftp (http://filezilla-project.org/) all of the files and folders to your /www/ directory (or create a subdirectory under /www). There are alot of files, so this will take a while. Make sure all of the files are transfered and you don't get disconnected somehow with files still in the queue waiting to upload.
• Once you've got the entire package uploaded, go to your homepage (xxxxx.x10hosting.com) (or subdirectory if thats where you put the files), and you should see a screen prompting you for your database info, put in your info from the previous step (leave the database host as "localhost"), create an admin account, and that's it, you now have your own webstore .

Next I'll cover changing the theme as well as setting up and administering your store.

 

[Dan_M]

Ok, so you've got your store up, now you need to go in and customize the look of things.

I didn't particulary like the default theme, it was a fixed size which didn't work well for smaller windows (800x600), and the way the main page extended into the header didn't work too well. The best pre-loaded theme that I found was bluemarine. I want to change this theme, so it's a good idea to make a copy of the theme and use the copy, leaving the original as is.

• Go to your Cpanel, open the File Manager, go to the /themes folder. Create a new folder for your theme. Go to the folder under /themes that you want to copy (I chose bluemarine), select all files and copy to your new folder.
• Now go to your UberCart website and login as admin
• Go to Administer/Site Building/Themes, you should see your theme listed in this list (it will be named whatever you named the folder).
• Click the Enabled, and Default checkboxes next to your theme and push the Save Configuration push button.
• Now you should see a configure link next to your theme, click this
• Select which items you want displayed on your pages, and load your logo image if you have one.
• If you want to change the default colors, open the style.css file under your theme folder and look for the color attributes (i.e. #fff, #000000, white). I would make a backup copy of your style.css file whenever you go in to change it. You can really screw up the look of things, so keep that backup ready. For more information on what style sheets are, go here: http://www.w3.org/Style/Examples/011/firstcss, or here's a cheesy video: http://www.howstuffworks.com/2744-css-video.htm
• I also changed the #header width in style.css to 95%, this gives it a slight margin on each side, and makes the page looks less crowded.

Next I'll cover adding and enabling new modules that will let you to add some cool features to your webstore.
Edit:
Drupal uses modules to add new functionality to your site. It is very easy to add, and configure these modules with your Administration Tools. I added a few modules, and enabled some modules that came pre-loaded. I added a module that gives users the ability to create and share a wish list, and the nice-menus module, which will let me add an expandable menu with drop-down boxes across the top of my page. To see what modules are available, you can start looking here: http://www.ubercart.org/contrib

• To add a new module, simply download and unzip the files, then upload/ftp the directory into the /sites/all/modules/ubercart/contrib/ folder on your website
• To enable/configure new modules, go to your UberCart website and login as admin
• Go to Administer/Site Building/Modules, you should see a list of all the modules loaded, sorted by category, the ones needed to run UberCart are already checked.
• Simply click the checkbox next to any module that you would like to enable. Here is a list of the modules that I enabled:
  • Comment – will let you put a comment section in your product pages, so that users can leave comments/reviews on that product.
  • Contact – will enable a Contact Us page where users can fill out a form to ask a question which will be sent to your email
  • Nice Menus – this is one I downloaded and installed so that my top menu could have drop-down categories
  • Thickbox – will let users enlarge product images, the images are displayed over the current page with a translucent grey background without having to open a new window.
  • Attribute – will let you add options to your product pages (Small, Med, Large, Red, Blue, etc)
  • Taxes – Will let you configure sales tax options
  • Wish list/gift registry – I downloaded this one
  • Payment Method Pack – lets you accept check/money orders.
  • PayPal – lets you link payments to your paypal account and accept credit cards thru paypal without having a separate merchant account
• Now click the Save Configuration pushbutton, now these features are ready for you to configure and use.

 

[holeepassion]

wow ... detailed stuff ... how is it working for your Dan_M
at least I got a pointer .. got to print this .. thank you Dan !!!

would follow it up closely !!!

 

[port5900]

thanks you very much for the tutorial i started the install a few days back. I still got to finish it.

 

[holeepassion]

i wonder how do you FTP using filezilla to x10hosting please ?

thanks

 

[luckym]

Here's the short version...
1. Open your site manager
2. Add new host
3. a. Input your Primary Domain in the Host field.
b. Use Normal FTP for server type and enter your username and password.
4. Click Connect.

If you have any more questions please ask. I might make a tutorial if it hasn't already been done.
Edit:
This is great stuff, Dan_M...

Just a pointer though... I wanted to save some time so I downloaded the tar.gz to my PC then uploaded the whole thing to the server.
You can then extract/unzip it directly on the server using the built in Cpanel file manager.

 

[tomsm]

Great tutorial. I have installed Drupal 6 and I'm waiting for Ubercart to support this version.