Entrance Gate

Free!
Download
Entrance Gate
Description

Live Example

Here is a live example, using the built-in 21+ checker.

Installation

Unzip and place the EntranceGate directory in your site/addons directory.

Use the tags below on any page(s) you wish to request confirmation before allowing access.

Toggle the switch in the Addons > Entrance Gate > Active to start gating users.

Usage

This plugin includes two default tags to get you up and running quickly, as well as a general tag so that you can customize your confirmation modal.

"Yes" confirmations are stored in the session and only need to be made once per session.

Default 21+ Age Checker

Simply add the tag {{ entrance_gate:over21 }} to any layout or page to check if a user is over 21 before granting access.

Default Cookie Approval

Using {{ entrance_gate:cookies }} will load a plugin-default modal requesting approval of site-cookies.

Custom Confirmation Modal

You may use the generic tag to design any confirmation modal you want.

Add id="ConfirmGateYes" to the button/link/element you wish to use for the "yes" action, and id="ConfirmGateNo" to any button/link/element for the "no" action. The tag includes Javascript that looks for 'onclick' events for an element with each of those IDs.

Example:

Adding the following to the layouts/default file will include the check on every page using the default layout:

{{ entrance_gate }}
    <div style="padding: 2em; max-width: 550px; background-color: #fff;">
        <h4 style="text-align: center;">
            Do you want to enter?
        </h4>
        <p style="text-align: center;">
            This is a custom box.
        </p>
        <div style="margin-top: 2em; text-align: center;">
            <button id="ConfirmGateYes" style="background-color: #eee; border: 2px solid #eee; padding: 0.25em 1.5em;">
                Yes
            </button>
            <button id="ConfirmGateNo" style="background-color: #fff; border: 2px solid #eee; padding: 0.25em 1.5em;">
                No
            </button>
        </div>
    </div>
{{ /entrance_gate }}

Notes

For those making a custom form, there are a few things to note.

The {{ entrance_gate }} tag will:

  • apply a full-screen wrapper that will grey-out the background
  • vertically and horizontally center the div included inside the tag using flexbox

Important Links
Details
Released April 25, 2019
Downloads 83
Requires Statamic 2

IPX

Austin-based digital team crafting functional tools and unique digital experiences.

More by IPX

Similar Addons

See All
Simplifies managing webhooks from third-party services

Captain Hook

by LionsMouth Digital in Utility, API
Simplifies managing webhooks from third-party services
Behold! Easily unleash the power of Laravel Mix's version functionality within your Statamic site!

Statamic Mix

by Ben Furfie in CSS, JavaScript, Tag, Utility
Behold! Easily unleash the power of Laravel Mix's version functionality within your Statamic site!
Manage and configure XML Sitemaps for your Statamic site with support for aliases, automatic cache management and pagination. $19

XML Sitemaps

by Benji Hughes in Enhancement, Utility
Manage and configure XML Sitemaps for your Statamic site with support for aliases, automatic cache management and pagination.
Embed GitHub Gists into your Statamic entries

Gist Embeds

by Duncan McClean in Tag
Embed GitHub Gists into your Statamic entries