@liquidcommerce/elements-sdk 2.6.0-beta.36 → 2.6.0-beta.38

package/dist/types/constants/core.constant.d.ts

@@ -48,3 +48,7 @@ export declare const Z_INDEX: {
     readonly MODAL: 2147483640;
 };
 export declare const DESKTOP_BREAKPOINT = 1024;
+export declare const DISPLAY_MODE: {
+    MODAL: string;
+    DRAWER: string;
+};

package/dist/types/core/store/interfaces/product-list.interface.d.ts

@@ -2,7 +2,6 @@ import type { IPagination } from 'modules/product-list/product-list.interface';
 import type { FulfillmentType } from '@/enums';
 import type { IFulfillment, IProduct, IProductVariant, IRetailer, IRetailerAddress } from '@/interfaces/api/product.interface';
 import type { IFilterSchema } from '@/interfaces/api/product-list.interface';
-import type { IModalStore } from './core.interface';
 import type { IProductSizeStore } from './product.interface';
 export type IProductFulfillmentStore = IFulfillment & {
     retailerName: string;
@@ -40,7 +39,6 @@ export interface IProductListStore {
             selectedFulfillmentType: FulfillmentType;
             selectedFulfillment: IProductFulfillmentStore | null;
             selectedQuantity: number;
-            modal: IModalStore;
         };
     };
     loading: boolean;

package/dist/types/interfaces/configs/product-list.interface.d.ts

@@ -4,6 +4,7 @@ export type ProductListCardCornerRadius = 'rounded' | 'sharp';
 export interface IProductListTheme {
     backgroundColor: string;
 }
+export type IDisplayMode = 'modal' | 'drawer';
 export interface IProductListLayout {
     productCard: {
         style: ProductListCardStyle;
@@ -18,6 +19,7 @@ export interface IProductListLayout {
         showCollections: boolean;
         enablePersonalization: boolean;
     };
+    displayMode: IDisplayMode;
 }
 export interface IProductListComponent {
     theme: IProductListTheme;

package/dist/types/modules/product-list/components/product-list-card-loading.component.d.ts

@@ -1,6 +1,7 @@
+import type { IProductListComponent } from 'interfaces/configs';
 import { BaseComponent } from '@/core/base-component.service';
 import type { IProductListComponentParams } from '@/modules/product-list/product-list.component';
-export declare class ProductListCardLoadingComponent extends BaseComponent<IProductListComponentParams> {
+export declare class ProductListCardLoadingComponent extends BaseComponent<IProductListComponentParams, IProductListComponent> {
     get hostClasses(): string[];
     private createSkeletonCard;
     protected template(): HTMLElement[];

package/dist/types/modules/product-list/components/product-list-retailers.component.d.ts

@@ -1,8 +1,9 @@
-import type { IProductListComponent } from 'interfaces/configs';
+import type { IDisplayMode, IProductListComponent } from 'interfaces/configs';
 import { BaseComponent } from '@/core/base-component.service';
 export interface IProductListRetailersParams {
     productId: string;
     config?: IProductListComponent;
+    displayMode?: IDisplayMode;
 }
 export declare class ProductListRetailersComponent extends BaseComponent<IProductListRetailersParams, IProductListComponent> {
     get hostClasses(): string[];

package/dist/types/modules/product-list/product-list.component.d.ts

@@ -1,3 +1,4 @@
+import type { IProductListComponent } from 'interfaces/configs';
 import { BaseComponent, type IOnStoreChanged } from '@/core/base-component.service';
 import type { ProductListFilterType } from '@/interfaces/core.interface';
 export interface IProductListComponentParams {
@@ -6,7 +7,7 @@ export interface IProductListComponentParams {
     filters: ProductListFilterType[];
     productUrl?: string;
 }
-export declare class ProductListComponent extends BaseComponent<IProductListComponentParams> {
+export declare class ProductListComponent extends BaseComponent<IProductListComponentParams, IProductListComponent> {
     private products;
     private retailers;
     private pagination;

package/dist/types/modules/ui-components/engraving/engraving-form.component.d.ts

@@ -1,4 +1,5 @@
 import { BaseComponent } from '@/core/base-component.service';
+import type { IDisplayMode } from '@/interfaces/configs';
 export interface IEngravingFormComponentParams {
     identifier: string;
     context: 'product' | 'cart' | 'product-list';
@@ -7,6 +8,7 @@ export interface IEngravingFormComponentParams {
     maxCharsPerLine: number;
     fee: number;
     location?: string;
+    displayMode?: IDisplayMode;
 }
 export declare class EngravingFormComponent extends BaseComponent<IEngravingFormComponentParams, null> {
     get hostClasses(): string[];

package/docs/ACTIONS.md

@@ -524,6 +524,7 @@ await actions.cart.resetCart();
 actions.checkout.openCheckout();
 actions.checkout.closeCheckout();
 actions.checkout.toggleCheckout();
+actions.checkout.exitCheckout();
 
 // Example: Open checkout automatically for high-value carts
 const cart = actions.cart.getDetails();

package/docs/CONFIGURATION.md

@@ -11,7 +11,10 @@ const client = await Elements('YOUR_API_KEY', {
   isBuilder: false,
   customTheme: {},
   proxy: {},
-  promoTicker: []
+  promoTicker: [],
+  checkout: {
+    pageUrl: 'https://yoursite.com/checkout?id={id}'  // Optional: hosted checkout
+  }
 });
 ```
 
@@ -262,6 +265,33 @@ activeUntil: '2025-12-31T23:59:59Z'
 
 **Note:** Only active promotions are displayed.
 
+### `checkout`
+
+**Type:** `object`
+**Default:** `undefined`
+
+Configuration for hosted checkout (external checkout page).
+
+```javascript
+checkout: {
+  pageUrl: 'https://yoursite.com/checkout?id={id}'
+}
+```
+
+**Properties:**
+
+#### `checkout.pageUrl`
+
+**Type:** `string` (required)
+
+URL of your dedicated checkout page. The `{id}` placeholder is replaced with the checkout token.
+
+```javascript
+pageUrl: 'https://yoursite.com/checkout?id={id}'
+```
+
+When set, the "Go to Checkout" button in the cart redirects to this URL instead of opening the checkout drawer.
+
 ## Auto-Initialization Configuration
 
 When using auto-initialization, configure via `data-` attributes on the script tag.
@@ -376,6 +406,28 @@ data-cart-badge-button=""                   <!-- Empty value = floating button w
 - `replace:` - Replace the target element
 - `inside:` - Place inside the target element (default)
 
+#### `data-cart-mobile-button`
+
+**Type:** `string`
+
+Mobile-specific cart button (no badge). Same syntax as `data-cart-button` but only shown on mobile devices.
+
+```html
+data-cart-mobile-button="below:.mobile-header"
+data-cart-mobile-button="inside:.mobile-nav"
+```
+
+#### `data-cart-mobile-badge-button`
+
+**Type:** `string`
+
+Mobile-specific cart button with item count badge. Same syntax as `data-cart-badge-button` but only shown on mobile devices.
+
+```html
+data-cart-mobile-badge-button="below:.mobile-header"
+data-cart-mobile-badge-button="inside:.mobile-nav"
+```
+
 #### `data-cart-button-hidden`
 
 **Type:** flag (no value)
@@ -517,11 +569,9 @@ data-product-2="00832889005513"
 
 ```html
 <div data-liquid-commerce-elements-products-list
-     data-card="standard"
      data-rows="3"
      data-columns="4"
-     data-card-fill
-     data-filters="personalization,pre-order,delivery-options"
+     data-filters="engraving,presale,fulfillment,price,brands"
      data-product-url="/product/{upc}">
 </div>
 ```
@@ -534,23 +584,12 @@ data-product-2="00832889005513"
 
 Enables product list on this div element.
 
-##### `data-card`
-
-**Type:** `'standard'`  
-**Default:** `'standard'`
-
-Card variant style.
-
-```html
-data-card="standard"
-```
-
 ##### `data-rows`
 
-**Type:** `number`  
+**Type:** `number`
 **Default:** `3`
 
-Number of rows to display per page.
+Number of rows to display per page (1-10).
 
 ```html
 data-rows="4"
@@ -558,39 +597,40 @@ data-rows="4"
 
 ##### `data-columns`
 
-**Type:** `number`  
+**Type:** `number`
 **Default:** `4`
 
-Number of columns in the grid.
+Number of columns in the grid (1-4).
 
 ```html
 data-columns="4"
 ```
 
-##### `data-card-fill`
-
-**Type:** flag (no value)
-
-Whether cards should fill the whole card with white background color to match the image background color.
-
-```html
-data-card-fill
-```
-
 ##### `data-filters`
 
 **Type:** `string` (comma-separated)
 
-Filter types to enable: `personalization`, `pre-order`, `delivery-options`.
+Filter types to enable.
 
 ```html
-data-filters="personalization,pre-order,delivery-options"
+data-filters="engraving,presale,fulfillment,price,brands"
 ```
 
 **Available filters:**
-- `personalization` - Show filter for personalized/engravable products
-- `pre-order` - Show filter for pre-order products
-- `delivery-options` - Show filter for delivery type (all, shipping, onDemand)
+- `engraving` - Show filter for personalized/engravable products
+- `presale` - Show filter for pre-order products
+- `fulfillment` - Show filter for delivery type (shipping, onDemand)
+- `price` - Show price range filter
+- `brands` - Show brand filter
+- `categories` - Show category filter
+- `flavor` - Show flavor filter
+- `region` - Show region filter
+- `variety` - Show variety filter
+- `vintage` - Show vintage year filter
+- `country` - Show country filter
+- `appellation` - Show appellation filter
+- `materials` - Show materials filter
+- `sizes` - Show size filter
 
 ##### `data-product-url`
 
@@ -607,6 +647,60 @@ data-product-url="/products/{grouping}"
 - `{upc}` - Replaced with product UPC
 - `{grouping}` - Replaced with Salsify grouping ID
 
+### Product List Search and Filters Containers
+
+You can place search and filter components in separate containers:
+
+```html
+<!-- Search bar (any div) -->
+<div data-search-container></div>
+
+<!-- Filter panel (any div) -->
+<div data-filters-container></div>
+```
+
+These work alongside the main `data-liquid-commerce-elements-products-list` container. The search and filter components communicate with the product list automatically.
+
+### Checkout URL Configuration
+
+#### `data-checkout-url`
+
+**Type:** `string`
+
+URL for hosted checkout page. The `{id}` placeholder is replaced with the checkout token.
+
+```html
+data-checkout-url="https://yoursite.com/checkout?id={id}"
+```
+
+When set, the "Go to Checkout" button in the cart redirects to this URL instead of opening the checkout drawer.
+
+### Custom Cart Elements
+
+#### `data-lce-cart-toggle-button`
+
+**Type:** flag (no value)
+
+Add to any element to make it toggle the cart open/closed on click.
+
+```html
+<button data-lce-cart-toggle-button>Open Cart</button>
+```
+
+#### `data-lce-cart-items-count`
+
+**Type:** `string` (optional value: `"keep-zero"`)
+
+Displays the current cart item count inside the element. Updated automatically.
+
+```html
+<!-- Hides when count is 0 -->
+<span data-lce-cart-items-count></span>
+
+<!-- Always shows count, even when 0 -->
+<span data-lce-cart-items-count="keep-zero">0</span>
+```
+
 ### URL Parameter Configuration
 
 #### `data-product-param`
@@ -692,6 +786,51 @@ data-promo-active-from="2025-01-01T00:00:00Z"
 data-promo-active-until="2025-12-31T23:59:59Z"
 ```
 
+## Checkout-Only Build (Hosted Checkout)
+
+For hosted checkout pages, use the checkout-only build for a smaller bundle.
+
+### Auto-Initialization
+
+```html
+<script
+  data-liquid-commerce-checkout
+  data-token="YOUR_API_KEY"
+  data-env="production"
+  data-debug-mode="none"
+  src="https://assets-elements.liquidcommerce.us/checkout/elements.js"
+></script>
+```
+
+**Attributes:**
+- `data-liquid-commerce-checkout` - Enables checkout-only auto-initialization (required)
+- `data-token` - Your API key (required)
+- `data-env` - Environment: `production`, `staging`, `development`
+- `data-debug-mode` - Debug mode: `console`, `panel`
+- `data-checkout-url` - Checkout page URL (for redirect behavior)
+
+### Programmatic Initialization
+
+```javascript
+import { ElementsCheckout } from '@liquidcommerce/elements-sdk/checkout';
+
+const client = await ElementsCheckout('YOUR_API_KEY', {
+  env: 'production'
+});
+
+const component = await client.injectCheckout({
+  containerId: 'checkout-container',
+  checkoutId: 'checkout-token-from-url',  // Optional: checkout token
+  hideHeader: true                  // Optional
+});
+```
+
+**Differences from full SDK:**
+- Smaller bundle (tree-shaken, no product/cart/PLP components)
+- Only `injectCheckout()` method available (no `injectProductElement`, `injectCartElement`, etc.)
+- Checkout actions only (no `openCheckout`/`closeCheckout`/`toggleCheckout` drawer controls)
+- Same theming, events, and configuration system
+
 ## TypeScript Types
 
 ### `ILiquidCommerceElementsConfig`
@@ -704,6 +843,11 @@ interface ILiquidCommerceElementsConfig {
   customTheme?: IClientCustomThemeConfig;
   proxy?: IElementsProxyConfig;
   promoTicker?: IPromoTicker[];
+  checkout?: ILiquidCommerceElementsCheckoutConfig;
+}
+
+interface ILiquidCommerceElementsCheckoutConfig {
+  pageUrl: string; // URL with {id} placeholder for checkout token
 }
 ```
 

package/docs/DOCUMENTATION_INDEX.md

@@ -39,7 +39,12 @@ Complete guide to the LiquidCommerce Elements SDK documentation.
 **Contents:**
 - Basic configuration
 - All configuration options with types
+- Hosted checkout configuration
 - Auto-initialization attributes
+- Product list configuration (filters, search, grid)
+- Mobile cart button attributes
+- Custom cart elements (toggle, items count)
+- Checkout-only build configuration
 - URL parameter configuration
 - TypeScript types
 - Configuration examples
@@ -59,6 +64,7 @@ Complete guide to the LiquidCommerce Elements SDK documentation.
 - Cart component theme
 - Checkout component theme
 - Address component theme
+- Product list component theme (card styles, display modes)
 - Dynamic theme updates (builder mode)
 - Theme presets (example configurations)
 - Best practices
@@ -72,7 +78,7 @@ Complete guide to the LiquidCommerce Elements SDK documentation.
 - Product actions
 - Address actions (Google Places & manual)
 - Cart actions (including programmatic addProduct)
-- Checkout actions (including programmatic addProduct)
+- Checkout actions (including programmatic addProduct, exitCheckout)
 - Action feedback events
 - Event handling best practices
 - Real-world business scenarios
@@ -238,6 +244,8 @@ docs/
 ### Features
 - [Product Engraving](../README.md#product-engraving)
 - [Product List](../README.md#product-list)
+- [Product List Search & Filters](../README.md#product-list-search)
+- [Hosted Checkout](../README.md#hosted-checkout-external-checkout-page)
 - [Gift Options](../README.md#gift-options)
 - [Promo Codes](../README.md#promo-codes)
 - [Gift Cards](../README.md#gift-cards)
@@ -301,9 +309,9 @@ Want to contribute an example?
 
 ---
 
-**Last updated:** October 2025  
-**SDK Version:** 2.x+  
-**Documentation Version:** 2.0
+**Last updated:** January 2026
+**SDK Version:** 2.6.x+
+**Documentation Version:** 2.1
 
 
 ---

package/docs/THEMING.md

@@ -180,6 +180,7 @@ interface IProductComponent {
   };
   layout: {
     showImages: boolean;
+    showOnlyMainImage: boolean;
     showTitle: boolean;
     showDescription: boolean;
     showQuantityCounter: boolean;
@@ -192,6 +193,8 @@ interface IProductComponent {
     addToCartButtonShowTotalPrice: boolean;
     buyNowButtonText: string;
     preSaleButtonText: string;
+    prioritizeEngraving: boolean;
+    noAvailabilityText: string;
   };
 }
 ```
@@ -205,6 +208,7 @@ customTheme: {
     },
     layout: {
       showImages: true,
+      showOnlyMainImage: false,
       showTitle: true,
       showDescription: true,
       showQuantityCounter: true,
@@ -216,7 +220,9 @@ customTheme: {
       addToCartButtonText: 'Add to Cart',
       addToCartButtonShowTotalPrice: true,
       buyNowButtonText: 'Buy Now',
-      preSaleButtonText: 'Pre-Order'
+      preSaleButtonText: 'Pre-Order',
+      prioritizeEngraving: false,
+      noAvailabilityText: 'Not available in your area'
     }
   }
 }
@@ -261,10 +267,6 @@ customTheme: {
 interface ICheckoutComponent {
   theme: {
     backgroundColor: string;
-    checkoutCompleted: {
-      customLogo: string;
-      customText: string | null;
-    };
   };
   layout: {
     emailOptIn: {
@@ -282,10 +284,15 @@ interface ICheckoutComponent {
       show: boolean;
       text: string;
     };
+    continueShoppingUrl: string;
     exitUrl: string;
     thankYouButtonText: string;
     drawerHeaderText: string;
     placeOrderButtonText: string;
+    checkoutCompleted: {
+      customLogo: string;
+      customText: string | null;
+    };
   };
 }
 ```
@@ -295,11 +302,7 @@ interface ICheckoutComponent {
 customTheme: {
   checkout: {
     theme: {
-      backgroundColor: '#ffffff',
-      checkoutCompleted: {
-        customLogo: 'https://yourdomain.com/logo.png',
-        customText: 'Thank you for your order!'
-      }
+      backgroundColor: '#ffffff'
     },
     layout: {
       emailOptIn: {
@@ -317,15 +320,26 @@ customTheme: {
         show: true,
         text: 'By placing this order, you agree to our terms and conditions.'
       },
+      continueShoppingUrl: '/',
       exitUrl: '/',
       thankYouButtonText: 'Continue Shopping',
       drawerHeaderText: 'Checkout',
-      placeOrderButtonText: 'Place Order'
+      placeOrderButtonText: 'Place Order',
+      checkoutCompleted: {
+        customLogo: 'https://yourdomain.com/logo.png',
+        customText: 'Thank you for your order!'
+      }
     }
   }
 }
 ```
 
+**Layout Properties:**
+
+- **`continueShoppingUrl`** (string): URL to redirect to when customer clicks "Continue Shopping" after order completion
+- **`exitUrl`** (string): URL for the exit/close action in checkout
+- **`legalMessage.text`** (string): Supports rich text / HTML content
+
 ## Address Component
 
 ```typescript
@@ -347,6 +361,77 @@ customTheme: {
 }
 ```
 
+## Product List Component
+
+```typescript
+interface IProductListComponent {
+  theme: {
+    backgroundColor: string;
+  };
+  layout: {
+    productCard: {
+      style: 'card' | 'ghost';
+      cornerRadius: 'rounded' | 'sharp';
+      showPrice: boolean;
+      showSizeSelector: boolean;
+      showFulfillment: boolean;
+      showRetailerName: boolean;
+      showQuantityCounter: boolean;
+      enableShippingFulfillment: boolean;
+      enableOnDemandFulfillment: boolean;
+      showCollections: boolean;
+      enablePersonalization: boolean;
+    };
+    displayMode: 'modal' | 'drawer';
+  };
+}
+```
+
+**Example:**
+```javascript
+customTheme: {
+  productList: {
+    theme: {
+      backgroundColor: '#f8f9fa'
+    },
+    layout: {
+      productCard: {
+        style: 'card',
+        cornerRadius: 'rounded',
+        showPrice: true,
+        showSizeSelector: true,
+        showFulfillment: true,
+        showRetailerName: false,
+        showQuantityCounter: true,
+        enableShippingFulfillment: true,
+        enableOnDemandFulfillment: true,
+        showCollections: false,
+        enablePersonalization: true
+      },
+      displayMode: 'drawer'
+    }
+  }
+}
+```
+
+**Card Style Options:**
+
+- **`style`**: `'card'` shows a bordered card with background, `'ghost'` shows a minimal borderless card
+- **`cornerRadius`**: `'rounded'` uses rounded corners, `'sharp'` uses square corners
+- **`displayMode`**: `'modal'` opens product details in a modal, `'drawer'` opens in a side drawer
+
+**Card Feature Flags:**
+
+- **`showPrice`**: Display price on the product card
+- **`showSizeSelector`**: Show size/variant selector on the card
+- **`showFulfillment`**: Show fulfillment type indicator
+- **`showRetailerName`**: Show the retailer name
+- **`showQuantityCounter`**: Show quantity increment/decrement controls
+- **`enableShippingFulfillment`**: Allow shipping fulfillment option
+- **`enableOnDemandFulfillment`**: Allow on-demand fulfillment option
+- **`showCollections`**: Show product collection/tag labels
+- **`enablePersonalization`**: Show personalization/engraving option on cards
+
 ## Complete Configuration Example
 
 ```javascript
@@ -390,6 +475,7 @@ const client = await Elements('YOUR_API_KEY', {
       },
       layout: {
         showImages: true,
+        showOnlyMainImage: false,
         showTitle: true,
         showDescription: true,
         showQuantityCounter: true,
@@ -401,7 +487,9 @@ const client = await Elements('YOUR_API_KEY', {
         addToCartButtonText: 'Add to Cart',
         addToCartButtonShowTotalPrice: true,
         buyNowButtonText: 'Buy Now',
-        preSaleButtonText: 'Pre-Order'
+        preSaleButtonText: 'Pre-Order',
+        prioritizeEngraving: false,
+        noAvailabilityText: 'Not available in your area'
       }
     },
     cart: {
@@ -417,11 +505,7 @@ const client = await Elements('YOUR_API_KEY', {
     },
     checkout: {
       theme: {
-        backgroundColor: '#ffffff',
-        checkoutCompleted: {
-          customLogo: 'https://yourdomain.com/logo.png',
-          customText: null
-        }
+        backgroundColor: '#ffffff'
       },
       layout: {
         emailOptIn: {
@@ -439,10 +523,15 @@ const client = await Elements('YOUR_API_KEY', {
           show: false,
           text: ''
         },
+        continueShoppingUrl: '/',
         exitUrl: '/',
         thankYouButtonText: 'Continue Shopping',
         drawerHeaderText: 'Checkout',
-        placeOrderButtonText: 'Place Order'
+        placeOrderButtonText: 'Place Order',
+        checkoutCompleted: {
+          customLogo: 'https://yourdomain.com/logo.png',
+          customText: null
+        }
       }
     },
     address: {

package/package.json

@@ -3,7 +3,7 @@
   "description": "LiquidCommerce Elements SDK",
   "license": "UNLICENSED",
   "author": "LiquidCommerce Team",
-  "version": "2.6.0-beta.36",
+  "version": "2.6.0-beta.38",
   "homepage": "https://docs.liquidcommerce.co/elements-sdk",
   "repository": {
     "type": "git",