Skip to main content

spektrix-memberships

Overview​

The spektrix-memberships web component is used to offer your clients customers dynamic ways to purchase memberships online. This document is intended to give you an in-depth view of the functionality and configuration of the spektrix-memberships element.

Embedding the component​

Loading code​

The below snippets load javascript that define the functionality of the spektrix-memberships 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-memberships" async></script>

Note: If you are using the Spektrix Basket or Logged in widgets, this code MUST be placed after the code for the widget or you will experience issues in IE11..

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-memberships,spektrix-donate" 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, custom-domain, and membership-id to match those of your client's.

More examples can be found in the code samples page

<spektrix-memberships client-name="thetheatre" custom-domain="tickets.thetheatre.org" membership-id="1213ANPPNPTJDSBPNJDDPKRNVDCBQQRDC">

</spektrix-memberships>

Handling feedback from the component​

When memberships are added to the basket through this component, you will need to provide feedback to your users or perform other actions based on whether this happened successfully or there was an issue. The following built in functionality is provided to assist you with this.

At this point, it is worth noting that this component does not come with any client side validation but should work well with existing libraries should you wish to use them.

Success/fail containers​

If you place an element in the component that has the attribute data-success-container and one with the data-fail-container and set display: none inline on these elements, the component will display or hide these containers based on whether the membership was successfully added to the basket.

If the membership was successfully added to the basket, it will show the element containing the data-success-container attribute.

If the membership was not successfully added to the basket due to an invalid value being sent (eg - an incorrect membership ID) or there was another issue with the request (eg - membership is no longer available), it will show the element containing data-fail-container and replace it's contents with the error that came back from the server.

If the membership was not successfully added to the basket because the user is offline or something went wrong handling the request, the element containing data-fail-container is shown with the content that is stored within it.

<div data-success-container style="display: none;">Insert success content/markup here</div>
<div data-fail-container style="display: none;">Insert failure content/markup here</div>

These elements are not required for the component to function and their omission does not cause any issues. You could instead build out your own feedback using the success/fail events.

Success/fail events​

As well as success/fail containers, the component itself will emit a custom event of either "success" or "fail" which you can use to provide your own custom feedback to your users. The events also contain the object that is returned from the server which in the case of "success" will describe the users current basket and or, in the case of "fail", it will return the error object provided by the server.

To see this in action, add the below to your page to see the response in your console:

var component = document.querySelector('spektrix-memberships');
    component.addEventListener('success', function (e) {
        console.log('event', e)
    })

The forward-to configuration attribute​

The functionality of this attribute is described in full below but in short, add this attribute in with a URL and the user will be forwarded to that page upon the component successfully adding a membership to their basket.

We would recommend using this functionality with either a fail container or using the fail event to provide feedback when there are issues.

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.

An example of when you may wish to do with the spektrix-memberships component is setting the membershipId property through javascript, using a slider to change the level of membership (eg - bronze to silver to gold).

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.

membership-id​

Required: Yes
Type: String
As property: membershipId

The membershipId is the unique identifier for the membership on the client's Spektrix system. This is the membership that will be posted to the basket.

You can find the ID's for all the memberships on a client's system through our APIv3. The call you would need to make is a GET to:

https://system.spektrix.com/{clientName}/api/v3/memberships

auto-renew​

Required: Yes
Type: boolean
As property: autoRenew

forward-to​

Required: no
Type: String
As property: forwardTo

This attribute unlocks the forward-to functionality of the component. For this component, it will be triggered only once posting the membership has been confirmed as successful.

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-auto-renew​

Required: no
Type: boolean

Any input element containing this attribute will update the autoRenew property to the value it holds whenever a value is entered in to it (it listens to the native input event). The value will be taken from the value property on the element, not the attribute.

<input type="checkbox" data-auto-renew></input>

data-success-container​

Required: no, but advisable if not providing feedback for forwardTo or the "success" event Type: boolean

If you place an element in the component that has the attribute data-success-container and one with the data-fail-container and set display none inline on these elements, the component will display or hide these containers based on whether adding memberships to the basket was successful.

<div data-success-container style="display: none;">Insert success content/markup here</div>

data-fail-container​

Required: no, but advisable if not providing feedback via the "fail" event Type: boolean

If you place an element in the component that has the attribute data-success-container and one with the data-fail-container and set display none inline on these elements, the component will display or hide these containers based on whether adding memberships to the basket was successful.

<div data-fail-container style="display: none;">Insert failure content/markup here</div>
Last updated on by Theo