npm package: @goaffpro/affiliate-web-components
Description: Web components to display affiliate information from goaffpro to the storefront
Latest version: 0.0.7

# Goaffpro affiliate web components
This library loads the necessary components to display affiliate information on your storefront or any other HTML page

## Usage
1. Load the library via CDN. Add the following script tag just **above** `</body>` OR `</head>` tag in your theme
```html
<script type="module" src="https://unpkg.com/@goaffpro/affiliate-web-components@latest/dist/affiliate-web-components/affiliate-web-components.esm.js"></script> 
```
2. Generate a public token to be used in the webcomponents. To generate the token, open 
   Goaffpro merchant admin panel -> Settings page -> Advanced Settings tab -> Access tokens section.
   Click NEW API KEY to generate **X-GOAFFPRO-PUBLIC-TOKEN**. You will need to use the generated token in the next step
   
3. Now you are ready to use the webcomponents. See below

## Available Components

---

### Affiliate Info component
This component allows you to display affiliate related information in your store when the customer uses the affiliate's link to enter the store.

```html
<affiliate-info token="x-goaffpro-public-token" text="You are shopping with {{name}}"></affiliate-info>
```
##### Available attributes
| Attribute | Description | Mandatory|
|----|---|---|
| token | The x-goaffpro-public-token generated in Step 2 above | YES
| text | The text to display on the page. A number of custom tags are available to customize the text. See list of available tags below | YES |
| class | The CSS class to apply on text

| Tag | Description | Example
|----|---|---
name | The name of the affiliate | {{name}}
first_name | The name of the affiliate | {{first_name}}
last_name | The name of the affiliate | {{last_name}}
company_name | The name of the affiliate | {{company_name}}
coupon | The coupon code given to the affiliate | {{coupon}}

> Note: For Shopify's liquid files, please wrap the component in `raw` tag to ensure custom tags are preserved in generated HTML. eg.
```liquid
{% raw %}
<affiliate-info token="x-goaffpro-public-token" text="You are shopping with {{name}}"></affiliate-info>
{% endraw %}
```

---

### Affiliate selector component
This component allows you to display a list of affiliates for your customer to choose from when placing an order.

```html
<affiliate-selector token="x-goaffpro-public-token"></affiliate-selector>
```
##### Available attributes
| Attribute | Description | Mandatory| Default 
|----|---|---| --- |
| token | The x-goaffpro-public-token generated in Step 2 above | YES | 
| label | The affiliate property to show in the selector. See list of available properties below | NO | `name`
| fallback | The fallback property to show in case the label is not set by the affiliate | NO | `name`
| group_id | The group whose members are visible in the selector. Group ID is visible in the admin panel | No
| class | The CSS class to apply on the select element | NO 

Available properties

| Property | Description|
|---|---|
| name | The name of the affiliate
| first_name | The first name of the affiliate
| last_name | The last name of the affiliate
| company_name  | The company name of the affiliate

---

### Affiliate photo component
This component allows you to display profile photo of the affiliate as an img tag

```html
<affiliate-photo token="x-goaffpro-public-token"></affiliate-photo>
```
##### Available attributes
| Attribute | Description | Mandatory| Example | 
|----|----|----|----|
| token | The x-goaffpro-public-token generated in Step 2 above | YES |
| alt | The affiliate property to show in the selector. See list of available properties below | NO | Affiliate's photo
| fallback_src | The affiliate property to show in the selector. See list of available properties below | NO | https://via.placeholder.com/100x100
| width | Set width of the image | NO | 100
| height | Set height of the image | No | 100
| class | The CSS class to apply on the select element | NO | 
| cover | Shorthand to set css object-fit property to cover | NO | Yes
| rounded | Shorthand to set image as rounded | NO | Yes | 
| borderRadius | Shorthand to set border radius of the image | NO | 8