Views tutorial: Simple product page, with Paypal button to cart

I recently added to a client's site, a product table showing a description, prices and a Paypal payment button (see Web page here). It wasn't quite as simply to do as I hoped, so I've described my method below. I make no warranty that this is the easiest, most practical or secure method, but it worked for me, and I welcome comments and criticisms.

I've uploaded to image to summarise the page layout as shown to (a) the public (b) admins with edit permissions.

Tutorial to create a very simple product page, featuring:

• A table of products with optional quantity, description, price and Paypal payment button.
• Ability for an Admin to add new products, or edit existing ones
• Custom header and footer areas, also editable by an Administrator

I make no warranty that this is the easiest, most practical or secure method, but it worked for me, and I welcome comments and criticisms.

Requirements

• Content Construction Kit (CCK) module (to define new fields (quantity, price, etc)
• Views (to define the table of products)
• Views Custom Field (to define the Paypal button)
• Insert node (to insert editable nodes into the header/footer)

Creating a new content type for purchased items

I created a new Content type (admin/content/types/add ) named "Buy" that represented the items that can be purchased. I configured it as follows:

• Title field: to be used as the main product name
• Body field: Omitted, as I wanted only a simple short text field. (On the Submission form settings, blank the Body field label in order to omit the body field)
• Using CCK, created the following new fields:
  • Item summary (text) as an optional short product description. This replaced the omitted body field above.
  • Price (decimal) to represent the product cost
  • Quantity (integer) to represent the number of items wanted. In the end I set the quantity to 1 only, as Paypal has an option to set quanity, but this cold be used to pre-set it.

Creating a new View to display a table of products

I created a new View (admin/build/views/add) of type Node, configured as follows:

• Filters (to select our products)
  • Node type: Is one of "Buy" (our new content type)
  • Node: Published or admin
• Fields (to select what to display in our table)
  • Content: Quantity 9999 (Excluded from display)
  • Node: Title Description
  • Content: Item summary: Default
  • Content: Price 9,999.99
  • Customfield: Paypal button (described below)
  • Node: Edit link (described below)
• Basic setting: Style: Table:
  • Field | Column | Separator
    Quantity | Quantity
    Description | Description | <br>
    Item summary | Description
    Price | Price
    Paypal button | Paypal button
    Node Edit link | Node Edit link
• Header/Footer: (described below)

I also added a Page display (select Page, click Add display), with settings:

• Path: buy.htm (so that my product pages appears at www.mydomain.com/buy.htm )

Creating a Paypal button

The Views Custom Field is used to create a Paypal payment button (a form with hidden fields, populated with data from other field, and a submit button. It would have been nice to use another View field with the "Rewrite" option, but Rewrite won't allow HTML form tags (apparently a security risk), even though Headers/footers do.

The Views Views Custom Field is of type Customfield: PHP code, with the following "Value":

<!--Button template defined in Views PHP customfield-->

<?php
$mytitle = $data->node_title;
$mysummary = $data->node_data_field_summary_value;
$myprice = $data->node_data_field_price_value;
?>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="amount" size="3" value=1 />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="business" value="AZ3YBNGLQARTY" />
<input type="hidden" name="item_name" value="<?php echo $mytitle; ?>" />
<input type="hidden" name="item_number" value="<?php echo $mysummary; ?>" />
<input type="hidden" name="cn" value="Notes (e.g. Do you want Gift Certificates?)" />
<input type="hidden" name="currency_code" value="GBP" />
<input type="hidden" name="bn" value="PP-ShopCartBF" />
<input type="hidden" name="no_shipping" value="2" />
<input type="hidden" name="amount" value="<?php echo $myprice; ?>" />
<input type="submit" name="submit" value="Buy" sc="cart.gif" alt="" title="Add to Paypal's shopping cart" />
<INPUT TYPE="hidden" NAME="return" value="http://www.yourdomain.com/buy.htm">
<INPUT TYPE="hidden" NAME="image_url" value="http://www.yourdomain.com/my-logo.png">
</form>
<!--End Button template -->

The Paypal button parameters are described in Paypal's document "Website Payments Standard Integration Guide" (see the section "Website Payments Standard" on Paypal's development website).

The three lines of PHP code copy (1) the product name (from the node's title), (2) the product summary (from the custom CCK field of a similar name) (3) the produce price (from the custom CCK of a similar name). You will need to change the variable names shown here, to those use by your custom CCK field.

To find the names of your CCK field, in the Views Customfield: PHP code, temporarily view the section "Rewrite the output of this field" and look for the Replacement pattern fields. They are shown in different format, eg:

[field_quantity_value] == Content: Quantity (field_quantity)
[title] == Node: Title
[field_summary_value] == Content: Item summary (field_summary
[field_price_value] == Content: Price (field_price)
[phpcode] == Customfield: PHP code

So that
[field_price_value], is converted to PHP code as: $myprice = $data->node_data_field_price_value;
.

As noted earlier, I have fixed the product quantity at "1" as the Paypal cart allows the customer to change it. If you wish to allow the customer to specify the quantity in your table of products, you'll need to make the PHP code more complex, and split the Paypal payment form (button) over the entire table row for product; I decided it wasn't worth the hassle.

Edit product links

To help Adminstrators, when they are logged-in, an Edit link appears (that does not appear to the public), allowing Admin to edit products (see attached images). The link appears only if Admins have permission to edit the product nodes. An Edit link "Label" will appear regardless, so removing a Label leaves no public trace.

Editable Headers/footers

I used the useful Insert node module to insert a node into each. For example, I create a regular page node (happened to be node #23) called "header" (the title is immaterial), and one for the footer (node/24) called "footer".

Make sure that the Insert Node filter is enabled in the appropriate input format (eg. Full HTML, or PHP). The in your Views Basic settings|Header, select the corresponding input format, and specify the node to insert using Insert node syntax, in my case:

[node:23 body]

And for the footer:

[node:24 body]

Again, to make it easier for Admins, I created yet another node, this time containing links to the Header and Footer edit addresses, set it to Unpublished so that the public would not see it, and used insert node to added it to the Views header. Now Admins have link to edit the Header and Footer, as well as all the products.

The Views header nodes module is an alternative way to assign nodes to the Views header and footer. However, I found that it is effectively applied to a specific node type, and I didn't feel like creating a one-off node type for my product table.

Alternatives methods

I checked out View theming information as an alternative for creating the Paypal payment button. While I am sure this would have provided a solution without requiring the Views Custom Field, I would needed to have created my own field template files outside of the Views user interface. As a non-programmer, this looked complicated and inelegant.

I also checked out the Content template (Contemplate) module, and found that some of its features are brilliant (such as indicating all the PHP variables that are available), but it seemed to apply specifically to whole nodes, rather provide the finesse of Views fields. Perhaps if Contemplate could be applied to views field template, it would provide a better solution.

#ends#