E-commerce 25 min

If youve ever bought anything online, youll know how simple the process can be as a
buyer. But how difficult is it to set up your own e-store? Fortunately with WebPlus, the
process simple. Over the next few pages, well show you how by creating a page to sell
photographic prints.

By the end of this tutorial you will be able to:

Choose and configure your e-commerce cart provider.

Creating an e-commerce form.

Use an existing e-commerce form as a template for your other objects.

To download the tutorial project file(s), right-click the link(s) and, depending
on your browser, select either Save Target As... or Save Link As... In the
subsequent dialog, ensure that you choose a suitable file location, such as a
'downloads' folder or the 'desktop', so that you can easily browse to your file
when required.

scuba.wpp

Lets begin...

1. On the Standard toolbar, click Open.

2. Navigate to the scuba.wpp file, select it and click Open.

The 'Home' page is displayed in the workspace.

Save now! Click File > Save As... and choose a new name for your file.

In the following sections, well configure a shopping cart provider, and insert and configure
an e-commerce form.

Choosing a Shopping Cart Provider

Any website that supports e-commerce activity will typically use a shopping cart and
payment gateway. There are many third-party shopping cart providers that can be used.
Each provider offers the same basic features and with WebPlus, it's easy to set up your e-
commerce site using one of our selected providers, all of which offer a good range of
features.

In this project, weve chosen PayPal as the provider most suited to sell some photo
prints. Well now step you through the signup and configuration process.

Our example uses PayPal as our shopping cart provider. Some cart providers
offer additional features and depending on your needs, these may or may not be
important to you. Use the providers Help pages to find out more about unique
shopping cart features.

To setup and configure a PayPal shopping cart:

1. On the Web Objects toolbar, on the E-commerce flyout, click Configure

E-commerce.

2. In the E-commerce Configuration dialog, select the PayPal option and choose
one of the following options:

If you already have a PayPal account, click Next.

If you dont have an account, click Sign Up Now. The PayPal site opens in your
browser. Follow the instructions provided to register and set up an account. When
you have finished, return to WebPlus.
 3. In the PayPal Configuration dialog:

Type the email address where you want to receive notification about payments
received.

Set the Cart Handling Charge, i.e. your default overall shipping charge.

(Optional) If you want to use PayPals Sandbox, a test tool for trying out your
shopping cart before going live, select this option.

To use the Sandbox, you must set up a separate test account (in addition to your
live PayPal login) through PayPals Developer Central site. Click Find Out More to
do this.

Click Next.

4. Click Use the PayPal Minicart.

For now, leave the default settings (you can always change them later) and click
Finish.

Top of page

Creating an e-commerce form

WebPlus makes it really easy to add e-commerce objects, either as a form or link,
depending on the characteristics of the item(s) you are selling. In our example, well add a
form since it offers more flexibility and allows for some user interactivity.

For information on the differences between forms and links and why you might
choose one over the other, see WebPlus Help.

Our site uses empty frames as image placeholders. This makes it very easy to create
thumbnails of our e-commerce objects and means that we can replace images very easily
while retaining aspect ratio. For more information on using frames, see the tutorial
Pictures.

To add an object image and title:

1. On the Site tab, double-click the Shop page entry to display the page.

2. On the Media Bar, in the rightmost drop-down list, select the WebPlus X5 -
Tutorial Images album.

3. Drag the photo of the caves (C861l0009.jpg) onto the top picture frame.

4. On the Standard Objects toolbar, in the Text Frames flyout, click the
HTML Text Frame Tool.

5. Click and drag on the page next to the image to place an HTML frame
approximately 470 pix x 30 pix, level with the top of the frame.

6. When creating objects, the Hintline updates to show information about placement
size. It also gives you other tips, tricks and shortcuts.

For accurate sizing, use the Transform tab. For more information, see WebPlus
Help.

6. In the Text context toolbar, select the Heading 3 style from the drop-down list.

6. Click in the text frame and type The Cave print.

We are now ready to add our e-commerce details for this print.

Don't forget to save your work!

To insert a PayPal form:

1. On the Web Objects toolbar, on the E-commerce flyout, click the Insert
an E-commerce object button.

2. In the Add PayPal Object dialog:

Select the email address that is to receive the payment information.

WebPlus assumes that the email address set during shopping cart configuration is
used. If you want to use a different addressfor example, the address you
specified when you set up your Sandbox, clear the Use the site default address
box and select a different address to override the site default.

Select the Add to Shopping Cart Form option.

Click Next.

3. In the Button Image dialog:

Select the Use a standard image option.

Select the image of your choice.

Click Next.
4. In the Item Details dialog, enter the following information:

Item Name: The name of the item for sale. Try to make this descriptive as it will
appear as the item description on the invoice produced by the cart. We typed The
Cave printthe title of the photograph displayed in the first picture frame.

Item ID: If you have a specific product code reference, enter it here. We left ours
blank.

Currency: Choose the currency required from the drop-down list.

Price: Type the price of the item.

Click Next.

5. The Item Description can be used to add extra details about the sale item.

As we have three different sizes of print for sale, list the price of each size in the
description.

We already have an image, so we dont need to add another. Click Next.

6. In the Item Options dialog click Add Multiple Option...

6. In the Multiple Option dialog:

In the Name box, type Size.

In the Prompt box, type Size:.

Select Option changes price.

Select the Combo Box option.

Click Add Option...

For information on the other options in the dialog, see WebPlus Help.

8. In the Option dialog:

In the Name box, type 7x5.

 In the Value box, type 7x5 inches.

In the Price drop-down list, select 12.99.

Click the Selected check boxthis sets the item as the default option when the
page opens.

Click Add Another.

9. Repeat step 8 to create a 12x8 option, but this time:

In the Price field, type 15.99.

Do not select the Selected check boxyou can only set one default!

Click Add Another.

10. Repeat step 9 to create a 24x16 option at 19.99 and then click OK.

Your Multiple Options dialog should now list the three options you specified. Click
OK.

10. The Item Options dialog displays again, allowing you to add further options. We
dont want to do this so click Next.
10. In the Item Details dialog:

Select the Add Edit Box option to let the customer define the quantity to be
ordered.

In the Shipping and Handling section, type the additional charges associated
with the order item (if any). If these are left blank, the default profile set in PayPal
will be used.

Click Next.

13. In the Extra Customer Information dialog, ensure Customer prompted for
address is displayed in the drop-down list and click Next.

13. In the Payment Pages dialog, leave the default settings and click Next.

13. In the Form Layout dialog, because we have more than one pricing option, clear
the Show price on form option and click Finish.

13. Click once to insert the e-commerce form on your page.

 If necessary, you can move and adjust the individual form objects, and edit their
appearance, as you would any other WebPlus object. We adjusted the position of
the PayPal button.

Don't forget to save your work!

Were now going to insert another e-commerce object into the space createda View
Cart button.

To insert a View Cart button:

1. On the Web Objects toolbar, click the Insert an E-Commerce object button.

2. In the Add PayPal Object dialog:

Select the email address you used previously.

Select the View Shopping Cart Link option.

Click Next.

3. In the Button Image dialog:

Select the Use a standard image option.

Select the image you want to use.

Click Finish.
 4. Click to insert your button at default size, then drag it into position on your form.

4. Preview your page in your web browser. Check that you can:

Select a Size from the drop-down list.

Edit the product Quantity.

Add items to your shopping cart.

View your shopping cart.

Top of page

Don't forget to save your work!

Using an existing form as a template

If youre happy with the way your first product looks and functions, you can use it as a
template for your other objects by simply copying and editing the form.

Well do this next...

To copy and edit the form :

1. Drag a new picture from the Media Bar and onto the next empty frame.
2. Click and drag to select the HTML print title frame and the form object.

3. Hold the Ctrl key and drag down to create a copy of the objects. Position these
next to the second image.

4. Click inside the new HTML title frame and change the text to Ocean Waves print.

5. In our sample store, we only need to change the name of each item as all other
options (for example, print size and price) stay the same.

It is important that you do this by editing the form and not by editing the text
boxes directly as it's the form information that gets passed to the invoice.

When you create your own e-commerce site, the extent of the changes required in
 these dialogs will depend on the type of items you are listing for sale. If your items
are very different, you may prefer to simply create each form from scratch, rather
than copying and editing your first page as we have done here.

5. Right-click on an empty part of the form and select Edit e-commerce Form...

5. In the Add PayPal Object dialog, click Next.

5. In the Button Image dialog, click Next.

5. In the Items Details dialog, check the details displayed and replace any that do
not apply to your new item.

(In our case, we only needed to type in the new name for the image Ocean
Waves.)

Click Next.

5. In the Item Description dialog, replace any of the options that have changed for
this new item. If the same options apply, as in our case, simply click Next to
proceed.

5. Unless you need to make changes, click Next until you come to the Form Layout
dialog. Ensure that the Reformat form now option is cleared and click Finish.

The form is updated with the new details.

5. Preview the page in your browser.

Starting with empty picture frames for your images makes it very easy to create
image thumbnails that all have the same dimensions, without changing the aspect
ratio of the pictures they contain. For more information about using empty picture
frames, see the Pictures tutorial.
Now that you have
two objects in place,
its easy to add the
rest of your product
list. Your finished
page should look
something like ours.

Congratulations,
youve created your
first e-commerce
website! We hope
youve enjoyed the
exercise and wish
you every success in
your e-commerce
ventures.

If you also worked

through the other
tutorials, you should
by now be feeling
very comfortable
with WebPlus tools
and well-equipped to
start working on
your own WebPlus
creationswhether
their purpose is
personal or for
profit!

Search
Engine
Optimizatio
n

To learn
about how
you can
attract
visitors to
your site (so
that they can
start
purchasing
those
products!),
see the
Search
Engines
tutorial.

Top of page
Questions?

If you have questions about anything related to Serif WebPlus X5

or any other Serif products, visit the Serif Software Forums.

Visit the Template Store to access new professionally designed

templates for use in WebPlus.