Open Cart Manual

Open Cart Manual – Installation to Deployment

By: Ed Brown – This manual is the ‘textbook for the IMED 2309 Internet Commerce class. It

includes notes and lessons learned and can be used by site administrators to get an OpenCart

store up and running. A separate manual was also written to help store owners administer

their store.

5/1/2015

2

Table of Contents

1. Choosing an E-commerce software package……………………………….………………………………………. 4

What is E-Commerce?

What is Content Management?

How do E-Commerce sites use Content Management?

What are some of the E-Commerce Software and Cloud services?

Summing Up E-Commerce

2. Download and Installing OpenCart ……………………………………………………..……………………………… 7

Hosting Considerations

Installing OpenCart

Download the most recent copy of OpenCart

Extract the files and directories from the zipped file

Copy the contents of the ‘upload’ directory to your server root or desired subdirectory

Change config-distro.php and /admin/config-distro.php to config.php

Navigate your browser to the installation directory and supply required information

Delete the install directory

Log in to the Admin Section

3. Configuring and Customizing OpenCart ………………………………………………………………………….. 15

Simple ways to improve your branding

Delete or modify the default demo entries

The home page in OpenCart

Changing the bottom banner

Changing the inside page display

Inserting new products and images

Adding images

Consider resizing your images

4. Selecting a Theme ………………………………………………………………………………………………………….. 29

Original theme

Changing to a new theme

5. Adding Categories and Products …………………………………………………………………………………..… 31

Categories

Products

6. Setting Localization & GeoZones ……………………………………………………………………….…………… 34

Localization

GeoZones

Setting default length

Setting default weight

3

7. Testing Sales with a Pay Pal Sandbox Account …………………………………………………………………… 37

Setting up PayPal sandbox account

Install and activate Pay Pal module

Testing a Pay Pal purchase

Confirm Pay Pal purchase in your orders section

8. Set up USPS for Shipping …………………………………………………………………………………………………… 49

Register for a USPS account

Activate USPS in extensions ->shipping module

Make a purchase to test USPS in OpenCart

Confirm USPS works by reviewing orders

9. Setting Up USP for Shipping ………………………………………………………………………………………………… 56

Register for UPS developer’s kit

Open a UPS shipping account

Request Access Key from USP

Install and activate USP module

Make a purchase to test UPS in OpenCart

Confirm USP works by reviewing order

10. Migration of OpenCart to a New Server (Options 1 and 2) …………………………………………………. 69

Consider new install on new server location

Copy images and other resources from old to new location

Import database with SQL tool or backup/restore in OpenCart

11. An alternate and easier way to migrate using backup and restore (Option 3) …………………….. 81

Move images

Backup database

12. Adding email to your OpenCart Installation ………………………………………………………………………. 86

Set up email setting in system-> settings

Use GMAIL or other SMTP server

Fix newsletter template

Send a newsletter to customers

13. Giving your site periodic test runs ……………………………………………………………………………………… 91

Test, test, and test

The ‘life cycle’ of an order

14. Glossary of Terms ………………………………………………………………………………………………………………. 94

15. INDEX……………………………………………………………………………………………………………………………………. 97

4

Chapter 1 – Choosing an E-Commerce Software Package

WHAT IS E-COMMERCE

While some seem to narrow the definition of E-Commerce to the 'trading of products or services over

the internet', I would define it in the broader sense of 'any business or commercial transaction that

involves the transfer of information over the internet'. In that broader definition, it would include a

company’s attempt to convey information by email or web-based advertising, actual sales thru the

common ‘shopping cart’ applications, transfer of information thru FTP, SSH, RDP or other site-to-site

connection capability, electronic data interchange (EDI) between the business and its financial

institution, and, of course, the transfer of a product such as an E-Book, PDF, etc.

This broader scope could be summed up as the use of electronic means and devices to assist in

conducting business or aiding in a commercial endeavor.

While our class focus will narrow into the software to do electronic sales, the broader scope must be

recognized as the majority of E-Commerce deals with conveying information (web ads, information

websites, product listings, email, etc). That ‘information’ consists of considerably more bandwidth and

attention than an actual sale.

MOST E-COMMERCE SITES USE CONTENT MANAGEMENT. WHAT IS IT? Content Management is a set of processes and/or technologies that supports the collection,

management, and publishing of information. This can be any form or medium. When narrowed to the

web or internet, it is usually called a ‘content management system’ or CMS. Now, a CMS becomes a

computer application that allows for publishing or editing of information. Within the scope of web-

based CMS’s, we can identify those as websites containing news, blogs, or shopping.

Probably the most widely used CMS on the internet today is the use of WordPress as the framework for

websites though the use of a CMS for ‘shopping cart’ applications is probably next in popular use.

A computer application build on the CMS concept generally has the actual ‘content’ on a database and

the web application uses scripting (mostly PHP) to access the database content, display, modify, add, or

delete based upon a user’s inputs to the script prompts.

Using a web-based CMS -- and with the aid of a database server such as MySQL -- makes the role of

accessing, editing, and displaying ‘content’ much easier than if one use ‘flat’ or static information files.

5

OK, HOW DO E-COMMERCE SITES USE CONTENT MANAGEMENT?

As I described e-commerce in the section above, I would have to say that 'content management' could

be used to more effectively conduct e-commerce. However, there are certainly many aspects of e-

commerce than would not necessarily require a content management system. Using E-Mail, for

example, would be a part of e-commerce but not involving a CMS (though one could argue any

information in the email may be obtained from a CMS). Use of static advertising pages on a commercial

website is e-commerce but, again, not requiring a CMS for content delivery.

On the reverse side, we could not say that all 'content management' involves E-commerce. A

WordPress blog utilizes a CMS application for 'content management' but that does not make it 'E-

commerce'.

I should point out when it comes to internet (commercial or business) E-commerce, then CM and "e-

commerce" work together quite well. A web-based site focused on selling products or services

(Amazon, EBay, Angie's List etc.) makes extensive use of CMS software to display and offer for sale its

products. The CMS then provides the mechanism whereby a customer may select a product, determine

it cost (including taxes and shipping), select the product or products, and make a financial transaction to

purchase. In this case I would describe the two as "partners in the sales process"

My research showed that some would describe an 'E-Commerce application' as some form of shopping

cart. I would argue that scope is to narrowed but, if we consider it as such, then the "E-commerce

application' would most certainly benefit for the use of a CMS to facilitate the exchange of information.

WHAT ARE SOME OF THE E-COMMERCE SOFTWARE AND CLOUD SERVICE TO USE?

This review covers several of the widely used commercial services. Most of these are subscription

services. Following is a review of the top 3 commercial applications though, for small business or

students, I would not recommend any of them due to cost. All of these are commercial applications

that may be well suited for a business that can afford to invest in software and services.

3DCart --Starts at about $36 and up. It is the most popular commercial application. It offers

unlimited storage, has the most number of payment gateways, has a reasonable amount of

payment gateways, has more reports than any of its competitors. It offers drop and drag in the

interface. However, changes can only be made in the admin panel and it lacks at built in POS

system.

Bigcommerce - Starting cost is about $30. It is in high use and a very popular system. It has

more free templates than most of its competitors. The setup wizard and online lessons are

good. . On the down side, you also need a high tier (more expensive) plan to get most features.

It offers fewer reports, free templates, and fewer payment options than 3dcart.

6

volusion Starts at about $35. It is the second most used commercial application. On the plus

side, it offers a mobile responsive website. It offers an average amount of free templates. On

the down side, it has few reports, a low number of payment gateways, and it requires a high-tier

plan to get most of the features.

If I were running a commercial site and could afford the bells and whistles, I would choose 3dCart. The

fact that it is the most popular means that business like it and that is why they choose it. It seems to be

the leader in payment gateways and also reports. It has an adequate number of free templates.

Another popular application is Shopify though I didn't like that it has no standard reports and limited

payment gateways. It's big plus is that is had a very large product limit in the lower cost plans.

Now, for purposes of what one might consider for a new (and small) business or for educational use in

learining E-Commerce applications, I would consider some of the free (and self hosted) applications I

would choose between Magento, osCommerce, and OpenCart.

Of those, I would recommend OpenCart. It is extremely scalable and has a good look. You can create an

unlimited number of categories and includes over 20 payment and 8 shipping plans. It is user-friendly

and does well on SEO. Customers can review and rate products. It is not a popular as osCommerce but

most say it has a better look and feel. Unlike Magento, where you really need to purchase the Enterprise

edition to get full features, OpenCart is completely free and it would be my choice.

IN A NUTSHELL

A great choice for a startup company or for students learning how to build an E-commerce web store,

the best solution is OpenCart. It is available at http://www.opencart.com . We will explore how to

download and install it in the next chapter.

7

Chapter 2 – Downloading and Installing OpenCart

HOSTING CONSIDERATIONS You need to decide where you intend to hold your OpenCart store. Most commercial hosting firms

are CMS-friendly and some may even actually install OpenCart for you. Assuming you have a hosting

service that allow you to FTP files to the server and lets you establish a MySQL database, you have all

you need and can proceed to the next subsection ‘INSTALLING OPENCART.’

If you are intent is to use OpenCart on your local computer for educational purposes, you will need to

first install both an HTTP and a MySQL server. My recommendation (for Windows based computers) is

to download and install XAMPP, a package which offers HTTP (Apache Web Server), SQL (MySQL server),

and FTP (Filezilla FTP server). Before even downloading OpenCart, you should have these services up

and running in preparation for the installation. XAMPP is free and available from

http://www.apachefriends.org.

INSTALLING OPENCART Once you have a place to host and have decided on OpenCart as the E-Commerce software, a visit to

the OpenCart website is in order. It is at http://www.opencart.com.

8

The ‘slider’ starts with an invite to download OpenCart 2.0. As of Jan 2015, the ‘latest’ version is 2.0.1.1

If you miss the opportunity to go to downloads via the slider, it is easy to reach via the “Download’

button on the black navigation panel.

The download page includes all version since August 2012 to December 2014. While there are minor

differences as new releases are announced, there is a significant change from version 1.5 and version

2.0. Most of the available ‘study books’ on OpenCart focus on version 1.5 so that might be the better

option.

In order to better understand the options, I chose to do both, selecting the most recent of each in the

major version categories of 1.5 and 2.0.

Download is easy …simply click on the desired version link (not surprisingly, called ‘download’) and wait

for your computer to prompt you to either run or save the file. Choose save so the complete

compressed (zipped) file will be downloaded to your default download location.

Once the download is complete, you need to unzip (uncompress) the respective files and folders. It

certainly makes since to prepare the installation’s final position first so that a simple drop-and-drag of

the files will result in them being copied to your desired folder.

On initially opening the compressed file, you should see the following directory tree

9

The top folder is the complete compressed file. Beneath that is a container

folder named as ‘OpenCart’ and the version you have downloaded. This folder contains some

installation instructions, license agreements and other misc files that are not needed to actually run

OpenCart. Within that folder is also a subfolder named ‘upload’ which is the ‘actual content’ needed for

installation. So, the easiest way to proceed is to expand the upload folder and highlight Beneath that

is the ‘main content’ folder which OpenCart names ‘upload’ which contains 4-5 files and 4-5

subdirectories depending on version.

This is the directory tree for Version 2 ----- and this is the directory tree for Version 1.5

Before moving these files, it is necessary to decide on an installation directory. If OpenCart is the

only thing you intend to run on your webserver, you would place these files in the document root

directory of your webserver. In a default installation of XAMPP on a Windows OS, that would be at

C:\xampp\htdocs. If you want to just add OpenCart as another option for an existing website, you could

create its own subfolder. For example, mine runs at C:\xampp\OpenCart. Manually create the

OpenCart directory then capture-drag-and copy the contents of the ‘upload’ directory to your

‘OpenCart’ directory. You can then delete the compressed file. However, if you want a backup copy

OR if you want to install multiple copies of OpenCart, then you should save the entire compressed file or

a decompressed copy of the uploads folder. In this alternate option, you would then copy and paste the

files from uploads folder to your installation folder ( /OpenCart or whatever)

The next step is to ensure you have a database available for the OpenCart tables. Assuming you already

have MySQL installed and running as a service, you will need to create a new database with a name of

your choosing. The obviously choice would be ‘OpenCart.’ There are different ways to do this – via

10

PHPMyAdmin, MySQL Developer, or simply via the mysql command prompt with the command ‘create

database OpenCart.’ Of course, you must be in the command prompt with a user account that can

create new databases. While there is no harm using the root account to create the database, you

should have at least one other username with a password that can access the newly created database to

be used with OpenCart. That can be your own personal mysql login or one created specifically for

OpenCart, e.g., user: OpenCart and password: somethingdificultoguess. Ensure that user then has

priviliges to create, read, update, and delete within the ‘OpenCart’ database.

Now, the hardwork is really done and you will be pleasantly surprised at how easy the installation goes

from here. First, rename the config-distro.php and the admin/config-distro.php to simply config.php

and admin/config.php. Those files are initially empty so I question why the files don’t come correctly

named to start with. Perhaps its to test you to see if you have enough computer savvy to know how to

rename and edit files. After that, simply access your new OpenCart weblocation. On a local machine

and with the webserver running and the configuration as described above, that would be

http://localhost/OpenCart/

You will then enter a four page process that checks the required PHP configuration and MySQL database

along with proper read/write permissions. (On a Windows OS, you do not need to change any

permissions. On a Linux you will need to ensure certain files and directories can be written to.) The

initial screen gives you the license agreement. Read and hit continue to accept the conditions.

Page two checks to ensure you have the required server installations (e.g., PHP and MySQL) and that

your directories are writable by the scripts.

11

Page 3 is where you start defining your site. You must specify the username, password, database

location, and database name for the required MySQL files. You also supply a username and password

for the administrator account, I recommend you use your name or another user name as the

administrator and not accept the default name of ‘admin.’ If someone is trying to hack your OpenCart

administrator section, they will start by assuming the name ‘admin’. Make their hacking more difficult

by choosing a name like ‘ Ehzcryfgvgyfxva’ which is ‘Rumpelstitlskin’ thru a ROT-13 filter. Well, maybe

not that difficult but certainly something more than admin : mypassword.

12

If all goes well (as it did on my two installations), your fourth screen will simply be a confirmation that

the installation succeeded and you can now go to your ‘store’ or the login screen for the administrative

section.

(Note the red warning… After installation you should delete the install directory.)

Depending on the version you choose, the default installations will look like this

For Version 2.0 (above) …. Or Version 1.5 (below):

13

The administrator sections are slightly different depending on version also. Below is Version 2.0

One final cleanup step is to delete the ‘install’ directory and its contents. It is not needed after

installation is completed.

Of course, this is just a default installation. Next, you will need to configure the installation to meet your

store’s needs. That will be described in Chapter 3.

14

LOGIN TO THE ADMIN SECTION

Since we have just installed OpenCart understanding login procedures may seem redundant. However,

if you ever forget simply navigate to the admin section of the website. On a default install, that will be

your hostname (the URL of the site) /admin If you have renamed this directory, use the name you

gave it.

You will be presented with this login screen:

User your assigned username and password. If you have forgotten your password, you can click on the

‘password forgotten’ link, supply your email address, and your password will be mailed to you.

IN A NUTSHELL Download the most recent copy of OpenCart

Extract the files and directories from the zipped file

Copy the contents of the ‘upload’ directory to your server root or desired subdirectory

Change config-distro.php and /admin/config-distro.php to config.php

Navigate your browser to the installation directory and supply required information

Delete the install directory

Viola! You have an OpenCart store up and running

15

Chapter 3 – Configuring and Customizing OpenCart

Simple Ways to Improve your Branding

1. Change the default LOGO to your own. Go to admin -> settings -> image and replace store logo with your own. This is essentially the first and most important step to brand your site and to 'mask' the fact it is an OpenCart installation.

2. Replace the default sliders (banners). Go to admin -> design -> banners. There are three by default. The top banner (slider) should be edited to put your products or banner (perhaps store banner intermixed with a couple products you are featuring. This is essential to give a clear indication of who you are. The bottom slider (default called manufacturers) would be a great place to slide images of your complete line or pictures of your store or logo. The opportunities for branding on this slider are great ways to highlight your store's persona.

3. Remove the default 'Powered by Opencart' display in the footer. This requires editing of the footer template. Use file manger (e.g., explorer) to navigate to /upload/catalog/theme/default/template/common and edit the footer.tpl file. Edit line 42 to replace the php $powered variable with your own branding. This gives your footer a 'branding' opportunity.

4. Consider adding a background to your page.. or change its colors. Navigate to /upload/catalog/view/theme/default/stylesheet/ and edit stylesheet.css. Edit the body section to add either color or a background image (e.g., background: #ffe; or background: url("yourlogo.jpg")

5. Add branding to your content section by editing the home.tpl. Navigate to catalog/view/theme/default/template/common/home.tpl and insert text above the content div e.g., <div style="background: #dde"><p>SPECIAL BRANDING CONTENT GOES HERE -- added above the content</p></div> This is essential to make your page unique and stand out from other OpenCart default installations.

6. Add additional branding information after content and before the footer. Similar to 5, insert a new div right before footer div on the home.tpl template, e.g, <div style="background: #ded"><p>at bottom of container div above footer</p></div> (In this example, the background color is also changed.

7. Change the entire theme to something that better reflects your brand...OR make your own theme. This further makes your store look unique and will aid in building your customer base.

WHAT NOW? DO YOU DELETE THE DEMO ENTRIES OR MODIFY THEM?

If this is your first experience with OpenCart, you probably are impressed with the look of the homepage

demo with sliders at the top and bottom and featured images in the middle. The first decision you need

to make is should you simply delete all the demo entries … in which case you will have nothing showing

on your home page.. or, try to modify the existing entries to see where the changes occur. On my first

pass, I did a mixture of the two. I liked the display of featured products but could not initially determine

what constituted a featured product. Additionally, I noticed a banner (slider) occurred on the inside

16

pages (such as a category selection) but could not figure how to get rid of it or to modify the images in it.

So, let’s take it a step at a time with instructions on how to simply start from scratch on each of those

issues.

THE HOME PAGE

The home page is affected by the home page template –

(/catalog/view/theme/default/template/common/home.tpl) Earlier, I showed how you can add

content to the home page by inserting divs above and below the content div. However, the file gives no

clue as to how the home.tpl gets the content for the content div. It is made up of three variables --

$content_top, $content_bottom, and $content_right. I later discover, at least for the default or demo

store, everything is embedded in the $content_top variable and the other two are null or empty.

It is not intuitively obvious (that means it took me a while to figure it out) .. but the home page is

affected in the admin GUI under system -> design -> layouts -> home and looks like this:

17

There are three modules that affect the Home Page – Carousel > Home Page, Slideshow -> homepage,

and Featured > home page. You can add or delete these or change the order of display but note that

ALL THREE are part of $content_top. The ‘carousel’ is the manufacturer slider at the bottom, the

Slideshow is the large slider at the top and the Featured is the selected products that show up on the

home page as featured products. Initially, I clued into just the featured module (which was emply). I

guessed the featured products must be selected by some flag or attribute on each products individual

edit page. However,I later discovered the CORRECT module to peruse was the ‘Featured > Home Page’

module at extensions > modules > Featured Home Page

Clicking on the edit button brings you to the actual list of featured products.

18

Now, the first problem was solved. To set featured products on your home page, go to extension >

modules and click on the blue edit button to get to the routine to add or delete featured products.

CHANGING THE BOTTOM BANNER

Modifiying the ‘manufacturers’ banner was much easier. Go to system > design > banners and click on

the blue button to the right of Manufacturers. This takes you to a page that allows you to add and

delete images for this bottom banner. On initial installation, I simply changed the images but you can

also insert hyperlinks to take you to specific products.

19

I also changed the name of this banner to “SquareKnots” as I did not need one for Manufacturers.

CHANGING THE INSIDE PAGE DISPLAY

Given the nature of my store, I did not particularly care for a banner on the inside pages but getting rid

of it was another exercise in experimentation.

While the inside pages looked nice in the demo , I did not feel my ‘store’ needed the slider below the

category menu.

20

Without boring you with the details, it is affected by the default template. On the Admin site go to

system > design > layouts and click the blue edit button for ‘default’. I simply removed the third module

item (which had been the HP Products banner) and mine now looks like this:

21

To achieve this look, I needed to remove the banner (called HP Products in the demo) leaving only the

searched products displayed.

I first removed the banner at system > design > layouts > default.

22

Since I had no projected need for the additional banner, I disabled it by going to system > design >

banners and clicking on the blue button next to ‘HP Products’ to allow me to disable it. Now, I only have

two active banners:

23

Of course, I can add more later or modify the currently-disabled HP Products banner to use elsewhere in

my site.

INSERTING NEW PRODUCTS AND IMAGES

Adding new products and categories seems so intuitive I don’t feel it requires much explanation. Simply

go to catalog > categories OR catalog > Products and click the blue ‘+’ button to add to your existing

categories or products. There are several tabs to navigate through though most of the information.

After clicking the plus button, you will be taken to a screen where you simply populate the information

for the product. Most information initially goes into the ‘General’, ‘Data’, and ‘Links’ tabs. You can

populate additional tabs at a later time.

24

. The only thing I found confusing was on the Links tab where you assign a product to a category. The

insert box is auto completing and initially, it only displays 5 categories. (See picture)

25

If you start to type another category, the auto completion display changes

… BUT, I had a two sub-categories under Patrol

Medallions named R&W and named colored. When I started to type Patrol… all I saw was the top

category.

THE KEY – Type the first few letters of the actual sub category without prepending the parent category

name.

The process to add categories is very similar. Start at catalog > categories and then populate the general

and links tab. As with the products, there are autocomplete blocks for parent. You will need to find the

parent category if you are creating a sub-directory. You can include sub-directories under a top-level

parent or under an existing sub-directory (third tier).

26

ADDING IMAGES

My initial thought on images in OpenCart 2.0 is that it is easier than 1.5 though the graphic display for

the import manager does not seem to have as many features. To add or change an image (where logo,

category image, or product image, simple click on the default OC image or the existing image and two

boxes will appear -- .. a blue box to edit or a

red box to delete. Clicking on the blue edit box will bring up the OC 2.0 Image Manager.

From there, you can select an

existing image OR upload a new one from the upload button (blue, third from left) in the menu. In my

example, I have added several subdirectories to separate images by category. You can create a new

folder (white, fourth from left) or upload to the current directory. All images are located in your

OpenCart image/catalog directory

27

CONSIDER RESIZING YOUR IMAGES

OpenCart documentation says that OpenCart will resize your images. I have not tried to upload in

version 1.5 but in version 2.0 it does not resize when using the Image Manager. It simply uploads the

file to the image directory (or a subdirectory you have created beneath the parent /image). Since there

is no altering of the image, there is no reason why you could not just FTP the images directly to your

hosting site. I recommend you use Filezilla or a similar FTP client to upload your files.

28

Unlike WordPress which requires you to use the upload function in order to be able to access the images

in the Image Manager, OpenCart simply reads the image directory and display all images and

subdirectories regardless of how the file was uploaded. Thus, using FTP gives you a much easier way to

upload many images with a single transfer. Of course, you will still need to associate an image with a

product but this is easy by just clicking on the image icon for the property on the data tab.

What OpenCart DOES do is set the display style to that necessary to fit the image box on each page. If

you images are really large, you will slow down the load time of the page as each request will require

the larger image be retrieved. Thus, I recommend you use IrfanView or similar image manipulation

program to reduce you images to no larger than 600 x 300 pixels. This will reduce you load time

without reducing the quality of the displayed image.

SUMMING IT UP

We began this journey with the instructor telling us there was no textbook and we would write our own.

I may have included too much detail on these modifications as the purpose was that we could take our

notes and repeat the process. I will point out that OpenCart administration is easy to get totally lost and

I found myself making changes and forgetting how or even why I made them. In fear of deleting

something I would regret, I did this first modification of the default ‘demo’ site but doing a lot of editing

of existing categories and products. Now, I feel I could complete delete all categories and products and

build a store from scratch knowing now how to append products to the various banners and how to

disable the content I don’t want. Everything is easier the second time around.

29

Chapter 4 – Selecting a Theme

If you are new to OpenCart it may be best to stick with the default theme until you get more familiar

with how to change layouts. Our instructor implied the default theme was probably one of the best free

themes and if we wanted something ‘more fancy’ we would have to pay for it.

However, just to practice, I downloaded the free version of ThemeGlobal’s signature theme… they call it

‘lite.’ Installing was pretty simple. You just extract the files from the downloaded zip file and then

append them to the existing directory structure of you OpenCart installation. Once the files are there,

you need to install the theme’s modules on the modules page and then select the theme on the system

> settings > home page by editing the store tab and selecting your new theme.

Initially, I was impressed with their home page slider but realized this animated slider was geared to

advertising the theme itself and would take a lot of tweaking to customize it to meet my ‘Scouting for

Patches’ store. The slider only has two slides but each has animated images that drop down or slide in

place and the site is responsive in design. Here is what the home page looks like:

You may notice the menu is not as fancy … now just a list of categories and not a menu bar. Also, the

home page > features selection has been replaced by ‘latest’ and the original home page slider is gone.

So, I decided to return to the default theme and realized it did not come back in its original

configuration. The look and feel of the top and menu bar returned but the home page slider did not

return nor did the featured products. The GlobalTheme.

30

To return the default back to its original configuration would take additional changes to the layout and

home page sections. While I may try some other new themes just to see how they respond, I would

highly recommend that one not experiment on their main store site. Set up another instance of

OpenCart and try new themes in a testing environment first.

Actually, I prefer the look and feel of the default theme anyway so I am sticking with it for now.

31

Chapter 5 – Adding Categories and Products

In the first 4 chapters, I gave OpenCart a ‘look and feel’ and began populating the categories and

products just by modifying the existing categories and products in the default install demo that comes

with OpenCart. For someone just learning OpenCart, this may be helpful to understand how and why

the developers populated the demo category and products a certain way. However, once you become

familiar with the process, it is much quicker to delete categories and products you don’t want and start

from scratch on adding new ones.

CATEGORIES

While it would be possible to have a store with only products, having categories makes it easy to

organize your products into ‘like’ section not unlike a ‘brick-and-mortar’ store would do.

To create a new category, login the administrative site of OpenCart and expand the ‘catalog’ menu item

on the left panel.

You can ‘clean up’ the demo by selecting all of the checkboxes and then clicking on the red delete

button.

32

Once you have emptied all the existing categories, click on the blue “+” button on the top right to bring

up the new category wizard in the right frame.

Make changes on the three tab pages --On the general tab, populate category name and meta tag

(required) and description, meta tag description, and key words (optional). On the data tab -- If a main

category, leave parent tag empty. If it's a child of another category, put the parent category. Consider

changing image, ensure status is enabled, and leave default or set the sort order. Optionally change

layout on the design tab page. Notice ‘required’ fields are shown with a red asterisk.

Once you have the data entered the way you want it on the three tabs, click the blue 'disc' icon on the

top right of the screen to save your work and create the new category.

33

PRODUCTS

Creating new products is done similarly. Assuming you are still logged in to the administrative site, On

left menu expand catalog and click on product link (which display any existing products on the right

frame), then Click the blue "+" button on the top right of the screen (this brings you to a new product to

add screen).

If you have products) that you do not want to keep, (such as those in the demo) you can delete them in

bulk. Click the checkboxes and then selecting the red delete button on the top right side.

Make changes on the seven tab pages as needed -- The only REQUIRED fields are the product name and

meta tag title on the 'general' tab and the 'model number' on the data tab. While not required, it sure

would make sense to describe your product (general tab) change the default image (on the data tab) to

show of picture of the product you are selling. You can also add additional images on the images tab.

You may also describe the product (size, weight, etc) AND you should associate the product (on the links

tab) to one of the categories you have created. Other inputs on the 7 tabs are optional and to get you

going, you can leave the remaining fields blank or as the default. If you have entered nothing but the

three required fields, you can proceed to step 5 to actually create the product and go back late to edit it

for additional information.

Once you have the data entered the way you want it on the seven tabs, click the blue 'disc' icon on the

top right of the screen to save your work and create the new product.

You can always go back and edit the product by clicking on the blue edit button to the right of each item.

34

Chapter 6- Localization & GeoZones

This module gives you the option to select several locations for your store. Initially, just use your main

store as an operating location. I added SFP (Main Store) and located it in Waco, TX.

35

For locations, I added ‘United States’ and ‘Texas’. Then under GeoZones, I added United States and

linked it to the location ‘United States’ and ‘All zones.’ This is used for tax and shipping information.

In similar fashion, I added Texas and linked it location United States and zone Texas

36

Additionally, I set the default measurements to ounces and inches. (Instructions were to set to feet but

my products are all better defined by inch measurements.)

37

Chapter 7 – Testing Sales with a Pay Pal Sandbox Account

With categories and products complete and localization set to add sales tax, you probably want to find

out if you payment categories work. In this site, we are utilizing Pay Pal but we don’t actually want to

transfer money from our personal Pay Pal account so we will establish a Pay Pal ‘Sandbox’ account to

see if the module works and we are able to transfer money from a buyer to our store.

1. Navigate to Pay Pal’s developer page at

https://developer.paypal.com/docs/classic/lifecycle/sb_create-accounts/

(You will initially need to log in with a real Pay Pal account before creating your sandbox

accounts)

2. Create a business account by supplying email address, password, real name. Select business

account and payment type.

3. Once created, click on email address, then profile, and create business-pro account. The

resulting screen should look like this.

38

When your account is created, you can log into it at www.sandbox.paypal.com

A test account looks like this:

Once the Pay Pal is created, you will need to make several changes to the default installation of

OpenCart to allow you to accept payments from Pay Pal.

From the administrative site, expand the Extensions menu and click on the payments menu.

39

By default, only the “free checkout” and “cash on delivery” modules are installed.

Click on the green (+) button to install ‘Pay Pal Payments Standard’ as a payment option.

40

In the ‘general’ tab enter the email address associated with your PayPal Sandbox account. You can use

any of you PayPal Sandbox accounts. Whichever email you enter is the account to which the buyer’s

payment will be deposited. To properly show the money is being transferred, be sure to use a different

sandbox account for the buyer. While it does not show as a required field, you WILL need to change the

status field to enabled and you will need to change the sandbox mode to yes. I highly recommend you

also change the transaction method to ‘sale’ so that the transaction actually occurs. If you leave it to

the default setting of ‘authorized’, the buyer will have to enter their Pay Pal account to accept the

payment.

41

To test you Pay Pal Sandbox, enter the buyer (or store) site (not the administrative site) and select one

or more products to purchase and add them to your cart.. When done, you should show totals in your

‘cart.’

Click on the cart and click to show your order. Then, proceed to checkout by clicking the blue checkout

arrow.

Now, you can either establish a buyer account or proceed with a ‘guest checkout.’

42

Now, progress through the steps until you get to step 5 – payment method and select ‘Pay Pal.’

43

This will bring you to confirmation screen. Make sure the red box shows this is a sandbox purchase.

44

Enter your buyer sandbox email address and password and click the yellow login button.

If your login is successful, you will get a similar screen but now the buttons will say ‘pay now.’ Click one

of the yellow buttons to complete the purchase.

You will get a final confirming page from Pay Pal that your order is complete. Next, click on the link to

take you back to the store.

45

You will now get a confirmation of order page on the store site and your cart will show empty.

CONFIRM PURCHASE AS THE SELLER When you enter the administrative site, you will not have the order show up on the dashboard in total

sales BUT it will display as the top item in “Recent Activity”

Click on ‘a new order’ to take you to the order page with seven tabs.

46

From here, you can generate an invoice number, print an invoice, and proceed thru shipping and

products tabs to actually process and ship the order. Once complete, navigate to the history tab.

Change the ‘order status’ tab to ‘complete’ and click history.

47

At this point, your dashboard should update and will increment your order totals.

48

You have now successfully tested Pay Pal as a payment option.

49

Chapter 8 - Setting up USPS for Shipping

In order to use USPS for shipping in OpenCart, you must establish an account. Begin at:

https://secure.shippingapis.com/registration/

You will then need to populate the Web Tools registration form. Remember to include all of the red

asterisk items (*) and to accept the Terms and Conditions.

50

If successful at registering, you will receive a confirmation screen and an email that will give you your

user ID and password. It looks like this:

(ACTUAL ACCOUNT AND PASSWORD OBSCURED FOR SECURITY REASONS.)

For USPS, this is all you need for development servers. The API will accurately compute postage rates in

Open Cart. However, for use in a productioin server, you will need to request that USPS update the

accout to use in a production server. (This information is fully explained in the handover packet

document). The request can be done via email to uspstechsupport@esecurecare.net or via telephone

to 800-344-7779.

You will need both the username and password to log into your accout online but for OpenCart, you will

need only your username.

Next, navigate to the OpenCart Administration site, expand extensions, and click on shipping. You will

see all the available shipping options:

51

By default, only the ‘flat rate’ option will be installed (on a new install, it will be the only one with a red

icon).

Install the additional shipping options you wish to use by clicking on the respective green icon. For USPS

specifically, click on the green icon to the right of ‘United States Postal Service’. This will install the

module but it is not yet active.

To activate it, click on the blue edit button. This brings you to the edit screen for USPS shipping.

The KEY fields that must be filled in are the USER ID and the shipping location zip code.

You should also check the services you wish to provide thru USPS – first class, priority, etc.

(NOTE: The user ID has been obscured for security reasons. You can easily copy and paste the User Id

from the reply email you received after registering your information and receiving an account from the

USPS.

Most of the other options on the edit page can be left as default. However, you MUST put in

dimensions. As Scouting for Patches would normally ship flat, I chose a large envelope size of 10 x 10 x

1. Also you should change the weight class to match US shipping. For USPS, you can use either pounds

or ounces as the weight class (NOTE: for UPS, only pounds work. It will not accept ounces.)

Don’t forget to change the status to ‘Enabled’ and the set a sort order. The lower the number, the

higher the display priority. For example if USPS is set to 0 and everything else is a higher number, the

USPS shipping options will display first. After editing, save the new values by hitting the red icon at the

top of the page.

52

NOTE: On my development OpenCart on localhost, I also had to set the tax class to ‘taxable goods’ for

USPS to display in the checkout. This option is supposedly required only when your taxing jurisdiction

requires you to pay tax on shipping costs. If you cannot get the shipping method to display, try changing

it to a taxable class.

Assuming all went well, you should get a green confirmation message:

NOTE: The message will specifically state which module you have edited. In the example above it was

UPS. For USPS it would say “You have modified USPS shipping.”

53

To test your new module, simply make a purchase in your store. When you get to the shipping tab, you

will see various options depending on which modules you have activated.

NOTE: The graphic above shows that USPS was successfully added to the options for shipping. In

development, I have left the flat rate option active but in a production, you probably would want only

one or the other or a possible combination of USPS and UPS. There is also a “free shipping” module that

allows for free shipping that would normally be triggered over a designated purchase amount, e.g.,

orders over $100.

54

It is worth noting that you can include more than just a single service as an option for the buyer.

However, the options shown above (in this development server) are just as an example to show the

possibilities. I would not recommend this many option or even the various options within each shipping

group. This may well confuse the customer. Remember, the order of display is set by the order number

on the extensions -> shipping page. If you do chose to allow free shipping for larger orders, it should

probably be displayed as the top item.

55

Once the shipping option has been selected and a payment method selected, the buyer will see a screen

displaying his total costs including his chosen shipping (in this case, Priority Mail Express – 1 Day.

NOTE: The red box simply indicates the purchase is being made in Pay Pal’s sandbox and is not a real

order on a production order.

These are the instructions for initial install of the shipping modules. A shorter description of how to edit

and change these is shown in the handover document.

Congratulations! You now have USPS shipping working as an option.

56

Chapter 9 - Setting up UPS for Shipping

United Parcel Service (USP) has become a very popular method of shipping in the E-Commerce

community. Using UPS in OpenCart requires a little more setup effort and more steps than that

required for USPS. Additionally, UPS does not offer development or sandbox mode so an actual shipping

account is required.

The first step in including OpenCart is to review the procedures at:

https://www.ups.com/upsdeveloperkit

For purposes of using USP for shipping information, you will need to follow steps 1 and 2 to get a user

account. You can also click ‘new user’ at the top of the page.

Your UPS user account is just that – a user account, not a shipping account. If you frequently check on

the status of UPS packages, you may already have that step completed. If so, and you are logged in

when accessing this page, you would see your user name at the top and you can then proceed to step 5.

57

If you do not have a user account, click on the ‘Register’ link next to ‘Step 1’ and complete the three step

process to register.

Remember to supply all of the asterisk-required items and agree to the Terms and conditions.

58

Next, login in using your newly-assigned username and password. (You may have already done this. If

so, you will be taken to the page to request your access code).

If you already have a UPS shipping account and have added it to your profile, you will be taken to a step

where all you need to enter is secondary shipping information as shown below.

59

(NOTE: The red X obscures my actual account for security reasons. If you have both a login account

AND a shipping account, you can simply click the blue “request Access Key” button to get your access

code. )

If you DO NOT yet have a shipping Account, you will need click the “Add a UPS Account” link to start a

new application for a shipping account.

Be VERY careful when filling out this application and ensure that you supply ACCURATE information

about your actual address. You will see why shortly.

The Shipping Needs section gives UPS the location for your pickups and identifies whether you want to

schedule regular pickups or on call. The form (2 pages) is shown below.

60

61

If successful, you should get a ‘success’ or ‘completion’ page shown below:

Earlier, I had commented that you must submit accurate information to establish this account. Further,

UPS must be able to validate your identity as the person who actually resides at the address you

submitted. In my early attempts to set up this account, I failed the validation check and received the

following display:

62

If you end up here, you are stuck. You will need to follow the prompts to contact a UPS service agent to

determine why your information could not be validated. Remember, this is a REAL account, not a

sandbox account, so UPS is pretty picky about ensuring your are who you say you are before they issue

you a shipping account.

Now, assuming your were successful, you now have TWO UPS accounts –

A personal account that has a user name and login… and

A shipping account ( a six digit alphanumeric account number

With those two in hand, we return to the developer website at

https://www.ups.com/upsdeveloperkit

and proceeds to Step 5 – requesting an access key. NOTE. This is the same place previously shown if

you already had both accounts established.

63

Click the blue button and you will be issued a 16-digit alphanumeric

code and you should see the following screen:

(NOTE: For security reasons I have obscured my actual access key)

Congratulations! You are now ready to apply your account information to your OpenCart UPS shipping

module.

64

Navigate to your OpenCart Administration dashboard and expand Extensions->Shipping to display your

shipping options:

If you have not already done so, click on the green button next to UPS. (Note: in this screen shot, UPS

has already been installed as evidenced by the red button, which would uninstall it.) After installation,

click on the blue edit button.

65

The first three fields are required. The first is your Access Code (generated as a combination of your

login account and your shipping account.). The next two are your user account login and password.

Many of the remaining fields can be left as defaults but you need to select some services for the module

to be effective.

It is not necessary for you to offer all of the services especially if you do not want to ship internationally.

You MUST pick a weight class that UPS will accept. It will take pounds but not ounces. You should also

select a length class for your packages and put in estimated dimensions. For Scouting for Patches, we

will be using packages, not boxes, so I chose 10 x 10 x 1 inches.

66

Don’t forget to change the status to ‘Enabled’ and the set a sort order. The lower the number, the

higher the display priority. For example if UPS is set to 0 and everything else is a higher number, the

UPS shipping options will display first. After editing, save the new values by hitting the red icon at the

top of the page.

NOTE: On my development OpenCart on localhost, I also had to set the tax class to ‘taxable goods’ for

USPS to display in the checkout. This option is supposedly required only when your taxing jurisdiction

requires you to pay tax on shipping costs. If you cannot get the shipping method to display, try changing

it to a taxable class.

When you are thru editing, click the blue save button at the top of the page. If you have filled in the

required fields, you should see a success message:

You are now ready to use UPS as a shipping method in OpenCart.

To test your new module, simply make a purchase in your store. When you get to the shipping tab, you

will see various options depending on which modules you have activated.

For testing purposes in your development server, you may have already activated several different

methods for shipping. What the shopper will see as options will depend up which modules you have

activated. The order in which they are displayed will be determined by the sort order for the module

and the number of shipping options for each shipping type will be determined by the checkboxes you

selected for each shipping module.

In production, you will want to be more selected. However, the image below shows a combination of

various shipping options that will be displayed when the viewer completes the shipping method section

of the checkout process.

In the example below, UPS options are shown at the bottom of the list.

67

68

Assuming the shopper selects UPS as his preferred shipping, he will see the confirmation screen as

shown below.

Congratulations! You now have UPS established as one of your shipping methods.

69

Chapter 10 – Migration of OpenCart to a New Server (example is http://webtech.tstc.edu)

It is often said there are more than one ways to skin a cat. This chatper (10) shows ‘one way’ to migrate

your OpenCart installation from your local server to webtech. Chapter 11 shows an alternate approach.

Migrating your OpenCart Installation

There are several different ways that a student who has started an e-store on a local computer can

employ to migrate to webtech. This tutorial will discuss two possible options:

Start with a new install of OpenCart on webtech and add your current database

Copy your current installation to webtech and add your current database

WHICH IS BETTER? WHICH SHOULD I CHOOSE?

New Install If you have done very little modification of the template files and you have not added any third-party

themes or modules, your basic template files on your localhost would be nearly identical to a new install

of OpenCart. If this is the case, an easy option is to download a copy of OpenCart 2.0, extract the files

and directories from the single zipped file, and move the contents of the ‘upload’ folder to the directory

of your choosing under your student folder on webtech. If you choose this option, you WILL need to

additionally FTP any images you are using for your products or branding. These files will be located in

your /image/catalog directory. On a default installation, that folder will contain a three OpenCart

images and a demo folder which contains all the images in the demo installation. You will also need to

move your existing MySQL database. That will be discussed later in this tutorial.

Advantages of a clean or new install (Option 1)

If you choosing this first option, you will be able to replicate an installation just like you did when you

first set up your OpenCart. You are already familiar with this. You will have renamed the files config-

distro.php in both the / (root) and /admin directories. (They are empty – zero bytes.) As you try to

access you site, you will be taken thru the initial steps of a new install requiring you to enter your

database information (and more on that later) as well as a username and password for the

administrator (you). After that information is supplied, the script will generate the information for the

config.php files and initially populate the database with the data that goes with the demo site. If you

access the site, you will see the familiar demo site with all the cameras and computer components just

70

like you did on the initial install. All that is left is add the images of your products (discussed earlier) and

to replace the information in the database with your current database information. Once that is

complete, you have your site looking like it last was when you last made any changes on your localhost.

So, the advantage is you let the install script do your configuration. The disadvantage is you lose any

customization that you might have done by directly editing the php template scripts.

Advantage of moving (copying) your existing installation (option 2) The second option is almost a necessity if you don’t want to lose edits to your scripts, you have added

any third-party modules or themes (or anything that is not included in the downloaded set of files from

OpenCart). In moving your entire site, you move all of your images at the same time you move the

template files and can actually be a single step with drop and drag in Filezilla. When completed the ‘file

structure’ of the two sites will be identical. You can actually do this as a single step in Filezilla by ‘drag

and drop’ the entire site from your localhost directory to the server directory. The downside of this

method is you do not have the automated script to do the changes necessary for the proper

configuration in your config.php files. In other words, the files are IDENTICAL and you need different

configuration options on webtech than you had on localhost. Since this tutorial is primarily for students

in the E-Commerce class and the target is webtech, this is probably the best option as I will walk you

through how to manually edit your config.php files for proper operation. I recommend this option.

SEQUENCE OF STEPS If you choose the first option (new install), you will need to ‘install’ OpenCart before you move your

database. Otherwise, the installer will overwrite you database as it installs a new copy of OpenCart with

the demo information in the database. If you chose the second option (move your current files –

preferred option), the sequence is not important as long as both steps are accomplished before you

attempt to use your new site. For simplicity, I would recommend you first get your files in place on

webtech and secondly, import or build your database.

HOW TO MOVE FILES TO WEBTECH

Each student has already been assigned credentials to access the webtech host (identified on the

internet as http://webtech.tstc.edu Student ‘folders’ are traditionally named by your first name initial

and last name and are all in a student subdirectory off the root directory. If you name is John Doe, your

student account on webtech is at http://webtech.tstc.eud/students/jdoe/ (NOTE: The naming

convention for you could be different if there are two students with the same first initial and last name.

If you are not sure, contact Mr. Piper.)

To move the files, you will need an FTP client. Most students are comfortable with filezilla. It can be

downloaded from https://www.filezilla-project.org You will need to download a copy and install it on

your local host. Filezilla has a quick-connect window at the top but don’t use it to try to connect to

webtech.

71

It attempts to coordinate TLS authentication with the server and this causes webtech to hang up.

Rather, bring up the ‘Site Manager’ and enter the information to connect saving this profile for repeat

visits. See the example to follow.

.

Under the general tab, enter ‘webtech.tstc.edu’ for the hostname, port 21 for the port (or leave blank

to default to port 21) and toggle encryption to ‘Only use plain FTP (insecure)’. (The default would be to

attempt TLS authentication and you do not want that.)

When you connect, your ‘home’ folder will show empty OR may include any subdirectories you have

previously created for other classes.

SUBFOLDER NAME CONSIDERATIONS Where you put OpenCart depends on how you intend to use your student folder. If you use webtech for

different classes, you should consider making a new subfolder (or directory) for each class or project.

Your home directory which appears to you in your FTP client as a root folder, is really your student

folder which is located on the host hard drive as D:\website\students\YOURNAME and as an HTTP

request as http://webtech.tstc.edu/students/YOURNAME . Webtech does not allow directory browsing

so anything you place will need to be explicitly addressed or have a default index file, e.g., index.html or

index.php in the folder.

Here is an example of a student’s ‘home’ directory.

72

So the next question you need to ask yourself is where do you want your OpenCart installation. Recall,

the contents of the unzipped OpenCart files were all in a folder named ‘upload’. The contents of that

folder are what you need to move. You may have already renamed that folder to a name of your

choosing. In any case, FTP the contents INSIDE your upload folder to INSIDE the folder you create on

webtech, e.g., ecommerce, opencart, or some_store_name. If you want your store to be in the root

directory (and all you are using webtech for is OpenCart) simply move your files there. Most students,

though, will use webtech for more than one class so picking a folder name for your OpenCart such as

‘myStore’ would give you an OpenCart URL of ‘http://webtech.tstc.edu/students/YOURNAME/myStore/’

and an absolute location of ‘D:\website\students\YOURNAME\myStore’

For those who moved their currently installed site, here is where it gets tricky. You MUST edit the

config.php files located at your store root directory and your admin directory and they are NOT the

same so you can’t just copy one to the other location. This step can be done either before or after you

FTP them but I’m recommending after so that you leave the localhost files unchanged allowing you to

continue to work on your OpenCart instance on your localhost.

The accuracy of these files is CRITICAL to the operation of your OpenCart store.

73

You are probably starting with a config.php file that looks something like this:

This file (and a similar config.php file in your admin directory) was automatically generated by the

installation scripts where you gave it YOURUSERNAME, YOURPASSWORD, AND YOURDATABASE

information. The HTTP, HTTPS, and DIR information was computed based on which directory your

localhost webserver uses as its htdocs directory AND where in your directory tree you placed OpenCart.

When you have copied your files to webtech, you will need to MANUALLY change these settings (unless

you chose option 1 for a brand new install).

74

For webtech, the config.php file will look more like this:

You will need to edit these two config.php files (in your store root and admin subdirectories) to

accurately point correctly on webtech.

For the database, we are using an IP address that is NOT webtech.tstc.edu so it should be entered as

161.109.19.94. (webtech is at 161.109.19.95) The database has already been established as ‘oc-

‘ followed by your last name (unless Mr. Piper tells you otherwise). For example ‘oc-smith’. The

username and password for the MySQL server is the same as you used for FTP connections to webtech,

the standard being your first name initial and last name for username and your student number for

password. If you are proficient at copy and replace, simple copy the absolute location of your opencart

installation on your localhost and replace it with absolute location of your OpenCart on webtech

globally. Also, change the server roots as shown below. If you are not comfortable making these

changes, consider install option 1 and let the install wizard do most of the work.

75

MOVING YOUR DATABASE - (this is NOT possible with FTP) There are several ways to do this step but the easiest is via a MySQL client application like PHPMyAdmin

or MySQL Workbench, to name but two. For this tutorial, I will assume you are using MySQL Workbench

which is available from http://www.mysql.com/products/workbench

First, create a connection to your localhost using your credentials you set up when you installed XAMPP

(or MySQL separately). A nice feature of Workbench is it lets you test the connection before actually

saving it as a link (light gray boxes) on the Workbench desktop. When you connect, you will see your

available databases.

If you did not make any changes to a default installation, username ‘root’ with no password should

work for you.

76

Next, navigate to SERVER -> DATA EXPORT. You should see all of your available databases on your

localhost. You should see a screen similar to this:

In the ‘object selection’ window click in the box corresponding to your OpenCart installation. You only

want ONE database exported. However, you can choose to get the dump in a folder with each filename

corresponding to a table (called a project folder) OR have all the data dumped to a single file. For

simplicity, I’d recommend the second option. The default location for the dumpfile is in your

Documents/dumps folder (in a Windows OS) though you can browse to place it where ever you want

such as your desktop. When you have selected the database and the storage location, click ‘Start

Export.’

How it works Database files are stored as digital data in folders on your computer but they cannot be directly moved

from one machine to another (nor can you read them in a text editor). To facilitate easy transfers, a

routine reads all of the data and prints it to a file in a user-friendly text file. You can read and edit this

file as we will need to do in the next step. When you have completed reviewing and/or editing the file,

save it back as a xxxx.sql file for uploading to webtech. This file will look like basic SQL commands just as

if you were entering each line individually. Thus, it is a SQL command script file.

What we MUST change The generated xx.sql file assumes you want a clean install into a new database so it first tries to create

the database. Since students do not have ‘create’ permissions on the TSTC server AND the database is

already established for you on webtech, you MUST edit out the first line which reads something like:

CREATE DATABASE IF NOT EXISTS `oc-smith` … where the database name is what YOU called it on your

localhost. This may or may not be the same as you will be using on webtech but that is not important.

You should also edit out the second (or third) line that says:

77

USE `oc-smith`; This line can be retained IF the ‘use’ points to the database name on webtech but it is

not needed since we will explicitly define the database where we want the data placed during the

upload.

Just to clean up your database information, I’d suggest you also do a global find and replace of any

references to the website URL. For example, replace

http://localhost/opencart/

with http://webtech.tstc.edu/students/YOURUSERNAME/opencart

Save your text file with the edits above.

Now, you are ready to move the database to webtech. You do NOT need to delete tables or empty

their contents on the 161.109.19.94 MySQL server even if you are using the same database that was

populated with the sample site data. The import script file will drop any existing tables and recreate

them. Then, it will populate the tables with your data. The code will be similar to this for each table.

Thus, you will clean out any existing data, recreate the tables and then insert the data into them. THIS IS

WHY YOU MUST DO THIS STEP LAST IF YOU DO A NEW INSTALL OTHERWISE THE NEW INSTALL WILL

OVERWRITE YOUR WEBSITE DATA.

78

Create a connection to the TSTC server in Workbench. The process will be the same as you used to build

a profile for a localhost connection except you will use 161.109.19.94 for the host, your first initial and

last name for user and your student number for password.

Next, open a new connection in your Workbench to your webtech database (actually on 161.109.19.94).

You will see your TSTC databases now in the left pane.

If you have taken more than one class using this server, you may have multiple databases. Select from

the file menu Server -> Data Import.

79

This brings you to this screen:

Select your xxx.sql file (You may need to browse for it) and use the pull down arrow to select your

default Target Schema (MAKE SURE YOU USE THE CORRECT ONE – probably ‘oc-YOURLASTNAME’).

Then, click ‘Start Import’. If successful on the transfer, you are now ready to check out your new

webtech store.

AS A LAST RESORT --- What can I do?

If you are having difficulty with the movement of the database as described above, you have two less-

desirable options:

Generate your SQL dumpfile – This is really pretty easy and does not require SQL workbench.

Simply open up a command prompt and type the command

‘mysqldump –u root databasename > mydata.sql’ where databasename is the name of your

OpenCart database and mydata.sql is the name of the file you want to save it as. (Remember

which directory you are in… that’s where you will find your dump.) The greater-than (>) sign

directs the output to filename. What you will have is the same human-readable file as if you

used Workbench. If you have set a root password for your MySQL server, then the command

would be --

‘mysqldump –u root –p databasename > mydata.sql’ You will be prompted to supply the

password. (You cannot just insert the password into the command line so do not write it after

80

the ‘-p ‘) Then, edit the first few lines as described before, and ask for instructor assistance in

importing it into the TSTC MySQL server. (The way permissions are set on the MySQL server

another student cannot access your account with his permissions and it’s a violation of TSTC

policy to share your credentials with someone else.)

Start from scratch – While this will require considerably more time, you can always just rebuild

your new install of OpenCart using the notes you wrote for the first seven weeks. This could be

a LONG and tedious process.

If you have successfully followed these steps (hopefully option 2), your webtech store should be

available.

CONGRADULATIONS! You have cloned your localhost store to webtech.

81

Chapter 11 - An alternate and easier way to migrate using backup and restore (Option 3)

Chapter 11 was written as I experimented with various methods of migrating to webtech. In that

chapter, I recommended a transfer of your existing templates, editing of the config files and the use of a

MySQL administrative client, e.g., My SQL Workbench, to transfer the database. For me, this made

sense but for someone not proficient in SQL and editing configuration files, there actually is an easier

way and I present this as option 3.

This option is actually a continuation of option 1 in Chapter 10 in which you will do a clean install of

OpenCart on the new server. (Our example is webtech.tstc.edu). If you have an uninstalled copy of

OpenCart, simply FTP it to your desired location. You WILL need the install directory so if you discarded

that on after your localhost OpenCart was up and running, simply download and unzip a new version

from http://www.opencart.org

Next, simply access the site to begin a new install. The wizard will ask you for your database

information. For TSTC students in the OpenCart class, you will specify database of ‘oc-YOURLASTNAME’,

user name which would be your first initial and last name and your password which is you student ID

number. The database on the mysql server at 161.109.19.94 already exists but it is empty – no schema

or tables currently exist. The installation process will create the tables and populate them initially with

the demo database. (Note: the database is NOT on webtech which is at 161.109.19.95)

Before you continue, test your installation but accessing both the public site and the administrative site.

It should be identical to the ORIGINAL installation of OpenCart on your localhost. The advantage of the

clean install is that you let the OpenCart Wizard populate the configuration files based on the

information you provide in the install sequence.

Now, you are ready to move your images and database to get your new install looking like your localhost

store.

Move your images You will now need to move the images of your products. This is done by FTP’ing to webtech using the

same username and password you used for the database creation. The files and directory structure on

webtech should be very similar to your localhost file structure except your local image/catalog directory

(or subdirectories beneath this directory) will contain your product images. So, transfer them to the

corresponding place on the webtech directory. If you have not created a new theme or are using any

third-party modules, this should be the only files you should need to move.

82

Backup your localhost database using OpenCart With your browser set to the administrative site of your localhost OpenCart, navigate to ‘tools -> backup

and restore.’

83

All of your OpenCart tables will be ‘checked’ by default (meaning you will backup all of them). Click the

left ‘backup’ button at the top of the page (arrow points down) and you will be given a browser dialog

box to open or save.

Choose Save (or save to location if you have a preference) and you will now have an .sql file that

contains all of your table data. However, this .sql file, unlike the ones generated from MySQL

Workbench, does NOT have the database schema, only the data.

84

That is all that is needed if you are doing a restore to a database that already has the schema defined.

Normally, this tool in OpenCart would be used to repopulate the same database with backed up data.

We will use it for the purpose of migrating to webtech.

Once you have downloaded and saved your .sql file, I suggest you close your browser (to prevent being

confused and restoring your localhost). Then, open a new browser window, navigate to the same place

on your webtech installation ( admin site tools->backup and restore). Browse to and select your

backup file.

Then, click the restore button (arrow pointing up). This will direct OpenCart to use the file to first

truncate (remove all the rows) from each table and insert your new data.

Summing up Option 3 Do a clean install of OpenCart on your new server location (e.g., webtech) using correct

credentials

Upload the contents of your /image/catalog directory (and any any subdirectories) using Filezilla

Backup your current localhost database and save the .sql file to your desktop (or location of

your choice)

Log into your new location administrative site and ‘restore’ the database from your .sql file.

85

One other advantage of this method is you do not need to worry if you database names were different

on localhost and webtech. The localhost OpenCart knows where to look for the data on the backup step

and the webtech OpenCart restore knows where to place it.

The disadvantage of this method is it may not correctly transfer part of your data if your localhost

installation used 3d party modules that created new tables. For this method (backup and restore) to

work, the table structure must be the same on both installations so that data is simply moved into

existing tables.

86

Chapter 12 – Adding Email to your OpenCart Installation

If you server is properly configured to send emails, you can skip this chapter. Most production sites

have either an SMTP server as part of the configuration OR have the PHP configuration file (php.ini) set

to send mail to an outside SMTP for delivery.

However webtech (and other web servers on which you may be working) do not have this capability but

there is a solution.

Add GMAIL to send your Emails Navigate to System -> Settings and click the blue edit button to the right of your store.

Then, select the 'mail' tab and populate the fields as shown... then save:

87

(Leave Mail Parameters and Additional Alert EMails blank) Note: SMTP hostname must be preceeded by ssl:// This established a secure (encrypted) connection to GMail. In version 1.5, options for which alerts are to be sent are on this 'mail' tab. In version 2.0, they are on the 'local' tab. I added 'new order' and 'new Account (customer)' The default values are off.

THAT'S IT! When I registered a new customer, I got an email to my GMail account. . I did not try it yet, but should also get a similar email for each new order.

88

The new customer also gets an email to the address they provided during the registration

Send a Newsletter

Once you have configured OpenCart to send mail the customer will automatically get an email when

they register an account. Also, if you have opted to received email alerts (system->settings then edit

store and tab to options), you will get emails when a customer registers or places an order.

There is also a nice feature in OpenCart to allow you to send newsletter to subscribers OR a letter to all

customers. It is located at Marketing->Mail.

However, it DOES NOT WORK in OpenCart. The problem existed in version 1.5 and was carried over to

version 2.0. What happens when you try to use this feature is you get an error that says “Email Message

Required!’ regardless of what you put in the textarea box. (See red message below).

89

Here is how to fix it: Open /admin/view/template/marketing/contact.tpl

Replace line 199 (first line inside the function send(url) which says..

$('textarea[name=\'message\']').html($('#input-message').code());

with this code:

$("#content textarea").html($('#input-message').code());

90

Now, you should see this:

Alternatively, you can also just edit the original line replacing .html with .val and your edited line would

look like this: $('textarea[name=\'message\']').vall($('#input-message').code());

Now, you can send email to

Summing up the Mail Your server must either be capable of sending email OR you need to configure OpenCart to use

an external SMTP like Gmail’s SMTP

Customers will get automated emails when they set up an account

Store administrators can optionally get emails for new customers or orders

Store administrators can send newsletters or group emails to customers

91

Chapter 13 – Giving your site periodic test runs

Your site works! However, if you do not periodically go in as a user and test the life cycle of a purchase,

you many not know if it breaks. The site administrator spends most of the time in the admin section

processing orders but should occasionally experience the site as a customer to look for anomalies.

Follow the life cycle steps to test your site.

Life cycle of a purchase

1. Anonymous buyer navigates to site (http://webtech.tstc.edu/students/ebrown/opencart)

a. Buyer sees default store page to include header, menubar, banner(slider), featured items,

banner2(slider), and footer.

b. Each display is affected by template (.tpl) files that query the database to obtain references

for each of the images representing the respective products. Each is displayed as an image

tag (<img>) which repeatedly requests each image from the server. The actual images are

not stored in the database but are in the /image/catalog directories and its subdirectories.

c. If page does not display, check database and/or image directories for problems

2. Shopper narrow search via blue menu bar to select a page that shows products by category.

Example will assume he chooses ‘Boy Scout’ and subcategory of “Leadership Patches.”

a. Selected page now reflects products in the category or subcategory. Actual display can

change as shopper selects grid or list view. Shopper can ‘compare’, ’add to wish list’, ’or

‘place in cart’.

b. Debugging is similar to step 1b above. As before, the proper display is dependent upon

successful queries to the database and proper images in the images directory.

3. Shopper makes decision to purchase by clicking on ‘cart’ button under the product. For this

example, we will assume purchase of a single product though shopper could continue to repeat

step 3 for multiple items in the shopping cart before checking out.

a. When the shopper click on cart, the script creates a session variable that retains

information about the selection (or multiple selections) in a cookie. A login is not required

for anonymous shoppers assuming the shopper completes the transaction from the same

computer (and browser). The cart information is retained in a cookie.

b. The script will update the page now showing the number of selections and total purchase

price in the black ‘cart’ box at the top of the page.

4. The shopper elects to checkout by clicking the black cart box.

a. A popup box will display showing the contents of the cart (each item image, description,

purchase quantity and price. A ‘red x’ allows the shopper to remove an item. The box also

contains the subtotal, sales tax, and total cost (before shipping).

92

b. If the Tax does not display or is incorrect, troubleshoot at system-> localization zones and

system -> localization -> geo zones. Also ensure products are selected as ‘taxable goods’ at

catalog -> products (click edit for specific product) and data tab, variable ‘tax class’.

5. Shopper can choose two options from the popup checkout – View Cart and Checkout. If the

shopper chooses “view cart”, the script will populate a new page with expanded information

about the pending purchase. This page also includes options to choose ‘coupons’, ‘gift cards’, or

‘calculate estimated shipping charges.’ We will assume shopper does not opt to make changes

or compute shipping charges. Options at the bottom of the page are ‘continue shopping’ and

‘checkout’. We will assume the shopper moves to checkout.

a. Troubleshooting on this page is the same as in step 4 if the buyer moves to checkout.

6. Shopper has clicked on checkout and is directed to the checkout page with a six-step process

each activated with javascript onclick actions to sequentially open the step.

a. For first-time shoppers, the shopper should be presented with step 1 to either purchase

under a previously established account or checkout as a new customer either by registering

or providing information on–the-fly. Returning customers (with a cookie) will immediately

go to step 2.

b. This step assumes all has worked to this point and that the cookie can provide information

on the visitor and/or the registered shopper can be recognized in the database. If a

returning customer reports he is not recognized, have him check his security settings for

cookies. The buyer can accept a previously set address or add a different one. Checkout

step 2 is for billing and step 3 is for shipping.

7. Buyer continues thru step 3 to Step 4 ‘shipping costs’. If properly configured, the buyer will see

the authorized shipping services (UPS, USPS) and / or free or flat-rate or other options.

a. This step requires proper functioning of the sales-> shipping modules. Ensure desired

services are installed and properly configured. Use of UPS requires a valid access key,

username and password. USPS requires a USPS account with userid and local zip code.

Accounts properly configured should show shipping costs for various option/service you

have authorized. View each service settings by clicking on right blue edit button. The

shipping cost information (other than free and fixed) is based on an query to the respective

service and is not retained in the OpenCart database.

8. After selecting shipping options, shopper selects option 5 for payment option and proceeds to

step 6 to confirm.

a. Payment options should be configured for immediate checkout and for this example we will

assume Pay Pal. Proper display of this option is determined by the extensions -> payments

modules (similar to shipping). If not working, edit (blue button) for Pay Pal and ensure valid

API username, API password, and API signature. Like shipping, Pay Pay requires valid

accounts be working. Clicking Pay Pal as payment option takes shopper to Pay Pal site.

b. If shopper encounters problems at Pay Pal site ,ensure he has his own Pay Pal account to

complete purchase.

9. Buyer receives confirmation that order has been completed. At this point the buyer is done but

there are many additional steps for the store.

93

a. A pending order should show up in the ‘recent activity’ on the dashboard. At this stage, the

store (opencart administrator) needs to click on this order to review tabs or order details,

payment details, shipping details, products, and history.

b. The administrator can generate invoices (to be included with the order), as well as a product

list (to fulfill the order). In sandbox mode no cash is transferred and no fees are generated

for the USP or USPS lookups so manual packing and shipping would be required.

c. When the order has been completed (and presumably shipped), the administrator clicks the

“add History” blue button that completes the transaction, updates the dashboard, and

decreased the inventory list by sending a query to the database to reduce the product

count. It should be noted that each step above must work properly to move to the next

step. Troubleshoot at the point of breakdown before trying the next step.

94

Chapter 14 – Glossary of Terms

Administrator - An administrator of an OpenCart site is the person(s) who log the log in credentials to

administer the site. The administrative section of the site is located in a subfolder off of the site root.

By default, it is at /admin/. Each administrator must have a username and password and a login with

those credentials is necessary to gain admission. The opening page of the admin section is the

dashboard page.

Affiliates - The OpenCart Affiliate Program lets other companies refer business to your store or to a

particular product. The affiliate can be paid for their referrals.

Attributes (in OpenCart) – Attributes are used extensively in OpenCart to further define your products.

They would include such items as weight, size, color, etc.

Backup / Restore This is a part of the administrator’s tool section that allows the site administrator to

save copies of the database content and restore the site to a previously saved condition. Backup and

Restore only apply to the CMS database content and does not include templates or store images.

Content Management Systems (CMS) – As applied to web delivery, CMS applications separate the

templates and scripts from the textual content of a website. The text portion is retained in a database –

usually My SQL – to allow easy processing by the scripts which generate the HTML pages on the fly.

Documents and images (pictures) may or may not be stored in the database. It is more common to

store them outside the database in a directory parallel to the scripts. In such cases, only the reference

to the location of the file is retained in the database.

Catalog (in OpenCart) – The catalog section of the administrative function in OpenCart is used to set

categories, products, profiles, filters, attributes, options, manufactures, downloads, reviews, and

information. It is arguably the main section for initially defining the look and feel of the store.

Coupons - Coupons are an optional feature a store may use to increase business. Coupons are

configured in the Orders Total extension and, if active, will show up as an option for a customer during

the checkout process.

Customers - Customers are you shoppers / buyers. A buyer may purchase as a guest customer or as a

registered customer. Registered customer data is retained in the database as a convenience for

returning customers. Administrators can view customer details at sales->customers->customers.

Dashboard – The main administrative page of most CMS applications. In OpenCart, selecting the

administrative section opens the dashboard which gives a snapshot of the store’s orders, sales, and

customers. The dashboard also contains links to major administrative functions – catalog, extensions,

sales, marketing, system, tools, and reports.

E-Commerce – In broad terms, E-Commerce is the buying and selling of goods or services over the

internet. A company that engages in E-Commerce may utilize electronic advertising, E-Main, and other

95

means to conduct business but is more closed identified by having an E-Commerce CMS website in

which the actual transactions take place. An example would be an OpenCart store.

Error Logs - These include a full history of every action that involves an error. The logs are easily viewed

by the administrator at tools -> error logs.

Extensions (in OpenCart) - Extensions allow one to expand the capability and functionality of OpenCart

by adding code that performs additional functions. Within the administrative section, the extensions

menu contains submenus of extension installer, modifications, modules, shipping, payments, order

totals, and feeds.

Filters – Search filters can be defined under catalog->filters and then used in various modules to define

or limit a search.

Localization and Geo-Localization Localization and Geo Localization are used extensively throughout

OpenCart and are an essential requirement when it comes to tax and shipping issues. See complete

chapter on localization for how to employ localization techniques.

Marketing (in OpenCart) - The Marketing section in administration is used to market products and

contains submenus for marketing, affiliates, coupons, and mail.

OpenCart – One of many CMS website programs designed to offer goods or services and interfaces for

purchasing, computing price, and calculating shipping information. OpenCart is free and open-source

and is one of the better free CMS applications for E-Commerce.

Options (in OpenCart) - Options are used extensively in the admin section to allow the site

administrator to define conditions and impact the display seen by customers. Options are defined in the

catalog->options section and are used in most other modules.

Products and Categories These are the ‘building blocks’ of your store. Generally, you will want your

products associated with categories. If you inventory is geared to manufacturer identification, you may

also associate your products with a particular manufacturer.

Reports (in OpenCart) The reports section in administration is used to generate reports and contains

submenu sections for sales, products, customers, and marketing.

Sales (in OpenCart) - The sales section in administration is used to manage sales and contains submenu

items for orders, reoccurring orders, returns, customers, gift vouchers, and Pay Pal.

System (in OpenCart) - The systems section in administration is used to define much of the

functionality of OpenCart, to give it the overall look and feel for the site, and to establish both a user list

and localization (and GeoZone) options. It contains submenu items for settings, design, users, and

localization.

Themes – A collection of PHP scripts that define the look and feel of a CMS site such as OpenCart. The

default theme in OpenCart is normally all one needs and it is highly configurable.

Tools (in OpenCart) – The tools section in administration contains submenus for uploads,

backup/restore, and error logs.

96

Users - Not to be confused with customers, users are registered individuals who have access to some

or all of the administrative section of the site. In a small site, all uses may be identified as administrators

who then jointly have full administrative privileges.

97

INDEX

Access Code, 65 admin, 2, 5, 10, 11, 14, 15, 16, 69, 72, 73, 74,

84, 89, 91, 94, 95 administrative, 12, 31, 33, 38, 41, 45, 81, 82, 84,

94, 95, 96 administrator, 13 backup, 84 Backup, 82 banner, 18, 21 Branding, 15 buyer, 37, 40, 41, 44, 54, 55, 91, 92, 94 categories, 23, 31 CMS, 4 Content Management, 4 customer, 88 dashboard, 45 database, 75 Database, 76 demo, 19 dimensions, 65 distro.php, 14 download, 8 E-Commerce, 4 Email, 86 extension, 18 filezilla, 70 GeoZones, 35 history, 46 home page, 16 HOSTING, 7 Image Manager, 26 images, 2, 3, 15, 18, 26, 27, 28, 29, 33, 69, 70,

81, 91, 94 install, 7, 13 Install, 69 installation directory, 9

INSTALLING, 7 Life cycle, 91 Localization, 34 login, 10, 12, 14, 31, 44, 58, 59, 62, 65, 91, 94 migrate, 81 Migration, 69 mysql, 10 Newsletter, 88 order, 3, 7, 8, 17, 28, 32, 41, 44, 45, 46, 47, 49,

51, 54, 55, 66, 87, 88, 92, 93, 95 password, 10, 11, 14, 37, 44, 50, 58, 65, 69, 74,

75, 78, 79, 81, 92, 94 Pay Pal, 37 payment, 5, 6, 37, 39, 40, 42, 48, 55, 92, 93 Payment, 92 payments, 38 products, 17, 23, 31 purchase, 44 sales tax, 37 sandbox, 55 Sandbox, 40 shipping, 3, 5, 6, 35, 46, 49, 50, 51, 52, 53, 54,

55, 56, 58, 59, 62, 63, 64, 65, 66, 68, 91, 92, 93, 95

Shipping, 49, 56, 64 shipping options, 51 Shopper, 91 sliders, 15 taxable, 52 test, 91 theme, 29 upload, 9 UPS, 56 user ID, 51 USPS, 49