Code Samples

Basic Example

Buy a program

Quantity:

index.html
<spektrix-merchandise client-name="demo2" merchandise-item-id="11ARGCQBGHNJNMCJRHHSHSPVSKVGBMHKC">
    <div>
        <div>
            <div>
                <div>Buy a program</div>
                <label for="quantity">
                    Quantity:
                    <span data-display-quantity></span>
                    <input type="number" step="0.01" placeholder="$" name="quantity" data-custom-quantity-input>
                </label>
            </div>
                <button data-increment-quantity> + </button>
                <button data-decrement-quantity> - </button>
            <div>
                <button data-submit-merchandise>Add to basket</button>
            </div>
        </div>
    </div>
    <div>
        <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>
    </div>
</spektrix-merchandise>

SKU Variations

Buy a t-shirt

SML

Quantity

<spektrix-merchandise client-name="demo2" merchandise-item-id="4409AMVMNHQVTJSVVLDGNTPVNLDKBTHDB" id="skuComponent">
    <div>
        <div>
            <span>Buy a t-shirt</span>
        </div>
        <div id="skuSelector">
            <button data-merch-id="4408AVSSCKLCCMVCDHVPCJTJJSRMKJDBB">S</button>
            <button data-merch-id="4409AMVMNHQVTJSVVLDGNTPVNLDKBTHDB">M</button>
            <button data-merch-id="4608AGCSRQQNMQDHHSGSCRCLVSTSCQDJS">L</button>
        </div>
        <div>
            <span>Quantity</span>
        </div>
        <div>
            <button data-decrement-quantity> - </button>
            <span data-display-quantity></span>
            <button data-increment-quantity> + </button>
        </div>
        <div>
            <button data-submit-merchandise>Add to basket</button>
        </div>
    </div>
    <div>
        <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>
    </div>
</spektrix-merchandise>
<script>
// Note: This sample code will only with one instance of a spektrix-merchandise component per page. 
// For multiple components, you will need to add an eventlistener to perform the same logic
// for each instance of the component.

var skuComponent = document.getElementById('skuComponent');
var skuSelector = skuComponent.querySelector('#skuSelector');


skuSelector.addEventListener('click', e => {
    let clickedElement = e.srcElement || e.target;
    while (clickedElement) {
        let clickedElementAttributes = clickedElement.attributes
        if (clickedElementAttributes.getNamedItem('data-merch-id') !== null) {
            console.log('clicked item merchid', clickedElement.dataset.merchId)
            skuComponent.merchandiseItemId = clickedElement.dataset.merchId;
            console.log('skuComponent merchid', skuComponent.merchandiseItemId)
            return;
        }
        if (clickedElement === skuSelector) {
            return;
        }
        clickedElement = clickedElement.parentElement;
    }
});
</script>

Bundles

T-shirt and CD Bundle

Add 2 different merchandise items to your basket at once.

Quantity

<spektrix-merchandise client-name="demo2" merchandise-item-id="11ARGCQBGHNJNMCJRHHSHSPVSKVGBMHKC,808ASMTMBVJMJGDHLGSDNQQHRDHVRTBRC">
        <div>
            <div>
                <span>T-shirt and CD Bundle</span>
            </div>
            <div>
                <span>Add 2 different merchandise items to your basket at once.</span>
            </div>
            <div>
                <div>Quantity</div>
            </div>
            <div>
                <button data-decrement-quantity> - </button>
                <span data-display-quantity></span>
                <button data-increment-quantity> + </button>
            </div>
            <div>
                <button data-submit-merchandise>Add to basket</button>
            </div>
            <div >
                <div data-success-container styles="display: none">Insert success content/markup here</div>
                <div data-fail-container style="display: none">Insert failure content/markup here</div>
            </div>
        </div>
    </spektrix-merchandise>

One click Merch and Ticket Upsell

Ticket and CD Bundle

This example will add an item to your basket then immediately forward you to the choose seats page of an Event Instance. This could be incorporated in to your event listings to allow customers to add merch before the traditional upsell paths.

Quantity

<spektrix-merchandise client-name="demo2" merchandise-item-id="11ARGCQBGHNJNMCJRHHSHSPVSKVGBMHKC" forward-to="https://system.spektrix.com/demo2/website/ChooseSeats.aspx?EventInstanceId=12201">
    <div>
        <div>
            <span>Ticket and CD Bundle</span>
        </div>
        <div>
            <span>This example will add an item to your basket then immediately forward you to the choose
                seats page of an Event Instance. This could be incorporated in to your event listings
                to allow customers to add merch before the traditional upsell paths.
            </span>
        </div>
        <div>
            <span>Quantity</span>
        </div>
        <div>
            <button data-decrement-quantity> - </button>
            <span data-display-quantity></span>
            <button data-increment-quantity> + </button>
        </div>
        <div>
            <button data-submit-merchandise>Add to basket</button>
        </div>
        <div>
            <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>
        </div>
    </div>
</spektrix-merchandise>

Basic Example​

SKU Variations​

Bundles​

One click Merch and Ticket Upsell​

Basic Example

SKU Variations

Bundles

One click Merch and Ticket Upsell