@thirstie/ecomm-vue 0.0.5 → 0.1.0
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 +21 -0
- package/README.md +78 -4
- package/dist/thirstie-ecomm-vue.cjs +3 -0
- package/dist/thirstie-ecomm-vue.iife.js +3 -0
- package/dist/thirstie-ecomm-vue.js +18317 -0
- package/dist/thirstie-ecomm-vue.umd.cjs +3 -0
- package/package.json +17 -13
- package/dist/style.css +0 -1
- package/dist/thirstie-commerce-vue.cjs +0 -1
- package/dist/thirstie-commerce-vue.iife.js +0 -1
- package/dist/thirstie-commerce-vue.js +0 -4622
- package/dist/thirstie-commerce-vue.umd.cjs +0 -1
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 Thirstie
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,7 +1,81 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @thirstie/ecomm-vue
|
|
2
2
|
|
|
3
|
-
This
|
|
3
|
+
This library provides custom web components that allow developers to embed Thirstie powered e-commerce user experiences.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Initialization
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
The library can be installed using a script tag for in-browser loading, or via npm.
|
|
8
|
+
|
|
9
|
+
CDN: `https://js.thirstie.cloud/ecomm-vue/latest`
|
|
10
|
+
NPM: `npm install @thirstie/ecomm-vue`
|
|
11
|
+
|
|
12
|
+
Prior to using the SDK or the Thirstie API, your application will be setup on the Thirstie Platform and you will receive api keys needed to enable your brand's application.
|
|
13
|
+
|
|
14
|
+
Assuming that you are using npm to load the Thirstie packages, your initialization script will look this:
|
|
15
|
+
|
|
16
|
+
**index.js**:
|
|
17
|
+
```js
|
|
18
|
+
import { initApp } from '@thirstie/ecomm-vue';
|
|
19
|
+
import appConfig from './.env.json';
|
|
20
|
+
|
|
21
|
+
const apiKey = appConfig.APIKEY;
|
|
22
|
+
const mapsKey = appConfig.MAPSKEY;
|
|
23
|
+
|
|
24
|
+
const thirstieAppConfig = {
|
|
25
|
+
APIKEY: apiKey,
|
|
26
|
+
MAPSKEY: mapsKey,
|
|
27
|
+
primaryColor: '#cd0136',
|
|
28
|
+
secondaryColor: '#ffffff',
|
|
29
|
+
brandLogo: 'https://media.thirstie.cloud/content/mV7GCVpZMNumt8PfhKVj5D.png'
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
initApp(thirstieAppConfig);
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
The configuration settings allow you to specify your logo and brand colors (a minimal configuration is shown). Then a basic e-commerce web app can be structured as simply as:
|
|
36
|
+
|
|
37
|
+
**index.html**:
|
|
38
|
+
```html
|
|
39
|
+
<!DOCTYPE html>
|
|
40
|
+
<html>
|
|
41
|
+
<head>
|
|
42
|
+
<meta charset="UTF-8" />
|
|
43
|
+
<title>Thirstie Demo</title>
|
|
44
|
+
<link rel="stylesheet" type="text/css" href="styles.css" />
|
|
45
|
+
</head>
|
|
46
|
+
|
|
47
|
+
<body>
|
|
48
|
+
<header class="header-container"> <!-- Your standard navigation bar header -->
|
|
49
|
+
<nav class="navbar">
|
|
50
|
+
<div class="container-fluid">
|
|
51
|
+
<div class="navbar-nav">
|
|
52
|
+
My Brand Name
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="navbar-cta">
|
|
56
|
+
<!-- Thirstie Custom component placing the shopping cart icon in the header -->
|
|
57
|
+
<!-- th-cart-nave also enables a slide in drawer to preview shopping cart details -->
|
|
58
|
+
<th-cart-nav></th-cart-nav>
|
|
59
|
+
</div>
|
|
60
|
+
</nav>
|
|
61
|
+
<!-- Add a component to allow the user to specify their zip code in order to determine product availability -->
|
|
62
|
+
<th-zipcode-check></th-zipcode-check>
|
|
63
|
+
</header>
|
|
64
|
+
<div class="wrapper">
|
|
65
|
+
<div class="content">
|
|
66
|
+
<!-- handleSelect callback will control routing to PDP page-->
|
|
67
|
+
<th-plp @pl-select="handleSelect"></th-plp>
|
|
68
|
+
</div>
|
|
69
|
+
<!-- Install age gate modal -->
|
|
70
|
+
<th-agegate-modal type="dob">
|
|
71
|
+
<h2 slot="header">Welcome! Can we see some ID?</h2>
|
|
72
|
+
<div slot="additional-msg">
|
|
73
|
+
<div>For information about enjoying Alcohol RESPONSIBLY visit <a href="https://responsibility.org">responsibility.org</a> & <a href="https://responsibledrinking.org">responsibledrinking.org</a></div>
|
|
74
|
+
</div>
|
|
75
|
+
<div slot="fail-msg">You must 21 or older to enter. Click <a href="https://responsibility.org" target="_blank">here</a></div>
|
|
76
|
+
</th-agegate-modal>
|
|
77
|
+
</div>
|
|
78
|
+
<script src="./index.js" type="module"></script>
|
|
79
|
+
</body>
|
|
80
|
+
</html>
|
|
81
|
+
```
|