# Public JS API

# ![Screenshot_2020-04-29_at_19.12.41.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/9105771723036.png) Getting started

This article contains information regarding access to Public JS API and examples of its usage.

Table of contents:

1. [ API methods](#bkmrk-api-methods)
    1. [cart: TcApiCart](#bkmrk-cart%3A-tcapicart)
    2. [localization: TcApiLocalization](#bkmrk-localization%3A-tcapil)
    3. [customer: TcApiCustomer](#bkmrk-customer%3A-tcapicusto)
2. [ Examples](#bkmrk-examples)

# ![Screenshot_2020-04-29_at_19.12.41.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/9105771723036.png) API methods

The API contains three main types of objects: **cart**, **localization** and **customer**. They are accessible through the **window.tcApi**. The object **window.tcApi** returns Promise with **TcApi** class instance.

## **cart**: TcApiCart

**getTotalValue(): Promise&lt;number&gt;** - method returns total value of cart.

**getProductsValue(): Promise&lt;number&gt;** - method returns total value of all products in cart.

**getProductsQuantity(): Promise&lt;number&gt;** - method returns quantity of products in cart (product \* quantity).

**getGiftsQuantity(): Promise&lt;number&gt;** - method returns quantity of gifts in cart.

**totalProducts(): Promise&lt;number&gt;** - method returns number of product rows in cart.

**totalGifts(): Promise&lt;number&gt;** - method returns number of gift rows in cart.

**getProductsSummary(): Promise&lt;ProductSummary&gt;** - method returns **ProductsSummary** object

```
interface ProductSummary {<br></br>totalValue: number;<br></br>productsValue: number;<br></br>totalProductsQuantity: number;<br></br>totalGiftsQuantity: number;<br></br>totalProducts: number;<br></br>totalGifts: number;<br></br>}
```

## **localization**: TcApiLocalization

**getLocale(): string** - current env locale. For example: **pl**, **cs** or **sk**.

**getCurrency(): string** - current locale currency. For example **zł** in PL environment.

**getCurrencyIso(): string** - current locale currency in **ISO 4217** standard. For example **PLN**.

**getDecimalDigits(): number** - number of decimal digits in prices.

**getMinGiftPrice(): number** - miminum price for a gift.

**getMobileRegex(): string** - mobile phone number regex pattern.

**getMobileDefaultPrefix(): string** - mobile phone number prefix. For example: **+48**.

**getMobilePlaceholder(): string** - mobile phone number placeholder. For example: **+48000000000**

**getPostalCodePlaceholder(): string** - postal code placeholder. For example: **00-000**.

**getPostalCodeRegex(): string** - postal code regex. For example: **^(\[0-9\]{2}-\[0-9\]{3})$**.

## **customer**: TcApiCustomer

**isLoggedIn(): Promise&lt;boolean&gt;** - method returns authentication state of current customer.

**getFirstName(): Promise&lt;string|null&gt;** - method returns first name of customer if logged in.

**getState(): Promise&lt;CustomerState&gt;** - method return **CustomerState** object.

```
interface CustomerState {<br></br>loggedIn: boolean;<br></br>firstName: string|null;<br></br>}
```

# ![Screenshot_2020-04-29_at_19.12.41.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/9105771723036.png) Examples

Example usage of TC public JS API in CMS Blocks and CMS Pages.

Methods returning a Promise type may return the target value with a slight delay. This fact should be taken into account when designing views to avoid potential issues related to Cumulative Layout Shift or empty HTML elements.

**Fetch and display current cart value in span element**

```
<script><br></br>window.tcApi().then(async (api) => {<br></br>if (api.localization === null) { /* Localization object can be null */<br></br>return;<br></br>}<br></br><br></br>const cartValue = await api.cart.getTotalValue(); /* Example: 14.99 */<br></br>const currency = api.localization.getCurrency(); /* Example: "zł" */<br></br>const cartValueElement = document.querySelector('.cart-value');<br></br>if (!cartValueElement) {<br></br>return;<br></br>}<br></br>cartValueElement.innerText = `${cartValue} ${currency}`;<br></br>});<br></br></script><br></br><br></br>The value of your cart is <span class="cart-value"></span>
```

**Check if user is logged in and display the appropriate banner based on their status**

```
<script><br></br>window.tcApi().then(async (api) => {<br></br>const {loggedIn, firstName} = await api.customer.getState();<br></br><br></br>const loggedElement = document.querySelector('.logged');<br></br>const unloggedElement = document.querySelector('.unlogged');<br></br>if (!loggedElement || !unloggedElement) {<br></br>return;<br></br>}<br></br><br></br>if (loggedIn && firstName) {<br></br>loggedElement.style.display = 'block';<br></br>unloggedElement.style.display = 'none';<br></br>loggedElement.innerText = `Welcome ${firstName}`;<br></br>} else {<br></br>loggedElement.style.display = 'none';<br></br>unloggedElement.style.display = 'block';<br></br>}<br></br>});<br></br></script><br></br><br></br><div class="logged" style="display: none;"></div><br></br><div class="unlogged" style="display: none;">Welcome guest!</div>
```