E-commerce integration: Part 4 -Using multiple ‘Add to cart’ buttons on a page

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 ‘Add to cart’ buttons on a page

As we move toward more complicated scenarios, you may find you want multiple ‘add to cart’ buttons in your gallery. The Gallery Server Pro E-Commerce demo shows this scenario:

This requires setting up two buttons in PayPal, each with the desired prices and options. Then you copy the embed code for each button into the UI template, tweaking it to work around the forms issue we discussed earlier and assigning the title and description:

Like with the other solutions, we need some JavaScript to handle the form submission when the user clicks one of the add to cart buttons. However, we have the added complication of two sets of form elements—one for each button. If we just submit the form, PayPal will receive data for two buttons and won’t know which one is the real one. So our script removes unnecessary form elements before submitted it to PayPal:

var bindAddToCartEvent = function() {
 $('.btnAddToCart').click(function(e) {
  $('#viewcart input[type=hidden]').remove();
  var $el;
  if (this.id == 'addPrintToCart')
    $el = $('#framedPrintContainer');
  else
    $el = $('#printContainer');
    
  $el.css({
    "width": $el.css('width'),
    "height": $el.css('height')
    })
    .find('*').remove().end().addClass('gsp_wait_center');

  $(e.target).after("");

  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();

There is also a bit of CSS work to prevent the UI from jumping around when the form elements are removed. The end result is that when one of the add to cart buttons is clicked, only the relevant data is sent to PayPal.

We need a similar solution for handling the view cart button in the header. The HTML is unchanged from our earlier examples, but the JavaScript removes the form tags for both add to cart buttons in the click event handler:

$('#{{:Settings.ClientId}}_viewCart').click(function() {
 var f = $('form')[0];
  var $el = $('#framedPrintContainer, #printContainer');

  $el.css({
    "width": $el.css('width'),
    "height": $el.css('height')
    })
    .find('*').remove().end().addClass('gsp_wait_center');

 f.action = 'https://www.paypal.com/cgi-bin/webscr';
 f.submit();
 return false;
});

And there we have it. An e-commerce gallery with multiple ‘add to cart’ buttons on the page.