This library provides custom web components that allow developers to embed Thirstie powered e-commerce user experiences.
The library can be installed using a script tag for in-browser loading, or via npm.
CDN: https://js.thirstie.cloud/ecomm-vue/latest
NPM: npm install @thirstie/ecomm-vue
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.
Assuming that you are using npm to load the Thirstie packages, your initialization script will look this:
index.js:
import { initApp } from '@thirstie/ecomm-vue';
import appConfig from './.env.json';
const apiKey = appConfig.APIKEY;
const mapsKey = appConfig.MAPSKEY;
const thirstieAppConfig = {
APIKEY: apiKey,
MAPSKEY: mapsKey,
primaryColor: '#cd0136',
secondaryColor: '#ffffff',
brandLogo: 'https://media.thirstie.cloud/content/mV7GCVpZMNumt8PfhKVj5D.png'
};
initApp(thirstieAppConfig);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:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Thirstie Demo</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header class="header-container"> <!-- Your standard navigation bar header -->
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-nav">
My Brand Name
</div>
</div>
<div class="navbar-cta">
<!-- Thirstie Custom component placing the shopping cart icon in the header -->
<!-- th-cart-nave also enables a slide in drawer to preview shopping cart details -->
<th-cart-nav></th-cart-nav>
</div>
</nav>
<!-- Add a component to allow the user to specify their zip code in order to determine product availability -->
<th-zipcode-check></th-zipcode-check>
</header>
<div class="wrapper">
<div class="content">
<!-- handleSelect callback will control routing to PDP page-->
<th-plp @pl-select="handleSelect"></th-plp>
</div>
<!-- Install age gate modal -->
<th-agegate-modal type="dob">
<h2 slot="header">Welcome! Can we see some ID?</h2>
<div slot="additional-msg">
<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>
</div>
<div slot="fail-msg">You must 21 or older to enter. Click <a href="https://responsibility.org" target="_blank">here</a></div>
</th-agegate-modal>
</div>
<script src="./index.js" type="module"></script>
</body>
</html>