spektrix-login-status

Overview

The spektrix-login-status web component is used to offer your clients the ability to show if the end-user is logged in or not, and if so, under which account. This document is intended to give you an in-depth view of the functionality and configuration of the spektrix-login-status element. For a quick start guide to implementing this component, see here.

Embedding the component

Loading code

The below snippets load javascript that define the functionality of the spektrix-login-status web component. They will need to be added to your page as per your loading strategy.

Before adding the below to your website, ensure you have added the Polyfill loader described in step 1 of the quick start guide.

<script src="https://webcomponents.spektrix.com/stable/spektrix-component-loader.js" data-components="spektrix-login-status" async></script>

If you intend to use multiple components on the same page, you can load them all at once by adding them as a comma separated list in the data-components attribute.

<script src="https://webcomponents.spektrix.com/stable/spektrix-component-loader.js" data-components="spektrix-login-status,spektrix-merchandise" async></script>

Basic example

The below illustrates a basic example of how you could use the element on your page. You will need to change the client-name and custom-domain to match those of your client's.

<spektrix-login-status client-name="thetheatre" custom-domain="tickets.thetheatre.org">
    <span data-logged-in-container style="display: none;">
        <a href="https://thetheatre.org/myaccount">
            <span data-logged-in-status-customer-first-name></span>
            <span data-logged-in-status-customer-last-name></span>
            (<span data-logged-in-status-customer-email-address></span>)
        </a>
    </span>
    <span data-logged-out-container>
        <a href="https://thetheatre.org/myaccount">My account</a>
    </span>
</spektrix-login-status>

Configuration Attributes/Properties

Spektrix web component's initial state is set through attributes placed on the Web Component itself. These values are also accessible as properties on the component. The standard way of working with Web Components is to set the initial state through an attribute on the component then, if you wish to change the state later, changing the value through it's corresponding property.

The attributes and properties are presented here for completeness, but in the case of the spektrix-login-status component, it is unlikely that you would ever change these after they are initially declared in the HTML markup.

client-name

Required: Yes
Type: String
As property: clientName

The clientName is the unique identifier for the client on the Spektrix system. You'll notice them in our iframe addresses and api calls. For example, in the below iframe:

https://system.spektrix.com/thetheatre/website/eventlist.aspx

In this URL, "thetheatre" would be the clientName.

custom-domain

Required: No
Type: String
As property: customDomain

The custom domain if the client is using one (e.g. tickets.thetheatre.org). If they are not using a custom domain, this attribute can be omitted.

Attributes to place on internal markup which unlock functionality

When the component initialises, it places an event listener on itself which listens to all events which fire from child elements of itself. It will examine each event to see if the element which triggered it has one of the below data-* attributes. If it does, it will perform a predefined action described under each data-* element.

The below lists all the attributes you can add to child elements of the component to unlock it's functionality.

data-logged-in-container

Required: no
Type: boolean

Any element containing this attribute will be displayed if a user is logged into the system, and hidden if not. You can place in it whatever markup you'd like to show when a user is logged in.

<span data-logged-in-container>Place your logged-in content here</span>

data-logged-out-container

Required: no
Type: boolean

Any element containing this attribute will be displayed when no user is logged into the system, and hidden when someone is logged in. You can place in it whatever markup you'd like to show when a user is not logged in.

<span data-logged-out-container>Place your logged-out content here</span>

data-logged-in-status-customer-first-name

Required: no
Type: boolean

Any element containing this attribute will have its contents set to the user's first name, as extracted from their customer record on the client's Spektrix system. If no user is logged in, the contents of the element will be set to a blank string.

<span data-logged-in-status-customer-first-name>user's first name will appear in here</span>

data-logged-in-status-customer-last-name

Required: no
Type: boolean

Any element containing this attribute will have its contents set to the user's last name, as extracted from their customer record on the client's Spektrix system. If no user is logged in, the contents of the element will be set to a blank string.

<span data-logged-in-status-customer-last-name>user's last name will appear in here</span>

data-logged-in-status-customer-email-address

Required: no
Type: boolean

Any element containing this attribute will have its contents set to the user's email address, as extracted from their customer record on the client's Spektrix system. If no user is logged in, the contents of the element will be set to a blank string.

<span data-logged-in-status-customer-email-address>user's email address will appear in here</span>