Beginning Dreamweaver MX 1002004 [Electronic resources] نسخه متنی

Adding the PayPal Shopping Cart Extension

Once you find an extension that meets your needs, you need to add it to your Web page. In the rest of this chapter, you’re going to download an e-commerce extension and add it to the MediaEdge site. Specifically, this extension lets you accept payments from users through the PayPal online service.

There are actually quite a few PayPal extensions in the Dreamweaver Exchange. The extension that you are going to use,

PayPal304.mxp written by WebAssist.com, was created for Dreamweaver MX and uses Dreamweaver MX’s Document Object Model to add itself to the Insert menu of the application. This extension has been incorporated into a more robust WebAssist.com eCart extension that is currently available on the Macromedia Exchange for $129.99, but you are going to simply download the free extension from WebAssist’s Web site instead.

Try It Out Incorporating E-commerce Functionality in the Building Block Structure

Go to the Macromedia Exchange (

www.macromedia.com/exchange ). If you haven’t created an account here before, do so now (it’s free).





Select the Commerce category in the Dreamweaver drop-down list on the main page of the Exchange. Select the WebAssist.com eCart extension (see Figure 18-9).





Figure 18-9


After the information page loads, click the Buy button under the extension’s title, as shown in Figure 18-10.




Figure 18-10






Alternatively, you could select More from the extension’s drop-down list on the main page of the Exchange, which returns a list of all Dreamweaver extensions. You can then refine the list by entering PayPal in the Search field and browse to the WebAssist.com eCart extension and click Buy.





After clicking the Buy button, your browser opens to the URL: www.Webassist.com/Products/ ProductDetails.asp?PID=19&RID=71. Note that this is the more robust $129.99 extension. To get the free component that we are going to use, change the Product ID (PID) in the URL from

19 to 18. When you are done, hit Enter and you will now see the free PayPal extension available for download. Notice that, after you have changed the variable value in the URL, the version of the Toolkit should say version 3.0.4 (see Figure 18-11)





Click the Get Now button for the WA PayPal eCommerce Toolkit.




Figure 18-11





You are directed to a user agreement; click Accept. Next, enter your name and e-mail address and click on the Get Software Now button. Last, you will be directed to a secure checkout page where you can download the extension. Click

PayPal304.mxp and download the extension to your default Downloaded Extensions folder (see Figure 18-12.)




Figure 18-12






Open the

blockMain.asp page from your root folder in Dreamweaver. You are going to use the same functionality as you added before, but you are now going to add a Buy option beneath each item title that links to PayPal. Save this file as blockMainPayPal.asp.





Open the Macromedia Extension Manager (Commands→Manage Extensions) or open the Extension Manager directly from the Programs folder. Make sure the drop-down list is set to Dreamweaver MX 2004 and click the Install New Extension button. Browse to the

PayPal304.mxp file.

Accept the license agreement and click OK. You should now see the extension appear in your list of Dreamweaver MX 2004 extensions, as shown in Figure 18-13.




Figure 18-13






You will next be instructed to close and restart Dreamweaver. This is so the extension can be included in the Insert bar within Dreamweaver. When you reopen Dreamweaver, you should now see a PayPal 1SIP option in the Insert menu drop-down list (see Figure 18-14). Select that option and you will see four e-commerce icons appear in the insert menu.





Figure 18-14

How It Works

Now that you have installed the PayPal extension, it resides in the Dreamweaver MX 2004 Programs folder and appears in the Insert menu of Dreamweaver until you remove it. After you install several extensions and have gained an understanding of how to use them, you will find that they speed up development time tremendously. You will also find that you can add a new tier of functionality to your work, which would have seemed arduous or impossible in the past.

The next thing you need to do is to add a column to your Content table to hold the prices for each item.

Try It Out Adding Values to the Database Content Table

Open the

MediaEdge.mdb database in Microsoft Access and open the Content table.





Right-click the Image column and choose Insert Column from the drop-down menu. Double- click the title for the newly added field and change the name to Price.





For each of the Items One through Five, add the value 5 in the Price column. Save and close the Content table.





Add the page to the Sections table so the prices show up next to the descriptions of the items. Open the Sections table and change each of the items’ Content_Page entries from

blockMain.asp to blockMainPayPal.asp, as shown in Figure 18-15. (You will create the

blockMainPayPal.asp page next.) Save and close the Sections table.




Figure 18-15

How It Works

By adding a Price column to the database you will be able to assign dollar figures to your items of content. In this case you assigned your fictitious items, Item One through Item Five, the value of $5. You also changed the page that references these items from

blockMain.asp to

blockMainPayPal.asp .

Now that you’ve made your changes to the database, you need to sign up for a PayPal business account. After that, you will create the

blockMainPayPal.asp page, which pulls not just the items, but now the dollar figures from the database and passes those values to PayPal when a user selects one of your items to buy.

Try It Out Sign Up for a PayPal Business Account

Before you can use the WebAssist extension you have to sign up for a PayPal business account to sell items on your site through PayPal. You can do this fairly easily on PayPal’s Web site.

If you don’t want to sign up for a PayPal account, then just follow along with these steps to see how easy it is to implement the functionality. If you already have a PayPal account, you can skip this step.

Open your browser to PayPal’s Web site,

www.paypal.com . Click the Sign Up button in the top right corner of the page, click the Business Account option, and select your country from the drop-down list. Click Continue.





Enter your information in the form to sign up. There should be three steps to complete in process (see Figure 18-16).




Figure 18-16

How It Works

By signing up for a PayPal business account you will be able to accept money over the Web. PayPal has a secure service that handles the transactions and then e-mails you when an item has been purchased. PayPal also has shopping cart functionality, which allows users to select multiple items to purchase and then pay for them all at the same time.

After you sign up for a PayPal business account you will be sent a confirmation e-mail that you must respond to and type in your password to verify your account. After you have done that you are ready to start accepting money online and can complete the next exercise.

Try It Out Adding the E-commerce Functionality

Now you will need to switch back over to Dreamweaver, where you will add a button to the item to allow a user to purchase it using PayPal. Start by allowing the user to purchase one item and then see how you would go about allowing the user to purchase multiple items with a shopping cart.

Switch to Design view. Add a soft return after the dynamic title you previously created (press Shift+Enter) and select the PayPal 1SIP option in the Insert bar’s drop-down menu, if you have not already done so.





Click the Single Item Purchase (PayPal 1SIP) button, as shown in Figure 18-17, and the WebAssist eCommerce wizard will pop up on-screen. Complete Steps 1–6 in the wizard to add the e-commerce button beneath the title, as follows:




Figure 18-17





Step 1 Enter the e-mail address that you used to set up your PayPal account.


Step 2 Select the appearance of the button that you want for your site. For now, just click Next and use the initially selected button.

Step 3 Enter 111 for the name of the item, enter 222 for the ID/number, and enter 333 for the price of the item. You are going to make these numbers dynamic in Code view, so you are adding arbitrary strings now that you can later search for. Select your currency type and leave the multiple item selection unselected. When you’re done, the dialog box should look like Figure 18-18.








Figure 18-18





Step 4 Enter in 4.95 for the dollar amount of each of the base shipping, extra shipping, and handling for the item. In the future, you will have to change these values depending on what item you’re selling.


Step 5 If you have a secure portion of your server,

https: , and you want to add a logo to the payment page, add that logo here.

Step 6 If you want to redirect customers to specific pages for successful completion or cancellation, create them and point to them here.








Review the information and click the Finish button. When you are done, you should see the PayPal button appear beneath the title on the page, as shown in Figure 18-19.




Figure 18-19

How It Works

At this point you have finished the steps necessary to add a Buy Now button to the page. The form that contains the button has all the information to pass the item name, ID, and price to the PayPal account that you set up. If you were to run and test this page now for Item One, for instance, clicking the Buy Now button would pass values to PayPal and you could pay for the item. The only problem is that you would be buying an item named 111 for $333. You had to enter generic numbers such as 111, 222, and 333 because the wizard would not have allowed you to enter the ASP strings to make these values dynamic. You can now replace those values in the code to include your dynamic content. You are going to add a dynamic name, ID, and price.

Try It Out Adding Dynamic Values

Switch to Code view and perform a find and replace on the following:

Replace

111 with this:

<%=(Content.Fields.Item("Title_Main").Value)%> 




Replace

222 with this:

<%=(Content.Fields.Item("ID").Value)%> 




Replace

333 with this:

<%=(Content.Fields.Item("Price").Value)%> 








Since you recently added Price to the database, you are going to need to make sure you add it to the query of the database so that you have that information along with the title and ID for this item.

While still in Code view, find the SQL query in the document and add

Price to the list. When you are finished, the query should look like this:

Content.Source = "SELECT ID, Price, Title_Main, Content_Main, Image_Main, 
Image_Width_Main, Image_Height_Main, Vertical_Space_Main, Horizontal_Space_Main,
Background_Main FROM Content, Section_Content WHERE ID = Content_ID AND Section_ID
= "+ Section__MMColParam.replace(/’/g, "‘’") + ";

When you are finished you should be able to test your page, click on any of the items, and have the payment button appear beneath the title for that item, as shown in Figure 18-20.

Figure 18-20

How It Works

Now that you have switched the values of 111, 222, and 333 with dynamic values from the database, and changed your SQL statement, it makes a little more sense to test the page and click the Buy Now button. At this point, for instance, if you select Item One and click the Buy Now button, you would be purchasing Item One for $5. This is definitely a better deal then 111 for $333, but go ahead and create some items of your own to sell after you complete this chapter.

By default the form that appears in the main viewing frame of your site when a user clicks the Buy Now button replaces the current page’s content. If your Building Block structure has a larger main frame than the sample files, this might be absolutely ideal for you. The user can purchase the item without leaving your frame structure. You might feel that opening the form in the frame is a bit restricting, in which case you can always choose to open the form in a new browser window.

Try It Out Opening PayPal in a New Browser Window

It is actually quite simple to get the form to appear in a new window. You simply need to add the line in the

form field in

blockMainPayPal.asp to open in a new window as opposed to the current window.

Add

target=”_blank” to the starting <

form > tag. When you are finished it should look like this:

<form action="https://www.paypal.com/cgi-bin/Webscr" target="_blank" 
  method="post"> 

Now when you click the Buy Now button, a new browser window is launched which can be expanded to fill the screen, as shown in Figure 18-21. Our usual policy is not to open new windows, if possible, in an effort to keep the user’s focus in one place. In this case, however, it would be much more troublesome to fill out the form in the small space of the main viewing area. It makes more sense to open the new window so the user has plenty of room to see the entire PayPal screen.

Figure 18-21

How It Works

You added a Price field in the Content table to store your prices. The more types of data you store in the Content table, the more you should redesign your database to contain the different types. Otherwise, you will have a lot of content data for which price is meaningless, such as news items. To do this you could create a ContentSaleItems table, or a ContentNews table, and so on. In the additional content files you create, such as blockMainPayPal, you would create the recordset from the ContentSaleItems table as opposed to the Content table.

When adding PayPal functionality to your page, you used the single item purchase button. In fact, all of the buttons in the Insert menu for the PayPal extension more or less perform the same task. The slight difference is that they send slightly different values to the WebAssist wizard. If, for instance, you had selected the button to add an item to the cart as opposed to a single item purchase, the user would be shown a shopping cart before checking out, as shown in Figure 18-22. This way they can purchase multiple items from your site at the same time.

Figure 18-22

PayPal, on its end, creates an acceptance page that knows what information to display based on particular variables that are passed to that page. In the case of the WebAssist wizard, it takes care of all the variables that need to be sent; you simply fill out the form.

When the user clicks on the button to submit the form, those variables are sent to PayPal’s Web site to an HTTPS server. An HTTPS server is different from a typical HTTP server in that all information passed is encrypted. In this fashion, PayPal can accept a user’s credit card details and not worry much about hack- ers trying to view the credit card numbers as they are passed from the Web page to the server. When you open PayPal’s Web site to pay for an item, the browser should show you a security alert to let you know you are entering a secure site.

PayPal provides a great way for developers to add e-commerce functionality to their sites without having to contract with a local bank and monitor all of the online banking transactions. PayPal makes it really easy because they send you an e-mail when the user has paid, so you can ship good ol’ Item Three out the door with confidence.