E-commerce integration: Part 5 - Selling access to media content

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

Selling access to media content

So far we’ve looked at setting up an e-commerce gallery to sell physical objects like tee shirts and coffee mugs. In this post we’ll look at configuring a gallery to sell access to media content like video or audio files.

There are a number of ways to do this. Which one is best depends on your business requirements and skills set. We’ll look at two approaches.

Technique #1: Duplicate the library

In this technique we create two sets of media objects—one that allows customers to browse the thumbnails and select items for purchase and another that lets paying customers view their purchases. We’ll keep things simple and create an example where we are selling access to a single video.

1. Create two albums in the gallery. In each one upload the video you want to sell access to.

   

2. Open the album named Video and make it private by clicking the lock icon in the top left. This hides the album from anonymous users. Only customers who purchased access to the video will be able to access it—more on that later.

3. Go to the UI Templates page, create a copy of the default media object template, and name it Video Store. Assign it to the album named Video Store and copy the following HTML into the HTML tab:

   <div class="gsp_mvMediaView"><div class='gsp_mvMediaHeader'>
    <div class='gsp_mvMediaHeaderRow'>
     {{if Settings.ShowMediaObjectNavigation}}
      <div class='gsp_mvMediaHeaderCell gsp_mvPrevCell' style='width:100%;'>
       <a href='{{: ~prevUrl() }}'><img src='{{:App.SkinPath}}/images/arrow-left-l.png' class='gsp_mvPrevBtn' alt='{{:Resource.MoPrev}}' title='{{:Resource.MoPrev}}' /></a>
      </div>
     {{/if}}
     {{if Settings.ShowMediaObjectNavigation}}
      <div class='gsp_mvMediaHeaderCell gsp_mvNextCell'>
       <a href='{{: ~nextUrl() }}'><img src='{{:App.SkinPath}}/images/arrow-right-l.png' class='gsp_mvNextBtn' alt='{{:Resource.MoNext}}' title='{{:Resource.MoNext}}' /></a>
      </div>
     {{/if}}
    </div>
   </div>
   
   <div class='gsp_moContainer'>
    {{:MediaItem.Views[0].HtmlOutput}}</div>
    {{if Settings.ShowMediaObjectTitle}}
     <div class='gsp_mediaObjectTitle'>{{:MediaItem.Title}}</div>
    {{/if}}
   </div>
   </div>

   

4. Update the right pane and header templates to include the add to cart button and view cart button as described in this post. Make sure the templates are applied only to the Video Store album. When you are done the Video Store album will have full e-commerce functionality. Users won’t be able to watch the videos, but they will be able to add them to their shopping cart and complete the checkout process.

   

5. When a user completes a purchase, PayPal sends you a notification with the details of the purchase. Your job is to give the customer access to the second copy of the video hidden in the album named Video. Create a role that has view permission to this album and configure a user to have access to it. Then give your customer the username and password for this account. When they log in they can now view the video:

   

Technique #2: Authentication sniffing in template

This technique uses a single set of media objects and controls access to them by checking whether the current user is logged on. Anonymous users see the thumbnail image while logged on users can view and play video and audio files. This technique works well when customers pay a set fee for access to all the media content in the gallery.

1. Add a ‘Buy Now’ button somewhere in the gallery or in a companion website. The idea is that you will give users access to the media content when they complete the checkout process.

2. Go to the UI Templates page, make a copy of the media object template, name it Video Store, and look for this text:

   <div class='gsp_moContainer'>
   {{:MediaItem.Views[MediaItem.ViewIndex].HtmlOutput}}</div>

3. Replace it with this:

   <div class='gsp_moContainer'>
   {{if User.IsAuthenticated}}
    {{:MediaItem.Views[MediaItem.ViewIndex].HtmlOutput}}
   {{else}}
    {{:MediaItem.Views[0].HtmlOutput}}
   {{/if}}
   </div>

4. When a customer purchases access to the gallery, provide them a logon account with view permission to the gallery. They will be able to view the media objects but anonymous users can see only the thumbnail image.

TIPS

• To prevent users from downloading media files, be sure to disable the download/share button on the Gallery Control Settings page.

• Remember that Gallery Server Pro does not offer full Digital Rights Management (DRM) protection. If users have the ability to view a video or audio file, they can also download it. Disabling the download button is only a minor deterrence to a motivated individual.

• The first technique favors ease of implementation over security. For a more secure solution, upload screenshots of the video files in the Video Store album rather than the actual videos.

• If the thumbnail images are too small, change their size on the Media Objects – General page. Be sure to synchronize the gallery with the ‘Overwrite thumbnails’ option selected to force the creation of new thumbnail images.