Simple Ecommerce with MODx Evolution and PayPal
In this post, I am going to briefly walk through the process of creating a very simple and basic ecommerce setup using MODx Evolution and PayPal. There are several MODx shopping carts that are at different stages of development and that have different features, however I haven’t extensively tested or used any of them, but I hope to eventually do some writeups on them if I get the opportunity to play with them. I would recommend that you definitely explore them too, as well as other third party services that integrate with MODx, such as Ecwid and Foxycart. For this tutorial we’re going to do something very simple, basic, and direct with PayPal being the only payment gateway offered. This tutorial is by no means exhaustive or comprehensive, but it should give a good starting point for thinking about how to integrate PayPal with your MODx website for simple sales.
The steps we will go through are:
1. Set up the template variables for the products
2. Set up the templates for the product pages
3. Add code to create Add to Cart buttons on the fly
I am working with the latest version of MODx Evolution – 1.0.4. You can extend the ideas here to Revolution but remember that the tag syntax for Revo is different than that for Evo.
In the interest of saving time and avoiding redundancy, I will not describe in detail the more general MODx things, such as installing MODx, setting up a template, how to create template variables, etc. If you need help with these or any other basic MODx topics be sure to visit the beginner tutorials section.
That said, let’s get started!
The Template Variables
The first step is to set up the template variables that we will use for our products. Our fictional store is going to sell simple products that have just a name, image, description, and price. And of course each product will need an Add to Cart button.
So I start by creating these four TVs: product_name, product_price, product_image, product_desc, and product_addToCart.
Remember to assign these to the template that is to be used for the individual product entries.
The Product page template
Now that we have our TVs, we can go ahead and set up the TV tags in the template that will display our individual products. In my case, I create a chunk and call it singleProductTpl and place this code in it:
<strong>[*product_name*]</strong> <p>[*product_image*]<p> <p>[*product_desc*]</p> <p><strong>Price: $ [*product_price*]</strong></p> <center><p>[*product_addtocart*]</p></center>
I then call this chunk into my single product page template. So now when I go to create a new product, using this template, I have these five fields to fill out. I choose to use these fields only and use the ManagerManager plugin to hide the other default fields (click on the image for a clearer view).
So now I am able to create products and display them, but I don’t have the code for the add to cart button yet.
Create Add to Cart buttons on the fly
There are two ways to add buttons to your online store – one is to go to the PayPal site and generate a button each and every time I want to add a new product, and the second is to create the buttons programmatically each time a new product is added. This second option is much easier and less taxing than the first, so we will use that.
The instructions for creating buttons programmatically are actually right in the PayPal documentation and what I’ve done is simply copied the sample code there and then modified it to suit my needs by adding the TV tags in the relevant places. The resulting code looks like this:
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <!-- Identify your business so that you can collect the payments. --> <input type="hidden" name="business" value="your_paypal@email_here"> <!-- Specify a PayPal Shopping Cart Add to Cart button. --> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="add" value="1"> <!-- Specify details about the item that buyers will purchase. --> <input type="hidden" name="item_name" value="[*product_name*]"> <input type="hidden" name="amount" value="[*product_price*]"> <input type="hidden" name="currency_code" value="USD"> <!-- Continue shopping on the main shop page --> <input type="hidden" name="shopping_url" value="[(site_url)][~2~]"> <!-- Display the payment button. --> <input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" alt="PayPal - The safer, easier way to pay online"> <img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" > </form>
Basically what this code does is generate the Add to Cart button and insert the specific values for the product from the TVs, allowing you to generate the buttons on the fly.
Save this code in a chunk, I call mine paypal_addtoCart. You can then bind this as the default value to the AddtoCart TV. So if we go back to our template variables, open the product_addtoCart TV for editing, and in the default value put in:
You can also do what I’ve done and add something like “Don’t Modify this” in the description value so that if someone else is adding products they will know to not edit this field.
NOTE: As Greg just reminded me in the comments, I could also just hide this Add To Cart field using ManagerManager like I did with the others. Thanks Greg!! 🙂
If you now go to create a resource using the single product template, you will notice the Add to Cart field is prepopulated with instruction to not modify it.
So if we now create a new product and add the relevant values, the final product display will show the Add to Cart button from PayPal.
One strategy I use is to create an empty container (unpublished) that uses the shop template and then create my product pages within that container. That way the child pages will all use the same template without me having to select it each time
You can now use Ditto to aggregate your products on a single shop page or several category pages, and add tagging and such for more views. From this point there are many other things you can do to set things up like you want, and if time permits I will write some follow ups to this tutorial to explore further ways you could refine your store.
– If you want to play with this using the PayPal developer sandbox, which is how I recommend you do it, then for the form action simply replace https://www.paypal.com/cgi-bin/webscr with https://www.sandbox.paypal.com/cgi-bin/webscr and replace your actual paypal email address with a business address that you have generated in the sandbox.
– The input type=”hidden” name=”shopping_url” value=”[(site_url)][~2~]” line sets what url the customer should be returned to if they choose to Continue Shopping. In my case 2 is my main shop page ID.
– The other fields and values are pretty self explanatory, and you can add more and create more complex options by adding more inputs and HTML variables in the PayPal button code. You can find more documentation with sample code and examples for more complex options and such at the PayPal website. For Buy Now and Add to Cart buttons and the sample code I used here, take a look at this link (shortened) – http://bit.ly/aSTffs
One thing I should mention is that because these buttons are not encrypted, they’re not completely secure, therefore you will need to secure your buttons or else validate each transaction to make sure the price paid matches the product price and that there are no fraudulent transactions. There are several options and you can read more about them at https://cms.paypal.com/us/cgi-bin/?&cmd=_render-content&content_ID=developer/e_howto_html_encryptedwebpayments
As I mentioned if time permits I may do some follow ups on refining the store, adding more product options and fields, making a more sophisticated cart, creating a module to simplify the process of adding products, using the PayPal IPN, etc. But I hope that this tutorial has given you some idea of how to get started with exploiting the flexibility of MODx and creating a simple store using MODx Template Variables and the PayPal HTML variables.
1. Paypal Documentation on integrating using HTML – https://cms.paypal.com/us/cgi-bin/?&cmd=_render-content&content_ID=developer/howto_html_landing
2. MODx Template Variables – http://svn.modxcms.com/docs/display/Evo1/Template+Variables