PayPal Hacks. 100 Industrial-Strength Tips and Tools

< Day Day Up >

Hack 47 Specify the Size of the Shopping Cart Window

Control the size and other aspects of PayPal Shopping Cart pop-up window.

PayPal's Button Factory generates Buy Now and Shopping Cart button code based on form inputs. In the case of the Shopping Cart, the target for the form defaults to a new window named paypal. Because this is submitted by a form, the size of the window defaults to the customer's browser's default. This default size can be too large and take up the customer's entire screen, obscuring your store's pages. Or, even worse, the window can be too small, forcing your customer to scroll around to see all the information for his cart.

With some simple HTML and JavaScript, you can specify the size of the Shopping Cart window PayPal opens.

5.4.1 The Code

Here's the code for form buttons:

<form method="post" action=

                https://www.paypal.com/cgi-bin/webscr target="paypal">

<input type="hidden" name="cmd" value="_cart">

<input type="hidden" name="business" value="pay@paypalhacks.com">

<input type="hidden" name="item_name" value="PayPal Hacks">

<input type="hidden" name="amount" value="19.95">

<input type="submit" name="add" value="Add to Cart" onClick=

                "window.open('','paypal','width=780,height=500,scrollbars=yes,

                resizable=yes,status=yes')">

</form>

And here's the equivalent as a hyperlink [Hack #46] :

<a href=# onClick="window.open('https://www.paypal.com/cgi-bin/webscr?cmd=

                _cart&add=1&business=pay@paypalhacks.com&item_name=PayPal+Hacks&

                amount=19.95','paypal','width=780,height=500,scrollbars=yes,

                resizable=yes,status=yes')">Add to Cart</a>

5.4.2 Hacking the Hack

While you can experiment with the height and width to get the window size that works best for you, 780x500 is a good size, because it accommodates the size of PayPal's web pages fairly well and works with most customers' screens. Note some of the other attributes in this code:

resizable

No preset window size will be right for all your customers, so you'll most likely want to allow them to resize the window. Set the resizable attribute to no only if you want the window to be a static size. This option can be useful if the window is to accompany a static-sized web site or if it will be used with some sort of kiosk system.

scrollbars

Set this attribute to yes if you want scrollbars to be displayed in the window (when appropriate), or set it to no to disable scrolling and really frustrate your customers. Be careful not to disable scrollbars if the window is not resizable.

status

Use this setting to turn on or off the window's status bar. Turn it off for a more tidy look, or enable it if you want your customers to see the little yellow padlock that tells them the site is secure.

< Day Day Up >