1. Open index.tpl, and add the OpenPayPalWindowJavaScript function inside the <head>element, as shown in the following code listing. This function is used to open the PayPal shopping cart window when the visitor clicks on one of the Add to Cart buttons.
<head>
<title>{#site_title#}</title>
<link href="hatshop.css" type="text/css" rel="stylesheet" />
{literal}
<script language="JavaScript" type="text/javascript">
<!--
var PayPalWindow = null;
function OpenPayPalWindow(url) {
if ((!PayPalWindow) || PayPalWindow.closed)
// If the PayPal window doesn't exist, we open it
PayPalWindow = window.open(url, "cart", "height=300, width=500");
else {
// If the PayPal window exists, we make it show PayPalWindow.location.href = url;
PayPalWindow.focus();
} } // -->
</script>
{/literal}
</head>
■ Note Any JavaScript code you place in a Smarty template should be enclosed between {literal}
and {/literal}elements because the JavaScript code uses {and }characters, which are the default delimiters for Smarty. This way, Smarty will not parse your JavaScript code.
2. Now, add the View Cart button on the main page, just below the search box. Modify index.tpllike this:
{include file="departments_list.tpl"}
{include file="$categoriesCell"}
{include file="search_box.tpl"}
<div class="left_box" id="view_cart">
<input type="button" name="view_cart" value="View Cart"
onclick="JavaScript:OpenPayPalWindow(
"https://www.paypal.com/cgi-bin/webscr?cmd=_cart
&business=youremail@example.com
&display=1&return=www.example.com
&cancel_return=www.example.com")" />
</div>
{include file="header.tpl"}
<div id="content">
{include file="$pageContentsCell"}
</div>
■ Caution You must write the OpenPayPalWindowcall on a single line in the HTML source. We split it on multiple lines in the code snippet to make it easier to read.
3. Add the following style code to hatshop.css:
#view_cart {
text-align: center;
}
4. Add the PayPal Add to Cart button in presentation/templates/products_list.tpl, just below the product price:
<br /><br />
<input type="button" name="add_to_cart" value="Add to Cart"
onclick="{$products_list->mProducts[k].paypal}" />
</p>
{/section}
5. Add the code that creates the PayPal Add to Cartlink code at the end of the init()method in presentation/smarty_plugins/function.load_products_list.php:
for ($i = 0; $i < count($this->mProducts); $i++) {
$this->mProducts[$i]['link'] =
$url . $this->mProducts[$i]['product_id'];
// Create the PayPal link
$this->mProducts[$i]['paypal'] =
'JavaScript:OpenPayPalWindow("' . 'https://www.paypal.com/cgi-bin/webscr?' . 'cmd=_cart&business=youremail@example.com' .
'&item_name=' . rawurlencode($this->mProducts[$i]['name']) . '&amount=' .
(($this->mProducts[$i]['discounted_price'] == 0) ?
$this->mProducts[$i]['price'] :
$this->mProducts[$i]['discounted_price']) .
'&currency=USD&add=1&return=www.example.com' . '&cancel_return=www.example.com")';
} }
6. Make sure you replace youremail@example.comwith the email address you submitted when you created your PayPal account for both Add to Cart and View Cart buttons! Also, replace both instances of www.example.comwith the address of your e-commerce store. Alternatively, you can remove the return and cancel_returnvariables if you don’t want PayPal to redirect to your web site after the customer completes or cancels a payment.
■ Caution You need to use the correct email address if you want the money to get into your account!
7. Load the index.phppage in a browser, and click one of the Add to Cart buttons. You should get the PayPal shopping cart, which looks like Figure 6-2.
Figure 6-2.Integrating the PayPal shopping cart
Experiment with the PayPal shopping cart to see that it works as advertised.
How It Works: PayPal Integration
Yes, it was just that simple. Now, all visitors are potential customers! They can click the Checkout button of the PayPal shopping cart and then buy the products!
For building the PayPal call, we use Smarty’s escaping functionality to ensure the product’s name is correctly formed in case it contains nonportable characters (such as &, spaces, and so on). See more details about the escape method at http://smarty.php.net/manual/en/language.modifier.escape.php.
After a customer makes a payment on the web site, an email notification is sent to the email address registered on PayPal and also to the customer. Your PayPal account will reflect the payment, and you can view the transaction information in your account history or as a part of the history transaction log.
After PayPal confirms the payment, you can ship the products to your customer.
If you decide to use PayPal for your own web site, make sure you learn about all of its features. For example, you can teach PayPal to automatically calculate shipping costs and tax for each order.