Skip to content. | Skip to navigation

Personal tools
You are here: Home Knowledge Interstitial pop-ups in Plone

Interstitial pop-ups in Plone

An interstitial is a pop-up that is shown before the contents of a page. This article describes how True Blade implemented 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

Document Actions
« August 2017 »
August
SuMoTuWeThFrSa
12345
6789101112
13141516171819
20212223242526
2728293031