Interstitial pop-ups in Plone

Welcome

• Plone New York City Users Group, Founded in 2007 by Robert Burgoyne of True Blade Systems, Inc.
  
• Monthly Meetings on the 2nd Wednesdays of the month at 7pm
  
• Provide useful educational material and discussion to Plone users in the NYC area
• Trying to reach out to a broader audience now via WebEx

We Need Presenters

• New Presenters welcome, please contact me via www.trueblade.com or call me on +1.212.542.3144
• Our assistant Abby Bougher is on WebEx with us now and available to help if you have any questions

Why Interstitial Web Pages?

• They're useful for:
• Agreement to a Website's Terms of Service
• Disclaimers
• Advertisements or Special Offers or Information
• Capturing User Information

Why Interstitial Web Pages? (continued)

• In addition, website login pages and introductory pages which precede and explain subsequent content are other suitable uses for interstitial web pages.
• Let's turn the meeting over to Eric Smith
  

Technical Requirements

• Display the pop-up for some pages, but not all.
• Support any content type.
• Support multiple independent pop-ups per Plone site.
• Display the pop-up only every x days.
• Pop-up can contain any content.
  

Implementation

• Whether to display the pop-up or not depends on an attribute, assigned via the ZMI. The attribute (named tb_interstitial_id) can be found using acquisition.
• The value of this attribute indicates which pop-up to display.
• Cookies are used to control displaying the pop-up. The cookie name is derived from the name of the pop-up, allowing multiple pop-ups per Plone site.
  

Displaying content on every page

• Similar to the Google Analytics code, it must be on every page.

But, can't use that because it's already taken, so we need our own slot on every page.

• Create a custom viewlet, installed with GenericSetup.
• The viewlet contains 3 things:
• Some JavaScript that deals with cookies and interaction.
• A <div> that is used as the background while the pop-up is displayed.
• A <div> for the pop-up container and its contents.

 The JavaScript is included directly in the viewlet. It could have been a separate content type, but it will "never" change, plus it needs to be generated because it uses a cookie that depends on the name of the pop-up.

Using jQuery

• On page load:
• If our cookie is set, do nothing.
• Otherwise, resize the background <div>, resize the pop-up, set the background to opaque, fade in the background, slide in the contents.
• When the user wants to exit (via clicking on the X, clicking on the background, or pressing escape), set a cookie so we won't see the pop-up again for 1 day.
• When a form is submitted, set a cookie so we won't see the pop-up again ever (well, for a long time).
  

Finding the pop-up content

• The value of the tb_interstitial_id attribute is looked up using acquisition. It can be anywhere, but is normally in the custom skin layer.
• Different attribute values can be used in different places in the site, allowing us to have multiple pop-ups per site.
• That content is included as the body of the pop-up <div>.
  

Credits

• jQuery: http://jquery.com.
• jQuery cookie plugin: http://plugins.jquery.com/project/cookie.
• Original code from http://yensdesign.com/tutorials/popupjquery, heavily modified here.