Answering and checking off the following question before you start configuring eShop should make the eShop set-up process a little easier for you.

Is Your Merchant Gateway eShop Compatible?

There are a number of merchant gateways that you can use with eShop:

• Authorize.net
• eProcessingNetwork
• iDeal Lite
• PayPal
• Payson
• Ogone
• webtopay

But you may need to make changes to your gateway account to ensure that it is compatible with eShop.
Check your merchant gateway

Do You Have Your Merchant Gateway Details?

You will need all of the necessary details for your chosen merchant gateway – e.g. if you’re using PayPal, you will need the email address that you use on your PayPal account.
Setting up eShop merchant gateways

Where Will You Be Shipping To?

Will you be selling in your own country only (i.e. by State/County/Province)? Or internationally (i.e. by Country)?
Defining your shipping locations

Have You Zoned Your Delivery Locations?

The cost of shipping an item varies according to its destination. eShop allows you to group different delivery locations into “zones” & apply different charges accordingly. You can have up to 9 zones.
Have you divided your shipping locations in 1 or more groups – called “zones”
What are shipping zones?

Have You Broken Your Products Down Into Shipping Classes?

The cost of shipping an item can also vary according to its weight, size, cost or fragility. eShop allows you to define up to 5 shipping classes to accommodate these differences with the 6th reserved for free shipping.
What are shipping classes?

What Are Your Shipping Costs?

You should have worked out all of your shipping charges and have determined how to apply them.
Will you charge for the first item based on delivery zone & shipping class with a reduced cost for additional items (Method 1)?
Will you charge for the each item based on delivery zone & shipping class with no reduction for additional items (Method 2)?
Will you charge a flat rate based on delivery zone only (Method 3)?
Will you charge based on delivery zone & product weight (Method 4)?
Calculating shipping

Will You Be Applying Tax?

If you will be applying tax to products – such as VAT or sales tax – you will need details of what tax to apply and when. You also need to decide if tax will also be applied to shipping charges.
Setting up sales tax

Will Your Products Offer Choices?

eShop includes option sets that allow you to add customer-selectable choices to your products. What options can customers choose from when purchasing one of your products? Different sizes? Different colours? Are some colours more expensive? You can set an additional price & weight for each option within a set.
Using option sets

Do You Have All The Details And Images For A Single Product?

You will need all of the text plus at least 1 image for a sample product. You also need to be able to set it’s price, shipping class, options set(s) and tax rates based on your answers to the questions above. This exercise will help you get a handle on how to set up eShop to suit your needs.

Install EasyPHP

Download EasyPHP.

Apache (the web server) does not always like path names with spaces. So when you install EasyPHP, make sure you do not have any spaces in your installation path. Instead of using the default installation folder (C:\Program Files (x86)\EasyPHP), change it to something like C:\EasyPHP.

This will also by-pass a potential issue whereby Windows 7 restricts access folders within the C:\Program Files (x86) folder.

Wrangle Windows 7

Windows 7 does not handle localhost in the same way as older versions. Previously, Windows stored a localhost line in the machine’s hosts file by default but this is no longer the case. You need to modify the hosts file manually.

Navigate to the hosts file in C:\Windows\system32\drivers\etc and open it in a plain text editor (eg NotePad). Just after the initial comments, you should see the line:

# 127.0.0.1 localhost

Remove the hash sign (#) from the start of the line and save the file.

Configure Apache

You need to make 2 changes within Apache if you want to use custom permalinks:

1. Activate the rewrite module
2. Give permission for WordPress to rewrite

To activate the rewrite module, you need to edit your Apache configuration file — called httpd.conf — within the conf_files sub-folder of your EasyPhp folder. Right-click on the EasyPHP icon, select Configuration → Apache. This will launch the httpd.conf file in NotePad.

Find the line that reads:

# LoadModule rewrite_module modules/mod_rewrite.so

And remove the hash sign (#) from the start of the line, so that it reads:

LoadModule rewrite_module modules/mod_rewrite.so

You then need to make a permissions change in the same file. Find the line that reads:

<Directory "${path}/www">

A few lines further down should be:

AllowOverride None

Change this to:

AllowOverride All

Save your httpd.conf file, then restart the Apache server by double- clicking the EasyPHP icon in task bar. In the popup dialogue, click the Apache button and select Stop. Wait for the bottom red light to show, then click the Apache button again and select Start. You can then minimise the dialogue box.

Create your WordPress Database and User

Start EasyPHP.
Once it has started, right click, chose Configuration and click PhpMyAdmin.

Enter a name for your new database (e.g. wordpress) by filling in the empty Create new database field. Ensure that the database name is all lowercase and contains only letter (and underscores, if needed). Make a note of the database name, then click Create.

Next, you need to set up a new user. In PhpMyAdmin, go to Privileges and click Add a new User.

On the Add a new User page, type a username (e.g. wpress) in the User name field. Under Host, select Local from the dropdown and type in localhost. Click the Generate button to create a password.

Make a note of the username and the password.

Under Global privileges, click Check All followed by the Go button at the bottom of the page.

You have just created a database and a user!

You should also have a copy of the:

• Database name
• Database username
• Database password

Install WordPress

Locate your EasyPHP document root folder It’s should be something like C:\EasyPHP-5.3.6.0\www\. Download WordPress, unpack the archive and drop the complete wordpress folder into this sub-folder.

Open your web browser and navigate to http://127.0.0.1/wordpress/wp-admin/install.php

Click Create Configuration File followed by Let’s go

Now enter your database name, username and password. Set the database host to 127.0.0.1 and click Submit followed by Run the install.

Complete the installation form. Most of this data can be easily changed via WordPress later on with one exception — the Primary Admin username. Consider it good practice to use something other than “admin”. It probably won’t matter on a local installation but when installing on a remote (live) server, using a non-generic username will enhance your overall security.

Once the form is complete, click Install WordPress. Once the installation is complete, make a note of your login URL. You might want to bookmark in your web browser (it’s a lot easier than typing it in every time).

Congratulations — you have just installed WordPress locally!

Example:
<a href="foo.cgi?chapter=1&section=2">...</a>

Possible Validator Report: Unknown entity…

Solution: Always use & in place of &.

Correct Syntax:
<a href="foo.cgi?chapter=1&amp;section=2">...</a>

Incorrect Nesting of Elements

Example:
<strong><em>...</strong></em>

Possible Validator Report: Missing </em> tag

Solution: Elements in XHTML must be closed in the reverse order that they were opened in.

Correct Syntax:
<strong><em>...</em></strong>

Lowercase DOCTYPE

Example:

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd" >

Possible Validator Report: Missing DOCTYPE

Solution: The DOCTYPE is case-sensitive so use the correct case.

Correct Syntax::

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

Missing closing " /"

Example:
<img src="image.gif" width="100" height="100" alt="Logo">

Possible Validator Report: Missing closing tag

Solution: So-called "empty elements", such as img,
require a trailing space followed by a "/".

Correct Syntax::
<img src="image.gif" width="100" height="100" alt="Logo" />

Upper case tags

Example:
<STRONG><EM>...</EM></STRONG>

Possible Validator Report: There is no such element…

Solution: Use lower case for all HTML element and attribute names. This difference is necessary because XML is case-sensitive e.g. <em> and <EM> are different tags.

Correct Syntax::
<strong><em>...</em></strong>

Unquoted attribute values

Example:
<td rowspan=3>

Possible Validator Report: Missing " "

Solution: All attribute values must be quoted, even those which appear to be numeric.

Correct Syntax::
<td rowspan="3">

1. Not currently supported by most browsers.
2. Not supported by Internet Explorer 6.

There are three ways of inserting style information:

• In the header of a given HTML page (Internal Style)
• Within a given tag (Inline Style)
• In an separate file which is then linked to the HTML page by a reference in the page header (External Style)

External Style Sheets

External style sheets are the best method when you want the style to be applied to many pages. With an external style sheet, you can change the look of an entire web site by changing one external style sheet file. Each HTML document that you want to apply these styles to must contain a link to the style sheet using the <link> tag inside the <head></head> section:

<head>
...
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

The browser will read the style definitions from the file mystyle.css, and format the HTML document accordingly.

An external style sheet can be written in any text editor and saved with a .css extension.

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the <head></head> section by using the <style> tag, like this:

<head>
...
<style type="text/css">
body {background-image: url(images/back40.gif);}
hr {background: #ffffff;    color: 0000ff;}
p {margin-left: 20px;}
</style>
</head>

The browser will now read the style definitions, and format the document according to it. If the document also contains a link to an external style sheet, the internal style declarations will over-ride any similar declarations within the external sheet.

This can be helful when you wish to re-adjust the style of a single page – for example, alter the padding on the body tag.

Inline Style

An inline style loses many of the advantages of style sheets by mixing content with presentation.

Therefore, you should use this method sparingly, such as when a style is to be applied to a single occurrence of an element.

To use inline styles, you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the font-style and the left margin of a paragraph:

<p style="font-style: italic; margin-left: 20px;">
This is a paragraph
</p>

Inline style will overide both internal and external style declarations.

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the final value will be inherited according to the rules of Cascading Style

For example, an external style sheet has these properties for the h2 selector:

h2 {text-align: left; font-style: italic; font-size: 200%;}

And an internal style sheet has these properties for the h2 selector:

h2 {text-align: right; font-size: 100%;}

And an inline style declaration reads:

<h2 style="font-size: 80%;">...</h2>

The final values will be:

• text-align: right (from the internal style sheet over-riding the external sheet)
• font-style: italic (from the external sheet)
• font-size: 80% (from the inline style over-riding both the external and internal declarations for font-size)

Further Reading

Cascading Style Sheets Level 1 W3C Recommendations

Cascading Style Sheets Level 2 CSS2 Specification W3C Recommendation

Useful Resources

W3C Online CSS Validator

CSS syntax is made up of three parts:

• selector (often the HTML element you wish to style)
• property (the attribute you wish to change eg. background colour)
• value (eg. the colour you want your background to be)

The way in which these are used is:

selector {property: value;}

You don’t have to have each property/value pair on a separate line but it does increase readability – especially in long, complex style sheets.

For example, to set a black background, you would use:

body {background: #000000;}

where #000000 is the hexadecimal code for black.

If the value you want to use contains white space multiple words, put quotes around the value:

p {font-family: 'sans serif';}

You can specify more than one property in a given declaration. The example below shows how to define a center aligned paragraph of italicised text.

p {text-align:center; font-style: italic;}

You can group selectors by separate them with commas.

In the example below, all the header elements have been defined as white:

h1,h2,h2,h4,h5,h6 {color: #ffffff;}

However, whenever you do define a text colour, it is advisable to also define a background colour and vice versa. This can ensure that your text remain readable.

h1,h2,h2,h4,h5,h6 {color: #ffffff; background: #000000;}

Now your white header text will always be on a black background – even if the rest of your page
has a white background.

The class selector

With the class selector you can define different styles for the same type of HTML element.

For example, you want two types of paragraphs in your document: one italicised and one bold.

p.italic {font-style: italic;}
p.bold{font-weight: bold;}

Now, when you want to use either of the above styles in a web page, you can do the following

<p class="italic">This paragraph will be in italics.</p>
<p class="bold">This paragraph will be bold.</p>

However, you can only use one ‘class’ declaration per HTML element at any one time! The example below is the wrong way of trying to get bold, italicised, text:

<p class="italic" class="bold">This text is bold and italic.</p>

The correct method would be to define a third class selector.

p.bold-italic {font-style: italic; font-weight: bold;}

And then use:

<p class="bold-italic">This text is bold and italic.</p>

Or you could use:

<p class="italic bold">This text is bold and italic.</p>

Making selector classes available to multiple HTML elements

If you omit the tag name in a selector, you open it up to be used by any HTML element.

For example, the following class:

.center {text-align: center;}

can be used with any tag as appropriate.

<p class="center">...</p>
<span class="center">...</span>
<td class="center">...</td>
<div class="center">...</div>

can all be used in the same document.

Use class selectors where you think you will need to re-apply the same style more than once in a
given document.

If you think that you will need to use the style with different HTML elements, don’t include any
tag names in the class selector declaration.

The id selector

The id selector is different from the class selector.

While a class selector may be applied to many elements in a given document, an id selector can only be applied to only one element within a given document ie. it must be unique within the document.

The style rule below will match a p element that has the id value ‘para1′:

p#para1 {text-align: center; color: #ff0000; background: #000000;}

The style rule below will match the first element that has the id value ‘green’:

#green {color: 00ff00;background: #000000;}

So you could have:

<h1 id="green">...</h1>
<h2>...</h2>
<p id="para1">...</p>

in the same document.

But having:

<h1 id="green">...</h1>
<h2 id="green">...</h2>
<p id="para1">...</p>

would be illegal as you would have attempted to repeat the id selector ‘#green’.

Use id selectors for styles that you are sure you’ll only need once in a given document.

CSS Comments

You can insert comments in CSS to explain your code, which can help you when you edit the source code at a later date.

Comments are ignored by the browser and begin with “/*”, and ends with “*/”.

/* This is a comment */
p {text-align: center;}
/* This is another comment */
h1 {background: #ffffff; color: #000000;}

CSS stands for Cascading Style Sheets.

A style defines how an HTML element is displayed.

Style information can be stored:

• In the header of a given HTML page (Internal Style)
• Within a given tag (Inline style)
• In a separate file which is then linked to the HTML page by a reference in the page header (External style)

Why use CSS?

A web page consists of two basic components – the Content (or information you wish to display) and the Style (the way if which you wish the content to be displayed).

CSS allows you to separate Content from Style. It’s even possible to have more than one style sheet – thus allowing you to have more than one way of displaying a page.

If all of the style information is retained within one external style sheet, it is possible to edit that one file and make sweeping changes (such as changing background and/or text colours) that affect hundreds of related web pages without having to touch a single HTML file

You can define a style for any HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all relevant elements on every page are affected automatically.

Multiple Styles Cascade Into One

Since you can specify CSS information in a number of ways, it is possible to utilise all three CSS methods as required. When you do utilise more than one CSS methodology (eg. using both external and inline style on the one web page), the multiple styles will cascade. This means that they will merge together to form a complete ‘virtual’ set of style instructions.

Generally speaking, styles using the following rules in descending priority:

• Inline Style (inside HTML element)
• Internal Style Sheet (inside the <head> tag)
• External Style Sheet
• Browser default style

So, an inline style declaration has the highest priority and will override any declared internal or external style for the same HTML element and any default style properties normally applied by the browser.