Overlays/Lightboxes

Site-wide/Global Popup Overlay

Elements/Concept

  • Overlay View/Page
    • HTML Code Template/Component

      Pop Overlay Component
  • Trigger - HTML Code Component added to "body-open" placeholder
    • HTML Code content contains javascript that executes on page load
    • Trigger is added to "Header" partial view's presentation details

      Trigger Header Partial Design
    • Personalization rules to include HTML Code on first visit pageload

      Personalization Rules via Presentation Details
      Peronalization Rules

Editing existing proof of concept/COVID-19 Warning Overlay

To Make Copy Edits:

Edit the HTML Code Component at this location:
/sitecore/content/Baptist/Baptist/Baptistonline/United States/home/Overlays/COVID-19/Data/Covid-19 Warning

Or in the Experience Editor for the Overlay here:
/sitecore/content/Baptist/Baptist/Baptistonline/United States/home/Overlays/COVID-19

Go to production: Make Trigger HTML Code Publishable

  1. Find this component:
    /sitecore/content/Baptist/Baptist/Baptistonline/United States/Data/Plain HTML/COVID-19 Warning Trigger
  2. Click "Unprotect Item" using link on component item's "Content" tab or on the "Configure" tab in the Content Editor's Ribbon, Click "Unprotect Item" in the Attributes column on the far right of the "Configure" pane.
  3. Make publishable in Publish restrictions:
    Publish Tab > View "Restrictions" > Check "Publishable"
  4. Click "Protect Item" in the Attributes column on the far right of the Content Editor Ribbon "Configure" Tab
  5. Publish trigger
NOTE: To disable the warning message on production, reverse the above process:
Unprotect Item, Make Item Unpublishable through Publish Restrictions, Protect Item, Publish

Reusing Trigger, with different overlay

  1. Find this component:
    /sitecore/content/Baptist/Baptist/Baptistonline/United States/Data/Plain HTML/COVID-19 Warning Trigger
  2. Click "Unprotect Item" using link on component item's "Content" tab or on the "Configure" tab in the Content Editor's Ribbon, Click "Unprotect Item" in the Attributes column on the far right of the "Configure" pane.
  3. Modify Plain HTML component's "Code" field. Change the "href" attribute to different Overlay component/page path.
    <a id="warning-message-trigger" href="/Overlays/COVID-19" class="overlay-source" style="position: absolute; text-indent: -9999">&nbsp;</a>
  4. Click "Protect Item" in the Attributes column on the far right of the Content Editor Ribbon "Configure" Tab
  5. Publish trigger