Appearance

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://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, 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>

If you run into any problems getting a site running, check the Troubleshooting section.

© 2025 Thirstie