ui.shipaid.com 0.2.11 → 0.2.13-beta

package/README.md

@@ -33,14 +33,53 @@ Then add the widget element where needed:
 
 <!-- With customised text -->
 <shipaid-widget>
-  <p>Loading ShipAid Protection</p>
+  <p slot="loading">Loading ShipAid Protection</p>
+</shipaid-widget>
+```
+
+#### Test Mode
+
+Sometimes, a store won't have activated their subscription before you install the widget - in this case, the widget does not display (you will notice a message in the console reflecting this). So to force the widget to show while you are installing and testing it, you can add this query param to the page URL: `shipaid-test`. 
+For example: `https://some-store.myshopify.com/cart?shipaid-text`
+
+### Slots
+
+Slots, with the syntax `slot="<slot name>"`, can be used to customise the widgets content - for example, a merchant may want to add a custom subtitle, which can be done like so:
+```html
+<shipaid-widget>
+  <p slot="subtitle">Shipping protection is required to be able to return or refunds items.</p>
 </shipaid-widget>
 ```
 
+The default content will be replaced by any slot content. You can also add inline styles to the slots, if you need to change the text color for example:
+```html
+<span slot="title" style="color: white; font-weight: 500;">Package Protection</span>
+```
+
+| Name | Description |
+|--------|-------------|
+| `loading` | Replaces the text that is shown whilst the widget is loading - I.e. fetching content from the Shopify or ShipAid API's. |
+| `title` | Replaces the default title. |
+| `subtitle` | Replaces the default subtitle. |
+
+### Props
+
+This is a list of props that can be used to configure the widget:
+
+| Prop | Description | Value/Type |
+|--------|-------------|---------|
+| `disablePolling` | Sets whether the cart should disable polling (enabled by default) - should be disabled if integrating manually with an ajax cart. | `boolean` |
+| `pollingInterval` | If polling is enabled, it sets the interval (in ms) between API updates. | `number` in milliseconds |
+| `disableRefresh ` | Sets whether the store cart should be updated when the protection item is added/removed. Add if you want to initially hide the protection product from the cart, even if it has just been added. | `boolean` |
 
 ### Events
 
-This is a list of the events emitted by the widget:
+This is a list of the events emitted by the widget. You can listen to these events like so:
+```js
+document.addEventListener('shipaid-protection-status', ({ detail }) => {
+  console.log(detail.cart) // ShopifyCart
+})
+```
 
 | Event | Description | Payload |
 |-------|-------------|---------|
@@ -49,7 +88,12 @@ This is a list of the events emitted by the widget:
 
 ### Methods
 
-This is a list of public methods that can be used to change protection settings:
+This is a list of public methods available on the widget HTMLElement that can be used to change protection settings. These can be used by querying the element:
+
+```js
+const shipAidEl = document.querySelector('shipaid-widget')
+if (shipAidEl) await shipAidEl.updateCart()
+```
 
 | Method | Description | Payload |
 |--------|-------------|---------|
@@ -58,15 +102,6 @@ This is a list of public methods that can be used to change protection settings:
 | `addProtection` | Adds the relevant protection item to cart. | |
 | `removeProtection` | Removes the protection item from the cart. | |
 
-### Props
-
-This is a list of props that can be used to configure the widget:
-
-| Prop | Description | Value/Type |
-|--------|-------------|---------|
-| `disablePolling` | Sets whether the cart should disable polling (enabled by default) - should be disabled if integrating manually with an ajax cart. | `boolean` |
-| `pollingInterval` | If polling is enabled, it sets the interval (in ms) between API updates. | `number` in milliseconds |
-| `disableRefresh ` | Sets whether the store cart should be updated when the protection item is added/removed. Add if you want to initially hide the protection product from the cart, even if it has just been added. | `boolean` |
 
 ## Contributing