In my last post, I showed you how to use Zoho Creator to build an online catalog of products to sell on your Web site. With a little bit of scripting, you can even set this catalog up to automatically generate and display the appropriate PayPal “Add to cart” or “Buy Now” buttons to allow people to purchase your products online with PayPal or any major credit card. This is a great feature to include in your catalog, but what if you need to have more information available about your products? Most major online sellers have a page dedicated to every product they sell. They can do this because their product pages are rarely unique, individually-coded Web pages, but are pages automatically created by the server using information stored in a database. In this post, I will show you how to use Zoho Creator to build a similar functionality into your online catalog.

Although I could not find a reference to this on the Zoho Creator site, I did accidentally stumble across a way to link to a unique Web page for each entry in your Zoho Creator database. In fact, you can create multiple links for each entry because you can specify not only the entry ID number (assigned by Zoho), but also the specific view containing only the fields you want to show. The basic structure of the link is as follows (you will need to replace the items shown in red below with your own values):

http://creator.zoho.com/User-Name/view/View-Number/record/ID-Number

User-Name: Your unique Zoho Username (required for all of your Zoho applications)

View-Number: This is an integer value that identifies the specific view you want to display. You can easily find this number by accessing your application and switching to the view that contains the data you wish to display. The view number will be displayed in the address bar of your Web browser.

ID-Number: This is a non-configurable ID number Zoho uses to identify every record generated by Zoho Creator. It is a fairly long number. The best way to find the ID number for a specific product is to create a new view (or modify an existing view) that displays the [ID] field.

You can use Zoho’s scripting feature to automatically generate a link to this “details” page so people can view more information about the product. For example, you might want to enter the following “script” code, exchanging the variables shown in red with your own values:

“<a href=’http://creator.zoho.com/lockworld/view/8/record/” + input.ID + “‘ title=’View product details’>View product details</a>”

Once you understand how to use the unique URL for each of your products, you will see there are many possible uses for these “product details” pages.

Basic product information page: In the simplest form, this link can be used to display additional details about your product to anyone who is interested. Last week, I created a sample Zoho Creator catalog for my readers to experiment with. Anyone can add sample products to the catalog or view the sample products already listed. In addition to the PayPal “Add to cart” buttons, for every product, there will be a link to “View product details,” which will take you to the unique page for that particular product. There is a field in the database labeled “Detailed Description,” which is where you can add text (or HTML) that will not show up in the regular catalog view, but will only be visible if someone clicks on the “View product details” link.

Related applications: While doing research for this post, I came across a question in one of the Zoho Creator forums related to adding PayPal functionality into a form. Sitemanager asked if there was a way to incorporate PayPal functionality into an event registration form. This got me thinking about how you could use the unique URL for each record created in your Zoho application to create some sort of a “View/Print Registration” page for anyone who uses Zoho Creator to manage event registrations. As I explained (briefly) in my reply to sitemanager, you could use Zoho’s scripting capabilities to send a confirmation e-mail to anyone who registers for the event. This email could contain a link to the specific registration details as well as a PayPal button to allow the individual to pay for his/her registration online.

Advanced application: On my Web site, LockworldHerald.com, I am experimenting with ways to embed this unique page into my own site so people can view the product details for any item directly on my Web site. I am still in the testing phase, so please let me know if you experience any difficulties with this. I have tested it with Internet Explorer 7 and Firefox 2 running on Windows XP, but I am not sure if other browsers/OSs may have problems loading the page. What you should see, however, is a brief “loading” page when you click on a particular product in the catalog. This page will resolve into a full product details page embedded directly within my site. I have gone into much greater details on my own site than I’m explaining in this post, but feel free to contact me if you would like to know the full details (I’m planning on compiling a PDF with detailed instructions on this whole process in the future, but I’m not sure how long it will take for this to become available).

That’s all for today. Although I am planning one more post in this e-commerce series, it’s just meant to wrap up a few loose ends. I have already covered creating your own free Web site, setting up a free PayPal account, building an online catalog of products, and creating individual “product detail” or “registration confirmation” pages (this post). So, if you’ve been following along with this blog, you’ve built your own Web site and online store without spending any money! Congratulations!

I’d like to take a moment to thank Pete Thomas for picking up my last post in his Land of ZC: Exploring the world of Zoho Creator blog. As a new blogger (This post wraps up my second month writing The Web for You), I appreciate the exposure Pete’s given to my blog. Not only that, but I’ve also enjoyed reading the great tips Pete offers on “all things Zoho Creatorish.” Thanks, Pete, for the exposure and the great tips!

---

Brought to you by Lockworld Herald.

---

Once you have created your PayPal account, you can immediately start adding customized “Buy now” or “Add to cart” buttons to your Web site (you must be logged in to PayPal to access the previous links). This will allow you to begin listing your products online and accepting payments within minutes. This is quite acceptable if you have only a few products to offer and you don’t change to your prices or your shipping/handling costs. Unfortunately, every time you want to add a product, change a price, or change the shipping/handling calculations, you will have to go through the entire process all over again to re-create your buttons. Wouldn’t it be nice if there was a way to make these updates automatic?

Fortunately, there is a way to do this. It does require a little bit of coding on your part, but you do not need to have any previous knowledge of coding to make it work. I’ll walk you through the entire process, and you can have your catalog up and running within a few hours.

The key is to use some sort of content management solution to do the work for you…when you decide to change a price or add a new product, your system can automatically generate the appropriate PayPal scripts for you, making it a snap to update your online catalog.

Before you begin, there is one very important thing you need to change in your PayPal account. When you log in to PayPal, choose the “Profile” link under “My account.” In the right-hand column, you will find a link to change your “Website Payment Preferences.” You will have to turn off the option to “Block Non-encrypted Website Payment.” When this option is turned on, PayPal will scramble the codes generated for your Buy Now buttons, making them unreadable to anyone but PayPal. However, your content management system will not be able to generate encrypted codes, so you will have to allow non-encrypted codes. As far as I know, the only way to turn your Buy Now buttons into Add to Cart buttons is to turn this feature off anyway, so there’s no getting around this requirement.

Recommended content management solution: Zoho Creator

Why Zoho Creator? Because it’s free, and it allows you to create and edit an online database. This database can serve as an online content management system for your catalog. Rather than having to remember to re-build your PayPal buttons every time you add a new product or change the pricing for an existing product, this service will do it for you. Although it will take you a little while to get up and running, spending a little time on this now will save you countless hours in the future.

Zoho Creator is a very nice Web 2.0 service that allows you to build Web-based forms and applications for use on your Web site. I mentioned this service briefly in an earlier post titled “Building interactivity into your Web site.” Once you set up an account with Zoho Creator, you can start building an online database to serve as the backbone of your product catalog. You should make sure that your application is a private application, and is not shared with the public. You will be able to create a “view” of your database later that is publicly available so people can see the products you offer, but you certainly don’t want anyone but you to be able to modify the prices or details for your products.

In my next post, I will show you some secrets to create a very dynamic online catalog, but for now, let’s just keep it simple. You can include any fields you want in your catalog, but at a minimum, your new database should contain the following fields:

• Product name (Should be a short name that does not contain any HTML tags)
• Product description and/or image (Must be set to “Multi line”)
• Product price
• Shipping base price (the shipping cost for 1 item)
• Shipping additional price (the shipping cost for each additional item purchased within the same customer order)
• Handling fee (per order, not per item)
• PayPal Script field (Must be set to “Multi line”)

Once you have set up your fields, test out your application by adding a sample product or two. You will want to create a “view” of your catalog that displays the product name, description, and price, as well as the PayPal Script field. It is up to you whether you want to make your shipping/handling costs visible to the public at this point. You may want to hide these costs (they will automatically be calculated when the user adds an item to his/her cart, or you can create a separate field that will add the shipping base price and handling fee to display to your user) to simplify your online catalog. Verify that this view of the catalog is “shared” to the general public so they will be able to see it and actually buy your products. While you’re at it, double-check to be sure your actual catalog application is not shared – you don’t want people adding products to your catalog without your knowledge!

Here is the basic script you need to generate to create a PayPal Add to Cart button for each product in your database:

<form method=’post’ action=’https://www.paypal.com/cgi-bin/webscr’ target=’_blank’>
<input type=’hidden’ name=’cmd’ value=’_cart’>
<input type=’hidden’ name=’add’ value=’1′>
<input type=’hidden’ name=’business’ value=’payments@yoursite.com’>
<input type=’hidden’ name=’item_name’ value=’Baseball Hat’>
<input type=’hidden’ name=’item_number’ value=’123′> //This line is optional
<input type=’hidden’ name=’amount’ value=’5.95′>
<input type=’hidden’ name=’shipping’ value=’1.00′> //This is your “base” shipping charge
<input type=’hidden’ name=’shipping2′ value=’0.50′> //This is your per-item “additional” shipping charge
<input type=’hidden’ name=’handling’ value=’2.00′> //This is your per-order handling charge
<input type=’hidden’ name=’currency_code’ value=’USD’>
<input type=’hidden’ name=’return’ value=’http://www.yoursite.com/thankyou.htm‘> //This is the URL your customer will be sent to when the order is complete
<input type=’hidden’ name=’undefined_quantity’ value=’1′>
<input type=’image’ src=’http://images.paypal.com/en_US/i/btn/x-click-but22.gif’ border=’0′ name=’submit’ width=’87′ height=’23′ alt=’Make payments with PayPal – it is fast, free and secure!’>
</form>

The values listed in “red” above represent values that you will need to pull from your Zoho Creator catalog. I have included some comments in “green” above to help you identify the fields. These comments should be removed from the final code.

Build your PayPal Script in Zoho

This is where things get a little tricky, but bear with it and you’ll find it is well worth your efforts. You will have to create a script within Zoho Creator to automatically apply the code above to each of your products, based on the current information in the database.

Important note: Zoho Creator, by default, will remove any HTML codes (such as the code shown above) from your catalog. You can change this setting by clicking on the “XSS Settings” on the upper-right corner of your catalog (only available when you are editing the catalog, not viewing or accessing it). Ensure your XSS settings are set to Low to allow HTML tags, or your efforts will all go to waste.

Now you need to configure your Zoho account to automatically build your “Add to cart” button:

1. Go to your Zoho Creator catalog (in edit mode) and click on the “Script” link. You should see a basic scripting page that looks something like this:
   
   .
2. Click on the “On Success” link underneath “On Edit” to start writing your code. Be sure you are using the link in the “On Edit” section, rather than the “On Add” section for now. Drag a “Set variable” module into your code. When you mouse over the code you’ve added, you will see an “edit” button that will allow you to modify this code snippet. Click this button to begin editing your field.
   .
3. Select the database field that will contain the newly-generated script for your PayPal button. In the text field provided, begin entering your code line-by-line, inserting the appropriate variables where required, like this:
   .
   “<form method=’post’ action=’https://www.paypal.com/cgi-bin/webscr’><input type=’hidden’ name=’cmd’ value=’_cart’><input type=’hidden’ name=’add’ value=’1′><input type=’hidden’ name=’business’ value=‘payments@yoursite.com’>…{Continue adding the script as needed}
   .
   Be sure to start your entry with a double-quotation-mark and do not use double-quotes or line breaks within the code shown above – use only single quotes for field values. When you reach a place where you need to add your own variable (from your database), you will need to stop your entry with a double-quote, then insert a “+” sign, the appropriate field using the box above the text field to generate the appropriate values, and another “+” sign. Start the next section of the code with a double-quotation mark, like the example (see the “blue” text) below (Assumes the field containing the product name is named “itemName”):
   .
   “<form method=’post’ action=’https://www.paypal.com/cgi-bin/webscr’><input type=’hidden’ name=’cmd’ value=’_cart’><input type=’hidden’ name=’add’ value=’1′><input type=’hidden’ name=’business’ value=’payments@yoursite.com’><input type=’hidden’ name=’item_name’ value=’ ” + input.itemName + ” ‘>”
   .
   You will probably have to split this process into multiple steps, as you have a 255-character limit to the text you enter into any field. You can easily get around this by inputting the code in fragments. Let’s say the code listed just above was the first section you want to add. Drag another “Set variable” module into your code just below the first, select the appropriate field to modify (the same as the previous “set variable” block), and just include the existing value with the next segment, as follows (Assumes the database field containing the PayPal script is named “PayPal” and the other fields are named ItemNumber, Price, Shipping, Shipping2, and Handling):
   .
   input.PayPal + “<input type=’hidden’ name=’item_number’ value=’” + input.ItemNumber + “‘><input type=’hidden’ name=’amount’ value=’” + input.Price + “‘><input type=’hidden’ name=’shipping’ value=’” + input.Shipping + “‘><input type=’hidden’ name=’shipping2′ value=’” + input.Shipping2 + “‘><input type=’hidden’ name=’handling’ value=’” + input.Handling + “‘>”
   .
   Continue in this fashion until you have entered the entire script listed above, replacing all of the fixed values with the appropriate (input.{Name}) fields from your database. Be sure to save your script!
   .
4. Check your code by accessing the Zoho application and editing one of the sample entries you made. If everything is working correctly, you should see an “Add to cart” button in your catalog. Click on the button to ensure that the correct information is being passed on to PayPal to allow people to purchase your product. Click the button a few more times (or change the quantity in your cart) to verify that the “Shipping2″ (additional per-item shipping) is being calculated correctly.
   .
5. If everything is working correctly, switch to the “free-flowing script” view (upper right-hand corner of the script display) and copy the Zoho script you created. Click on the “On success” subsection of the code under the “On add” heading and paste the code into the script area (so that the code will be properly generated when you add new products, not only when you modify your existing products). Save your script.
   .
6. You are now ready to add your “real” products to your online catalog. Zoho Creator will also provide you with the codes necessary to embed your publicly-accessible catalog view right inside your Web site.
   .

Is it worth all the effort?

Only you can decide whether all this effort is necessary for your own e-commerce needs. However, before you decide that it’s not worth your time to write these codes, you might want to take a look at this sample catalog I have created. You can add your own products to this example and view the catalog to see how quickly and easily your PayPal button was generated. To prevent people from corrupting other users’ examples, I have disabled editing any of the data in the catalog, but in your own catalog it would be just as quick and easy to update a price or shipping/handling information and ensure that the PayPal script was updated accordingly without having to re-write the code yourself. Using Zoho Creator and PayPal together will give you a fully-functional e-commerce solution for your Web site absolutely free of charge. That’s probably worth a little bit of your time, if e-commerce is your goal!

That’s all for today. In my next post, I’ll show you a few simple ways you can apply some of the same Zoho scripting capabilities to enhance your online catalog even further. If you’ve been following along with this blog, you’ve learned how to create your own Web site, sign up for a PayPal account, and create an online e-commerce solution. And you’ve done it all without spending a penny! With a few more simple tricks, no one will be able to tell you aren’t paying a penny for your new high-tech Web site.

---

Brought to you by Lockworld Herald.

---

In my last post, I mentioned some simple ways you could add interactivity into your own Web site. For many people, the principle element they want to add to their site is e-commerce. Whether you started your Web site to support your home-based business, or are just looking for a hobby, online sales can be a simple way to put your Web site to work for you. Over the next few weeks, I will show you how to set up a very simple e-commerce solution for your site. And the best part is, it won’t cost you a penny to start selling your products or services online.

Do a quick Web search for e-commerce, and you will find countless services available to set up an e-commerce solution for you for a price. Many of these will charge you a set-up fee and a monthly hosting fee to use their services/solutions. These fees are quite legitimate, although they vary widely and you need to be careful about choosing the right solution for you. But if you’re reading this blog, chances are you can’t afford to purchase someone else’s e-commerce solution. In addition, many of these purchased solutions require you to have some sort of SQL server available on your Web site to manage your shopping cart. If you’ve followed along with this blog and set up your own free personal or business Web site using Microsoft Office Live Basics, however, you will not have the option to use many of these high-priced solutions.

Fortunately for us, however, PayPal offers you everything you need to create a simple, yet effective e-commerce solution for your site. When you combine this with a product-management system using Zoho Creator, you end up with your own online catalog of products and services people can buy online using their PayPal account or any major credit card. When someone buys your product(s) online, PayPal takes care of all of the credit card handling and processing, and sends you an e-mail containing the details of the sale so that you can process the order. To sign up for a free PayPal account, you just have to provide PayPal with the details of your bank account so they can deposit money into your account. Before you set up your account, however, please be sure you read all of the terms and conditions carefully. PayPal is a very reputable company, but you have to understand that they will have access to your bank account to deposit and/or withdraw funds as needed.

Although it does not cost you anything for setup fees or monthly service fees, it is important to understand that PayPal will take a percentage of every transaction they process for you, plus a small fixed fee. Although the amounts do vary depending on the number and size of your monthly transactions, PayPal will typically charge you $0.30 per transaction plus 3 percent of the total transaction. This is important to keep in mind when you are deciding on the price for your product or service. Also, please keep in mind that, in order to remain in good standing with PayPal, you need to follow up on your orders to ensure that people receive the product they pay for, or PayPal can cancel your account…and in some cases, take money out of your account to refund money to the people who paid for the product.

It will probably take you several days to get your account set up properly, so be sure to leave yourself enough time to verify that everything is set up correctly before you start selling online.

Shopping carts:
Once you set up your PayPal account, you will probably find the appropriate links to generate the code for a set of Buy Now buttons that can be included on your Web site. When your visitors click on one of these buttons, they will be taken to your (slightly) personalized PayPal checkout page to complete the order. You can use any image you want to serve as your “Buy Now” button, but PayPal offers several pre-designed (and recognizable) buttons for you to use:

Although this is nice, if your visitors/customers typically purchase multiple items, this may be an inconvenience for them when shopping on your site. When I looked around the PayPal Web site, I couldn’t find any options for creating any sort of shopping cart functionality for my site without resorting to a paid service. Fortunately, I found a link to a page within PayPal that gives you instructions for changing your “Buy Now” buttons into an “Add to cart” button using the built-in PayPal shopping cart feature. Use of this shopping cart will require your visitors to accept cookies from your site, but this is not uncommon for e-commerce sites. You can find all of the instructions you need at https://www.paypal.com/us/cgi-bin/webscr?cmd=_pdn_xclick_to_cart.

One important thing to note about using the shopping cart feature instead of the buy now feature is that you will have to provide a button on your site that allows people to view the items currently in their cart (and thus proceed to checkout). Typically, this “view cart” button (which can be the image above or your own image) should be on every page within your Web catalog near the top of the page.

Checkout process:
PayPal’s shopping cart functionality is an excellent feature for your site, and is certainly worth the price (free is always good). There are two minor inconveniences to be aware of, however. The first, and most important, is that it can be difficult for non-PayPal customers to figure out how to purchase the product with their credit cards. In the shopping cart, there is a large, prominent area for PayPal customers to enter their login information to purchase your product through their PayPal account. Unfortunately, it is more difficult to notice the small link near the bottom left-hand side of the checkout page that they can use to purchase your product with their credit card:

Don’t have a PayPal account?
Use your credit card or bank account (where available). Continue

The other minor inconvenience with the PayPal shopping cart is that you have only a few options for customizing the checkout pages. You can add your own custom logo to match your Web site, and you can customize the background color for the page, but you can’t make any other changes to the styles used.

Neither of these issues should pose a real problem for you, although you may want to give people a head’s up about the link to checkout with a credit card instead of a PayPal account. However, it is good to know about both of these issues.

That’s all for today. I hope this is enough to get you started with your own PayPal account to use on your Web site. Next week, I’ll show you how to use Zoho Creator to create an online catalog of products/services offered on your site, and set up this catalog to automatically create the appropriate PayPal “add to cart” or “buy now” buttons to each item in the catalog based on the price you specify in the database. This makes it easy to change prices without having to re-code all of your PayPal buttons. Using Zoho Creator (or some other sort of content management system) allows you to quickly and easily change the details, price, or availability of the product without having to re-write any of your Web pages.

If you want to see how any of this works in practice, you can take a look at my Web site, Lockworld Herald, to view an example. I have set this up as an example and testing area, so I only have one product currently available, but you can see how your visitors might navigate between your catalog and individual products, and how they can add items to their cart and/or complete the checkout process. Although this is set up as an example, it is a fully-functional e-commerce site, and all transactions are final!

---

Brought to you by Lockworld Herald.

---