Thursday, November 7, 2013

E-commerce integration: Part 3 - Working with multiple prices and options

This is a series of blog posts covering the e-commerce features of Gallery Server Pro.

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

Working with multiple prices and options

Different prices for different items

So far we’ve assumed all your items are a single price. But what if you have different prices for each item? Ultimately, the details depend on your payment provider. Here I’ll focus on PayPal.

PayPal requires a set price for each button. If you have a bunch of tee shirts at $20 and coffee mugs at $10, you must create two buttons in PayPal. Then, in your UI template, you have two options:

  • Create one template for each button. Keep all your $20 items in one album and your $10 items in another album. Assign the UI template having the $20 button to the album containing the $20 items. Likewise for the $10 button.
  • Use one UI template for both buttons. Edit the template’s HTML and JavaScript so that each item gets the correct hosted_button_id value. Exactly how you’d do this depends on your situation, but one way is to use an {{if}} conditional to check one of the media object’s properties and use that to decide which hosted_button_id to output.

For advanced scenarios, like when you have dozens of different prices, PayPal offers advanced shopping cart scenarios with their API. Check out the PayPal Developer site for details.

Different prices and options for each item

Another scenario is when each item has multiple prices and options. For example, a photographer might want to offer different sizes and paper styles:

sc184

PayPal lets you define these options when you set up the button. For example, here is the above button as defined in PayPal:

sc194

Based on those settings, PayPal generates this code for your website:

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
    <input type="hidden" name="cmd" value="_s-xclick"> 
    <input type="hidden" name="hosted_button_id" value="HPEYNB2JDUFRA"> 
    <table> 
    <tr><td><input type="hidden" name="on0" value="Print Size">Print Size</td></tr>
<tr><td>
<select name="os0">
     <option value="Small (8.1 in. x 8 in.)">Small (8.1 in. x 8 in.) $37.00 USD</option>
     <option value="Medium (16.2 in. x 16 in.)">Medium (16.2 in. x 16 in.) $52.00 USD</option>
     <option value="Large (24.3 in. x 24 in.)">Large (24.3 in. x 24 in.) $119.00 USD</option> 
</select> </td></tr> 
<tr><td><input type="hidden" name="on1" value="Frame Style">Frame Style</td></tr>
<tr><td>
<select name="os1">
     <option value="Matte Black">Matte Black </option>
     <option value="Butterscotch Distressed Maple">Butterscotch Distressed Maple </option>
     <option value="ECOCARE 2-inch Black">ECOCARE 2-inch Black </option>
     <option value="Arqadia Traditional Mahogany">Arqadia Traditional Mahogany </option> 
</select> </td></tr> 
</table> 
<input type="hidden" name="currency_code" value="USD"> 
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> 
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> 
</form>

Unfortunately, as we learned earlier, we can’t just copy and paste this code into our UI template since the form element would conflict with the form element already on the page. So we tweak it to get rid of the form element, add an item name, and give the button an ID that we can hook into with JavaScript.

<div id='framedPrintContainer' class='gsp_addleftmargin3'>
  <input type="hidden" name="cmd" value="_s-xclick">
  <input type="hidden" name="hosted_button_id" value="HPEYNB2JDUFRA">
  <input type='hidden' name='item_name' value='Framed Print - {{:MediaItem.Title}} (Item # {{:MediaItem.Id}})'>
  <table>
  <tr><td><input id='last_on0' type="hidden" name="on0" value="Print Size">Print Size</td></tr>
<tr><td>
<select name="os0">
     <option value="Small (8.1 in. x 8 in.)">Small (8.1 in. x 8 in.) $37.00 USD</option>
     <option value="Medium (16.2 in. x 16 in.)">Medium (16.2 in. x 16 in.) $52.00 USD</option>
     <option value="Large (24.3 in. x 24 in.)">Large (24.3 in. x 24 in.) $119.00 USD</option>
  </select> </td></tr>
  <tr><td><input type="hidden" name="on1" value="Frame Style">Frame Style</td></tr>
<tr><td>
<select name="os1">
     <option value="Matte Black">Matte Black </option>
     <option value="Butterscotch Distressed Maple">Butterscotch Distressed Maple </option>
     <option value="ECOCARE 2-inch Black">ECOCARE 2-inch Black </option>
     <option value="Arqadia Traditional Mahogany">Arqadia Traditional Mahogany </option>
  </select> </td></tr>
  </table>
  <input type="hidden" name="currency_code" value="USD">
  <p class='gsp_addleftmargin2'><input id='addFramedPrintToCart' class='btnAddToCart' type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"></p>
  <p class='gsp_fss gsp_em' style='padding-left:1em;vertical-align:middle;'>Usually ships in 3-4 days</p>
  <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
  </div>

The JavaScript is similar to what we discussed in a previous post:

var bindAddToCartEvent = function() {
 $('#addFramedPrintToCart).click(function() {
  var f = $('form')[0];
  f.action = 'https://www.paypal.com/cgi-bin/webscr';
  f.submit();
  return false;
 });
};

$('#{{:Settings.MediaClientId}}').on('next.{{:Settings.ClientId}} previous.{{:Settings.ClientId}}', function() {
 bindAddToCartEvent();
});

bindAddToCartEvent();

Now you have a shopping cart that can handle multiple prices and options for each item. When your customer picks the desired options and adds the item to the cart, they can confirm the options they selected are correct.

sc29

The details about the user’s selected options are passed along to you in the notification PayPal sends you when the purchase is complete.

In the next post we’ll discuss adding multiple ‘add to cart’ buttons to a single page.

No comments: