Import
You need to import our web component module. We recommend that you do this in the head. It's important that type="module" is specified.
Example
<head>
<script type="module" async src="https://www.unpkg.com/@epigraph/spinner/dist/epigraph-spinner.min.js"></script>
</head>Usage
You can insert epigraph-spinner elements anywhere you'd like. Epigraph Spinner currently serves one purpose: to embed a spinner directly in your page.
Attributes
| Name | Type | Default Value | Description |
|---|---|---|---|
sku |
String, required |
"null" |
Insert your product code/item no. for specifying which spinner to load (from our DB). This is a reactive attribute, so changing the sku attribute will force a spinner reload. |
ua-code |
String, required |
"" |
Insert your ua-code for google analytics in order to send analytics event to your dashboard. |
Example: Spinner for all platforms
<epigraph-spinner sku="abc123" ua-code="valid-ua-code"></epigraph-spinner>Events (with example usage)
"epigraph-valid-product"
You can register to this event from <epigraph-spinner> to know when <epigraph-spinner> has successfully fetched a valid product. You can leverage this event to enable custom actions that should only happen for products with epigraph spinners.
// target <epigraph-spinner>
const eSpin = document.querySelector('epigraph-spinner');
// add the event listener
eSpin.addEventListener('epigraph-valid-product', () => {
// do something
})"epigraph-invalid-product"
You can register to this event from <epigraph-spinner> to know if <epigraph-spinner> has failed to fetch a valid product.
// target <epigraph-spinner>
const eSpin = document.querySelector('epigraph-spinner');
// add the event listener
eSpin.addEventListener('epigraph-invalid-product', () => {
// do something
})Methods
| Name | Description |
|---|---|
load() |
Call this method to set spinner loading to start immediately |