shopar-plugin 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -0
- package/README.md +106 -0
- package/dist/env/studio2.hdr +0 -0
- package/dist/shopar-deepar.js +1 -0
- package/dist/shopar-plugin.d.ts +68 -0
- package/dist/shopar-plugin.esm.js +1 -0
- package/dist/shopar-plugin.js +1 -0
- package/dist/shopar-three.js +6 -0
- package/package.json +54 -0
package/LICENSE
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
https://developer.deepar.ai/customer-agreement
|
package/README.md
ADDED
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
# ShopAR Plugin
|
|
2
|
+
|
|
3
|
+
Plugin for the Web that seamlessly integrates into your webpage to create embedded virtual try-on and 3D preview capabilities.
|
|
4
|
+
|
|
5
|
+
Powered and developed by DeepAR.
|
|
6
|
+
|
|
7
|
+
## Table of contents
|
|
8
|
+
|
|
9
|
+
- [ShopAR Plugin](#shopar-plugin)
|
|
10
|
+
- [Table of contents](#table-of-contents)
|
|
11
|
+
- [Getting started](#getting-started)
|
|
12
|
+
- [Installation](#installation)
|
|
13
|
+
- [via Script tag](#via-script-tag)
|
|
14
|
+
- [via NPM](#via-npm)
|
|
15
|
+
- [Usage](#usage)
|
|
16
|
+
- [API](#api)
|
|
17
|
+
- [ShopAR.plugin.setup(options)](#shoparpluginsetupoptions)
|
|
18
|
+
- [License](#license)
|
|
19
|
+
|
|
20
|
+
## Getting started
|
|
21
|
+
|
|
22
|
+
Create an account in the [ShopAR Dashboard](https://dashboard.shopar.ai).
|
|
23
|
+
|
|
24
|
+
Add some models to your account. Make sure the models' client IDs match the product IDs on your website.
|
|
25
|
+
|
|
26
|
+
## Installation
|
|
27
|
+
|
|
28
|
+
There are two distinct ways of integrating the plugin: via Script tag and via NPM.
|
|
29
|
+
|
|
30
|
+
### via Script tag
|
|
31
|
+
|
|
32
|
+
Add the following script to your HTML.
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
<script src="https://cdn.jsdelivr.net/npm/shopar-plugin/shopar-plugin.js"></script>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
It is possible to use a different CDN instead of [jsDelivr](https://www.jsdelivr.com/) (e.g. [cdnjs](https://cdnjs.com/), [unpkg](https://www.unpkg.com/)), or even a relative path if the plugin is distributed as a static asset to your app. Just make sure to set the `baseUrl` parameter accordingly (see [plugin.setup](#plugin-setup) for more details).
|
|
39
|
+
|
|
40
|
+
### via NPM
|
|
41
|
+
|
|
42
|
+
Add `shopar-plugin` to your project:
|
|
43
|
+
|
|
44
|
+
```shell
|
|
45
|
+
npm install shopar-plugin
|
|
46
|
+
# or
|
|
47
|
+
yarn add shopar-plugin
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Usage
|
|
51
|
+
|
|
52
|
+
Paste the following snippet in your HTML.
|
|
53
|
+
|
|
54
|
+
```html
|
|
55
|
+
<script>
|
|
56
|
+
ShopAR.plugin.setup({
|
|
57
|
+
apiKey: 'API_KEY',
|
|
58
|
+
sku: 'PRODUCT_ID',
|
|
59
|
+
targetElement: 'TARGET_ELEMENT',
|
|
60
|
+
});
|
|
61
|
+
</script>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
- Replace `API_KEY` with your API key. You can find it in the [ShopAR Dashboard](https://dashboard.shopar.ai).
|
|
65
|
+
- Replace `PRODUCT_ID` with the ID of the product. Make sure it matches the client ID in the [ShopAR Dashboard](https://dashboard.shopar.ai).
|
|
66
|
+
- Replace `TARGET_ELEMENT` with the HTML element you wish to embed the plugin's UI into.
|
|
67
|
+
|
|
68
|
+
To change the look-and-feel of the plugin's UI, modify the following CSS classes:
|
|
69
|
+
|
|
70
|
+
```css
|
|
71
|
+
.shopar-btn-container {
|
|
72
|
+
/* Container for the control buttons. */
|
|
73
|
+
}
|
|
74
|
+
.shopar-btn {
|
|
75
|
+
/* Control button. */
|
|
76
|
+
}
|
|
77
|
+
.shopar-btn.active {
|
|
78
|
+
/* Toggled control button. */
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## API
|
|
83
|
+
|
|
84
|
+
### ShopAR.plugin.setup(options)
|
|
85
|
+
|
|
86
|
+
This method fetches the specified product from the [ShopAR Dashboard](https://dashboard.shopar.ai) and renders the plugin's UI.
|
|
87
|
+
|
|
88
|
+
Options used for the plugin setup:
|
|
89
|
+
- `apiKey`
|
|
90
|
+
- Type: `string`
|
|
91
|
+
- API key found in the ShopAR dashboard.
|
|
92
|
+
- `sku`
|
|
93
|
+
- Type: `string`
|
|
94
|
+
- Product identifier.
|
|
95
|
+
- `targetElement`
|
|
96
|
+
- Type: `HTMLElement`
|
|
97
|
+
- The element to inflate with ShopAR UI.
|
|
98
|
+
- Its CSS position property must be either `static` or `relative`.
|
|
99
|
+
- `baseUrl` (optional)
|
|
100
|
+
- Type: `string`
|
|
101
|
+
- If provided, defines where the additional ShopAR plugin files are fetched from.
|
|
102
|
+
- Default value: `https://cdn.jsdelivr.net/npm/shopar-plugin@${version}/`
|
|
103
|
+
|
|
104
|
+
## License
|
|
105
|
+
|
|
106
|
+
Please see: https://developer.deepar.ai/customer-agreement
|
|
Binary file
|