Skip to main content

spektrix-basket-summary

Overview​

The spektrix-basket-summary web component is used to offer your clients the ability to show details about what is in the user's basket. This document is intended to give you an in-depth view of the functionality and configuration of the spektrix-basket-summary 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-basket-summary 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-basket-summary" 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-basket-summary,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-basket-summary client-name="thetheatre" custom-domain="tickets.thetheatre.org">
    <span data-basket-item-count></span> item(s)
    <br />
    Discount:
    <span data-basket-summary-currency></span>
    <span data-basket-summary-discount-total></span>
    <br />
    Total:
    <span data-basket-summary-currency></span>
    <span data-basket-summary-basket-total></span>
</spektrix-basket-summary>

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-basket-summary component is targeting elements based on their discount attribute uing CSS, to hide them if they are zero.

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.

count​

Required: No
Type: number
As property: count

The number of items in the basket. You shouldn't set this property directly, but may wish to use it to drive Javascript or CSS.

total​

Required: No
Type: number
As property: total

The total cost of all the items in the basket. You shouldn't set this property directly, but may wish to use it to drive Javascript or CSS.

discount​

Required: No
Type: number
As property: count

The amount by which the items in the basket are discounted. You shouldn't set this property directly, but may wish to use it to drive Javascript or CSS.

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-basket-item-count​

Required: no
Type: boolean

Any element containing this attribute will have its contents set to the number of items currently in the basket. This value will also be available via the count property of the spektrix-basket-summary component.

<span data-basket-item-count>4</span>

data-basket-summary-basket-total​

Required: no
Type: boolean

Any element containing this attribute will have its contents set to the total value of the items currently in the basket. This value will also be available via the total property of the spektrix-basket-summary component.

<span data-basket-summary-basket-total>80.40</span>

data-basket-summary-discount-total​

Required: no
Type: boolean

Any element containing this attribute will have its contents set to the total value by which the items currently in the basket have been discounted. This value will also be available via the discount property of the spektrix-basket-summary component.

<span data-basket-summary-discount-total>6.00</span>

data-basket-summary-currency​

Required: no
Type: boolean

Any element containing this attribute will have its contents set to the currency symbol being used by the client, e.g. the pound symbol (£) or dollar symbol ($)

<span data-basket-summary-currency>£</span>
Last updated on by Theo