Public JS API

Getting started 
 This article contains information regarding access to Public JS API and examples of its usage. 
 Table of contents: 
 
 
 API methods 
 
 cart: TcApiCart 
 localization: TcApiLocalization 
 customer: TcApiCustomer 
 
 
 Examples 
 
 
 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<number> - method returns total value of cart. 
 getProductsValue(): Promise<number> - method returns total value of all products in cart. 
 getProductsQuantity(): Promise<number> - method returns quantity of products in cart (product * quantity). 
 getGiftsQuantity(): Promise<number> - method returns quantity of gifts in cart. 
 totalProducts(): Promise<number> - method returns number of product rows in cart. 
 totalGifts(): Promise<number> - method returns number of gift rows in cart. 
 getProductsSummary(): Promise<ProductSummary> - method returns ProductsSummary object 
 interface ProductSummary { totalValue: number; productsValue: number; totalProductsQuantity: number; totalGiftsQuantity: number; totalProducts: number; totalGifts: number; } 
 
 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<boolean> - method returns authentication state of current customer. 
 getFirstName(): Promise<string|null> - method returns first name of customer if logged in. 
 getState(): Promise<CustomerState> - method return CustomerState object. 
 interface CustomerState { loggedIn: boolean; firstName: string|null; } 
 
 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> window.tcApi().then(async (api) => { if (api.localization === null) { /* Localization object can be null */ return; } const cartValue = await api.cart.getTotalValue(); /* Example: 14.99 */ const currency = api.localization.getCurrency(); /* Example: "zł" */ const cartValueElement = document.querySelector('.cart-value'); if (!cartValueElement) { return; } cartValueElement.innerText = `${cartValue} ${currency}`; }); </script> 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> window.tcApi().then(async (api) => { const {loggedIn, firstName} = await api.customer.getState(); const loggedElement = document.querySelector('.logged'); const unloggedElement = document.querySelector('.unlogged'); if (!loggedElement || !unloggedElement) { return; } if (loggedIn && firstName) { loggedElement.style.display = 'block'; unloggedElement.style.display = 'none'; loggedElement.innerText = `Welcome ${firstName}`; } else { loggedElement.style.display = 'none'; unloggedElement.style.display = 'block'; } }); </script> <div class="logged" style="display: none;"></div> <div class="unlogged" style="display: none;">Welcome guest!</div>