ECommerce.pdf

Further Development 85

E-commerce

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

In this project, youll learn how to:

Configure your e-commerce shopping cart provider. Ourexample uses PayPal as our shopping cart provider. Youmay decide to use a different provider, depending on yourneeds and the product(s) you want to sell on your site.

Add an e-commerce form and functionality to your site.

E-commerceFurther Development86

E-commerceIn the following sections, well configure a shopping cart provider, andinsert and configure an e-commerce form.

1: Choosing a Shopping Cart ProviderYouve made the decision to sell your products over the Internet and havecreated a site that will attract your target market.

But how do you accept and process payments from your customers?

Any website that supports e-commerce activity will typically make use of ashopping cart system and a payment processing system. If youve everbought anything online, you will already be familiar with this concept.

There are many third-party shopping cartproviders that can be used. Each provideroffers the same basic featuresproductcatalogue, running customer basket, buyit now option, secure paymentinformation capture and checkout, and soon.

With WebPlus, you can choose one ofour selected providers, all of which offera good range of features.

In this project, weve chosen PayPal as the provider most suited to sellsome photo prints. Well now step you through the signup andconfiguration process.

To setup and configure a PayPal shopping cart

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

2 In the E-commerce Configuration dialog, select the PayPal optionand 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 siteopens in your browser. Follow the instructions provided to registerand set up an account. When you have finished, return to WebPlus.

Some cart providers offeradditional features and dependingon your needs, these may or maynot be important to you.

Use the providers Help pages tofind out more about uniqueshopping cart features.

E-commerceFurther Development 87

3 In the PayPalConfiguration dialog:

Type the email addresswhere you want toreceive notificationabout paymentsreceived.

Set the Cart HandlingCharge, i.e. yourdefault overall shippingcharge.

Optional step(recommended): If youwant to use PayPalsSandbox, a test toolfor trying out yourshopping cart beforegoing live, select thisoption.

4 Click Finish.

Once you've configured your shopping cart, youre ready to insert ane-commerce object.

2: Inserting e-commerce objectsWebPlus provides Wizards to help you create e-commerce objects bycompleting a series of dialogs. You can add your e-commerce objects as aform or link, depending on the characteristics of the item(s) you areselling.

In our example, well add a form since it offers more flexibility and allowsfor some user interactivity. You can either use the Workspace filesprovided or use your own.

To open the Workspace file

1 On the Standard toolbar, click Open.

2 Navigate to the Workspace folder and click to select the scuba.wppproject file. In a typical installation, this folder is found in:

C:\Program Files\Serif\WebPlus\X4\Tutorials

To use the Sandbox, you must set up aseparate test account (in addition to your livePayPal login) through PayPals DeveloperCentral site. Click Find Out More to do this.


3 Click Yes in the dialog to open as a new, untitled site.

4 Click File > Save As... and save your new file under a new name.

Our site uses empty frames as image placeholders. This makes it veryeasy to create thumbnails of our e-commerce objects and means that wecan replace images very easily while retaining aspect ratio. For moreinformation on using frames, se the Pictures tutorial.

To add an object image and title

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

2 Click to select the first picture frame, thenclick the Replace Picture button.

3 In the Import Picture dialog, browse toyour Workspace folder.

4 Select the shark.jpg file and click Open.

The picture is added tothe frame and scaled tomaximum-fit by default.

5 To reposition the pictureinside the frame, click

Pan, and then clickand drag on the picturewith the Pan cursor.

6 On the Standard Objects toolbar, In the Text frames flyout, click theHTML Text Frame Tool.

7 Click and drag on the page next to the image to place an HTML frameapproximately 470 pix x 30 pix, between the empty column layoutguides.

8 In the Text context toolbar, select theHeading 3 style from the drop-down list.

9 Click in the text frame and type Reef shark print.


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

To insert a PayPal form

1 On the Web Objects toolbar, on the E-commerce flyout, click theInsert 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 cartconfiguration is used. If you want to use a different addressforexample, the address you specified when you set up your Sandbox,

clear the Use the sitedefault address box andselect a different address tooverride the site default.

Select the Add toShopping Cart Formoption.

Click Next.

3 In the Button Image dialog:

Select the Use a standard image option.

Select the image of your choicewe chose the first one.

Ensure that the Embedimage file in siteoption is selected.

Click Next.

For information on the differencesbetween forms and links and why you mightchoose one over the other, see Inserting ane-commerce object in online Help.


4 In the Item Details dialog, enter the following information:

Item Name: The name of the item for sale. Try to make thisdescriptive as it will appear as the item description on the invoiceproduced by the cart. We typed Reef shark printthe title of thephotograph displayed in the first picture frame.

Item ID: If you have aspecific product codereference, enter it here.We left ours blank.

Currency: Choose thecurrency required from thedrop-down list.

Price: Type the price ofthe item.

Click Next.

5 The Item Descriptioncan be used to add extradetails about the sale item.As we will have threedifferent sizes of print forsale, weve listed the priceof each size in thedescription.

We already have an image,so we dont need to addanother.

Click Next.

6 In the Item Options dialog clickAdd Multiple Option...

7 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 online Help.

8 In the Option dialog:

In the Name box, type 9x5.

In the Value box, type 9x5inches.

In the Price drop-down list, select12.99.

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

Click Add Another.

9 Repeat step 8 to create a 12x8option, but this time:

In the Price field, type 15.99.

Do not select the Selected checkboxyou can only set one default!

Click Add Another.

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

Your Multiple Options dialogshould now list the three options youspecified, as illustrated left.

Click OK.

11 The Item Options dialog displaysagain, allowing you to add furtheroptions. We dont want to do this soclick Next.


12 In the Item Details dialog:

Select the Add Edit Boxoption to let the customerdefine the quantity to beordered.

In the Shipping andHandling section, type theadditional chargesassociated with the orderitem (if any). If these are leftblank, the default profile setin PayPal will be used.

Click Next.

13 In the Extra Customer Information dialog, select Customerprompted for address in the drop-down list and click Next.

14 In the Payment Pages dialog, leave the default settings and clickNext.

15 In the Form Layoutdialog, because we havemore than one pricingoption, clear the Showprice on form optionand click Finish.

16 Click and drag on yourpage to insert thee-commerceform on yourpage, betweenthe two columnguidelines nextto the image.

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


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

To insert a View Cart button

1 On the Web Objects toolbar, click the Insert an E-Commerceobject 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 Imagedialog:

Select the Use astandard imageoption.

Select the image youwant to use.

Click Finish.

4 Click to insert your button at defaultsize, then drag it into position onyour form.

5 Preview your page in your webbrowser. Check that you can:

Select a Size from thedrop-down list.

Edit the productQuantity.

Add items toyourshoppingcart.

View yourshoppingcart.


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

Well do this next...

To copy and edit the form

1 Select the second empty pictureframe on the page and click the

Replace Picture button.

2 Browse to locate the second imageyou want to sell on your websitewe selected the waves.jpg fileandclick Open.

The picture is added to the frame andscaled to maximum-fit as before.

Now we need to copy the e-commerce form and edit it to match thisnew item.

3 Click and drag to selectthe HTML print title frameand the form object.

4 Hold the Ctrl key anddrag down to create acopy of the objects.Position these next to thesecond image.

5 Click inside the new HTML title frame and change the text to OceanWaves print.

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

When you create your own e-commerce site, the extent of the changes required in thesedialogs 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.


6 Right-click on an empty part of the form and select EditE-commerce Form...

7 In the Add PayPal Object dialog, click Next.

8 In the Button Image dialog, click Next.

9 In the Items Details dialog, check the details displayed and replaceany that do not apply to your new item.

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

Click Next.

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

11 Click Next (unless you want to add another option for this item).

12 In the Item Details dialog, edit the shipping and handling charges ifrequired. If no changes are required, click Next.

13 In the Extra Customer Information dialog, click Next.

14 In the Payment Pages dialog, click Next.

15 In the Form Layout dialog, ensure that the Reformat Form optionis cleared and click Finish.

The form is updated with the new details.

16 Preview the page in your browser.

Starting with empty picture frames for your images makesit very easy to create image thumbnails that all have the samedimensions, without changing the aspect ratio of the picturesthey contain. For more information about using empty pictureframes, see the Pictures tutorial.


Now that you have two objects in place, its easy to add the rest of yourproduct list.

17 Simply repeat the previous stepsto insert a new page for eachimage thumbnail, replacing theimage and editing thee-commerce form asrequired.

18 When youve added all ofyour pages, preview andtest your e-commerce sitein your web browser.

Your finished page shouldlook something likeours.

Congratulations, youvecreated your firste-commerce website!We hope youve enjoyedthe exercise and wishyou every success inyour e-commerceventures.

If you also workedthrough the othertutorials, you shouldby now be feelingvery comfortablewith WebPlus toolsand well-equipped to startworking on your own WebPlus creationswhether their purpose is personal or for profit!

Search Engine Optimization

To learn about how you can attract visitors toyour site (so that they can start purchasingthose products!), see the Search Enginestutorial, available in PDF format from theLearning Zone.

Documents

ECommerce.pdf