E-commerce step 2 of 4: Create an easy-to-use catalog of products/services for your Web site

Automatically generate PayPal buttons for every product!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.

3 Replies to “E-commerce step 2 of 4: Create an easy-to-use catalog of products/services for your Web site”

  1. I followed all your steps, but the button is not showing up. I checked your example catalog to see if I could figure out what I was doing wrong and I noticed that your buttons are not displaying either (unless I'm looking in the wrong place). Did something in Zoho change that made it not work anymore? Do you know of a solution?

  2. Eric –

    I haven't really given this catalog a second look since I initially wrote this post in 2007, but it does appear that Zoho has made some changes, and the PayPal button is no longer showing up in the catalog displayed on their site.

    I'm a little disappointed, since even the folks over at Zoho sounded like they were pretty impressed with the idea of combining Zoho Creator with PayPal (See this post from the Zoho blog). But for whatever reason, they are now preventing the PayPal forms from displaying within Zoho's website.

    The problem seems to be on Zoho's end rather than in the steps I've outline in my post…if you try to edit any of the records in your database or in the Sample Catalog, you'll notice that the PayPal form is correctly coded. But when viewed in Zoho Creator, the buttons do not show up and if you look at the HTML output on the page, the entire form is missing.

    I don't know of any solution to get the PayPal buttons to display from Zoho's website. You might be able to contact Zoho's customer support to see if they'd be willing to fix the error, but I suspect that, for whatever reason, they made that change on purpose and will be unlikely to reverse it.

    The catalog function will work on your own website (if you have one) if you're willing to go through the (one-time) painful process of parsing the JSON feed. I have some basic instructions available here that might get you started.

    Unfortunately, I noticed that if you use the link that Zoho provides in the "More actions" => "Export data" => "JSON feed" menu option, the JSON feed is incorrectly formed. They'll give you a link something like this:

    http://creatorexport.zoho.com/lockworld/sample-catalog-function/json/View_Sample_Catalog/

    But the JSON output they provide is missing the variable declaration at the beginning (var xyz=), so I have no idea how you would use it.

    Instead, figure out the ID of the view you want to export (You can do this by editing the view you want to export in Zoho Creator, and looking for the number in the URL after your username. For example, the sample catalog's ID is 6, which I can find because when I click the "edit" link from the catalog, the URL I'm taken to is http://creator.zoho.com/lockworld/view/6/edit/).

    Once you know the ID number of the view you want to use, you can incorporate it into a link formatted like the one below:

    http://creator.zoho.com/{Your Username}/json/{The View ID}/

    For example, the sample catalog's JSON URL is:

    http://creator.zoho.com/lockworld/json/6/

    This URL will export the JSON feed correctly, and you can follow the instructions in my post to try to parse out the data to display on your website.

    Not much fun, but it should work.

    Hope this helps…sorry that things aren't as easy as they once were…

    -Lockworld Herald

    P.S. It's problems like these that really caused me to abandon this blog. Third-party services are always changing what they offer and how they offer it. I finally bit the bullet and started paying for Web hosting for my various websites. Now, instead of fiddling around with someone else's database, I have my own MySQL database that will never really change until/unless I want it to.

    I'm not trying to push anything here, and I realize that's not a viable option for many people, but thought I'd throw it out there in case it might be helpful. (OK, so maybe I'm just looking for an excuse to get on my soapbox…LOL)

Leave a Reply

Your email address will not be published. Required fields are marked *