E-commerce integration: Part 1 - Add ‘Add to cart’ and ‘View cart’ buttons to your gallery

Last month we looked at how easy it is to integrate social media into your gallery. Today we’ll start a series of blog posts that discuss converting a gallery into an e-commerce site where you can sell physical items or access to media content.

Part 1: Add ‘Add to cart’ and ‘View cart’ buttons to your gallery
Part 2: Dealing with the PayPal nested form problem
Part 3: Working with multiple prices and options
Part 4: Using multiple ‘Add to cart’ buttons on a page
Part 5: Selling access to media content
Part 6: Adding e-commerce integration without the Enterprise Edition

In Part 1, let’s look at how you can monetize the items in your gallery by adding e-commerce integration. Users can add items to a cart, view the cart, and check out through a secure payment provider such as PayPal. You get notified of the purchase (typically an email, text, or API callback), which you can then act on to complete the transaction.

Demo e-commerce site

To get a feel for what you can do with your gallery, we set up a demo e-commerce site for you to play with:

In this demo, which simulates a professional photographer selling prints, customers can choose from several options such as type of print (framed or unframed), the size, and more. When they click the add to cart button, they see a view of their shopping cart, where they can change quantities, remove items, or start the checkout process:

The financial transaction is handled by PayPal. You don’t have to worry about SSL certificates, credit card numbers or other personal customer data. When the transaction is complete, PayPal notifies you with the relevant details.

This demo was created without editing any of the C# source code in the gallery. Only the UI templates were modified and a few settings in the site admin area. All you need are some basic HTML and JavaScript skills.

If you are a .NET developer or are able to hire one, you can download the source code and implement advanced e-commerce functionality. The sky is the limit.

And if you want to use a payment provider other than PayPal, that is fully supported.

Demo: Start selling your items online

If you have the Enterprise Edition, adding a shopping cart is easy because it includes UI templates pre-configured for e-commerce. This demo will use those templates to quickly set up your gallery. If you are using the GPL Free or GPL Pro editions you can still add a shopping cart—more on that in a subsequent post.

1. Be sure you have the Enterprise Edition by checking the Site Settings – General page as a site administrator.

   

2. Go to the UI Templates page. Select RightPane from the gallery item dropdown and ‘Default with PayPal Add To Cart Widget’ from the name dropdown. We want this template to take precedent over the default one, so click the Target Albums tab and select the root album. Then click Save.

   

3. Now select the Default template, uncheck the albums, and save.

   

4. Browse to one of your media objects and look in the right pane. There is a fully functioning add to cart button and a price showing $1.00.

   

If you click the button, the current media object is added to your cart and you are redirected to PayPal where you can review your purchase and optionally check out.

But you’re not done. The default PayPal templates that ship with Gallery Server Pro point to a PayPal account owned by Tech Info Systems, the maker of Gallery Server Pro. If a customer completes the checkout process, you won’t get the money—we do. This is probably not the behavior you want, so read on.

Link the button to your PayPal account

To connect the gallery purchases to your own PayPal account, you must update the hosted button ID that is present in the UI template. You can see it on the HTML tab when looking at the right pane template:

To get your own button ID, first log in to your PayPal account and create a button. Here I’ve created a button named Photograph with a price of $19 and shipping cost of $5.

When you save the button, PayPal displays the embed code. When your button is simple, having just a single price as seen in the above screenshot, all you need from the embed code is the hosted button ID:

Copy the button ID over the existing one in the UI template. Notice the UI template also hard codes the price at $1, so update it to reflect the price you specified in the PayPal button.

At this point you have a fully functioning e-commerce site linked to your PayPal account. Let’s review what you did:

• Turned on the PayPal template and disabled the default one for the right pane
• Changed the hosted_button_id value to point to your PayPal button
• Changed the price in the template to match the actual price

Pretty easy, right? Let’s look at adding some more functionality.

Adding a ‘View cart’ button

A standard piece of functionality in any e-commerce site is the view cart button. The Enterprise Edition includes a template for the header section that shows this button.

1. Go to the UI Templates page. Select Header from the gallery item dropdown and ‘Default with PayPal View Cart Widget’ from the name dropdown. We want this template to take precedent over the default one, so click the Target Albums tab and select the root album. Then click Save.

   

2. Now select the Default template, uncheck the albums, and save.

   

3. Now a ‘View cart’ button appears in the top right of every page as shown in the screen shot earlier. But as with the add to cart widget, the view cart button is linked to the Tech Info Systems PayPal account. We need to update it to point to your PayPal account. Log in to PayPal and view the code for one of your buttons. At the bottom of the page is a ‘Create a View Cart button’ link. Click it.

   

4. A few options will appear for customizing the button. When finished, click Create Button.

   

5. The embed code appears. If you used the default options when creating the button, all you need is the input tag with name=”encrypted”. Copy it to the clipboard.

   

6. Return to the header UI template and replace the input tag with the one you copied to your clipboard. Save.

   

Tip: If you customized the button in PayPal, you may need to edit the other HTML elements in the UI template to reflect your customized button.

That’s it! Your view cart button now points to your PayPal account.

Congratulations. Your gallery is now an e-commerce site with ‘add to cart’ and ‘view cart’ buttons with payment processing handled by PayPal. In the next few installments we’ll look at more advanced e-commerce scenarios.