Getting Started
Most use cases will require you to load only the ecomm-vue library in order to enable the web components needed to e-commerce enable your site.
The thirstiejs-starter repo provides a simple example site illustrating the use of the SDK.
Initialization
The library can be installed using a script tag for in-browser loading, or via npm.
- CDN:
https://cdn.thirstie.cloud/js/latest/thirstie-ecomm-vue.js - 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.
Examples showing basic implementations of the Thirstie SDK are on the examples page and in the thirstiejs-starter repo on Github.
Troubleshooting
If you run into any problems getting a site running, check the Troubleshooting section.
NPM install
Assuming that you are using npm to load the Thirstie packages, a minimal script will look like this:
js
/* 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',
primaryContrastingColor: '#fff',
secondaryContrastingColor: '#000',
brandLogo: 'https://media.thirstie.cloud/content/mV7GCVpZMNumt8PfhKVj5D.png'
};
initApp(thirstieAppConfig);NOTE: The file ./.env.json must contain your API keys for the above to work. There are many ways to manage your environment variables, so please feel free to use the method that you are most comfortable with. If you use an .env.json file, then it will look like this (update the values with those provided by Thirstie):
json
{
"THAPIKEY": "<provided by Thirstie>",
"THMAPSKEY": "<Google Maps API Key>"
}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:
html
<!-- 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" class="th-fouc-block"> <!-- Your standard navigation bar header -->
<nav class="navbar">
<div class="navbar-nav">
<a href="/"><span><img src="https://media.thirstie.cloud/content/2Dt1hdN5CDkHNn7UBCQ5yH,x60f.png" /></span></a>
</div>
<div class="navbar-cta">
<!-- Thirstie Custom component placing the shopping cart icon in the header -->
<!-- th-header-nav also enables a slide in drawer to preview shopping cart details -->
<th-header-nav></th-header-nav>
</div>
<div class="navbar-title">
<a href="/simple" class="navbar-link">Alternate landing page</a>
<a href="/reposado" class="navbar-link">Reposado PDP</a>
</div>
</nav>
</header>
<!-- Adding th-fouc-block to a component will prevent a "flash of unrendered content" -->
<div class="content th-fouc-block">
<!-- Add a component to allow the user to specify their delivery address or zipcode in order to determine product availability -->
<th-availability-wrapper header-height="65">
<slot name="page-content">
<div class="page-content">
<h4 style="text-align: center;margin:0;padding:0;"><span>This site is for <strong>demonstration</strong> purposes only</span></h4>
<th-product-container></th-product-container>
</div>
</slot>
</th-availability-wrapper>
</div>
<script src="./index.js" type="module"></script>
</body>
</html>CDN Install
If you prefer to load the Thirstie libraries from a CDN, your initialization script may look like this:
js
const getCredentials = () => {
fetch("/democredentials.json").then(response => {
return response.json();
}).then(data => {
const { APIKEY, MAPSKEY, THENV } = data;
window.thirstieEcommVue.initApp({
APIKEY: APIKEY,
MAPSKEY: MAPSKEY,
environment: THENV,
experimental: false,
featureFlags: {
engraving: false
},
primaryColor: '#154D5B',
secondaryColor: '#f0a0a0',
primaryContrastingColor: '#fff',
secondaryContrastingColor: '#000',
routes: {
checkout: '/checkout.html',
shopping: '/'
},
brandLogo:
'https://media.thirstie.cloud/content/2Dt1hdN5CDkHNn7UBCQ5yH,x250f.png'
});
}).catch(err => {
console.error(err);
});
}
globalThis.__VUE_PROD_DEVTOOLS__ = false;
globalThis.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false;
globalThis.__VUE_OPTIONS_API__ = false;
getCredentials();And you can add the libraries and stylesheets as follows:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Demo</title>
<!-- BEGIN THIRSTIE SDK CODE -->
<!-- load base style sheets used by the Thirstie Ecomm library -->
<link rel="stylesheet" type="text/css" href="https://cdn.thirstie.cloud/css/latest/thirstiebase.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.thirstie.cloud/css/latest/thirstieecomm.css" />
<!-- thirstie-ecomm-vue requires the base vue package -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.thirstie.cloud/js/latest/thirstie-ecomm-vue.js"></script>
<script defer type="module">
const data = {
"APIKEY": "------", // You will replace this with the Thirstie API Key provided by your Thirstie representative
"MAPSKEY": "------", // You will replace this with the Google Maps API Key
"THENV": "sandbox" // "sandbox" allows you to develop and test without live payments. "prod" will be used to go live
}
const { APIKEY, MAPSKEY, THENV } = data;
window.thirstieEcommVue.initApp({
APIKEY: APIKEY,
MAPSKEY: MAPSKEY,
environment: THENV,
experimental: false,
featureFlags: {
engraving: false
},
primaryColor: '#154D5B',
secondaryColor: '#f0a0a0',
primaryContrastingColor: '#fff',
secondaryContrastingColor: '#000',
routes: {
checkout: '/checkout.html',
shopping: '/'
},
brandLogo:
'https://media.thirstie.cloud/content/2Dt1hdN5CDkHNn7UBCQ5yH,x250f.png'
});
globalThis.__VUE_PROD_DEVTOOLS__ = false;
globalThis.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false;
globalThis.__VUE_OPTIONS_API__ = false;
getCredentials();
</script>
<!-- END THIRSTIE SDK CODE -->
<!-- Load your site style sheets after Thirstie SDK Code-->
<link rel="stylesheet" type="text/css" href="/styles.css" />
<!-- Or specify CSS in <style /> tag -->
<style>
.header-container {
background-color: #172956;
color: #fff;
}
.content {
background-color: #f0f0f0;
color: #172956;
}
</style>
</head>
<body>
<header class="header-container" class="th-fouc-block"> <!-- Your standard navigation bar header -->
<nav class="navbar">
<div class="navbar-nav">
<a href="/"><span><img src="https://media.thirstie.cloud/content/2Dt1hdN5CDkHNn7UBCQ5yH,x60f.png" /></span></a>
</div>
<div class="navbar-cta">
<!-- Thirstie Custom component placing the shopping cart icon in the header -->
<!-- th-header-nav also enables a slide in drawer to preview shopping cart details -->
<th-header-nav></th-header-nav>
</div>
<div class="navbar-title">
<a href="/simple" class="navbar-link">Alternate landing page</a>
<a href="/reposado" class="navbar-link">Reposado PDP</a>
</div>
</nav>
</header>
<!-- Adding th-fouc-block to a component will prevent a "flash of unrendered content" -->
<div class="content th-fouc-block">
<!-- Add a component to allow the user to specify their delivery address or zipcode in order to determine product availability -->
<th-availability-wrapper header-height="65">
<slot name="page-content">
<div class="page-content">
<h4 style="text-align: center;margin:0;padding:0;"><span>This site is for <strong>demonstration</strong> purposes only</span></h4>
<th-product-container></th-product-container>
</div>
</slot>
</th-availability-wrapper>
</div>
</body>
</html>