# Advanced Patterns

A collection of common production patterns using events, programmatic injection, address prefill, and checkout redirects.

## 1) Dynamic Product Injection

```javascript
import { Elements } from '@liquidcommerce/elements-sdk';

const client = await Elements('YOUR_API_KEY', { env: 'production' });

const products = ['00619947000020', '08504405135', '08068660001'];

await client.injectProductElement(
  products.map((identifier, index) => ({
    containerId: `product-${index}`,
    identifier
  }))
);
```

## 2) Pre-Set Address (Skip Prompt)

```javascript
await window.LiquidCommerce.elements.actions.address.setAddressManually(
  {
    one: '123 Main St',
    two: 'Apt 4',
    city: 'New York',
    state: 'NY',
    zip: '10001',
    country: 'US'
  },
  {
    latitude: 40.7128,
    longitude: -74.0060
  }
);
```

## 3) Custom Cart Button

```html
<button data-lce-cart-toggle-button>
  View Cart
</button>
```

## 4) Analytics With Events

```javascript
window.addEventListener('lce:actions.product_loaded', (event) => {
  const { identifier, name, priceInfo } = event.detail.data;
  gtag('event', 'view_item', {
    items: [{ item_id: identifier, item_name: name, price: (priceInfo?.minimum ?? 0) / 100 }]
  });
});

window.addEventListener('lce:actions.checkout_submit_completed', (event) => {
  const { orderNumber, orderTotal } = event.detail.data;
  gtag('event', 'purchase', {
    transaction_id: orderNumber,
    value: orderTotal / 100,
    currency: 'USD'
  });
});
```

## 5) Redirect Checkout to Your Page

```javascript
const client = await Elements('YOUR_API_KEY', {
  env: 'production',
  checkout: {
    pageUrl: 'https://yoursite.com/checkout?lce_checkout={token}'
  }
});
```

## 6) Debugging Helpers

```javascript
const client = await Elements('YOUR_API_KEY', {
  env: 'production',
  debugMode: 'console',
  development: {
    openShadowDom: true
  }
});
```

## 7) Cleanup on SPA Navigation

```javascript
let client = null;

async function mountElements() {
  client = await Elements('YOUR_API_KEY', { env: 'production' });
  await client.injectProductElement([
    { containerId: 'product', identifier: '00619947000020' }
  ]);
}

function unmountElements() {
  if (client) {
    client.destroy();
    client = null;
  }
}

// React example
useEffect(() => {
  mountElements();
  return () => unmountElements();
}, []);
```

## 8) Checkout-Only Page

For a dedicated checkout page, use the tree-shaken checkout build:

```javascript
import { ElementsCheckout } from '@liquidcommerce/elements-sdk/checkout';

const client = await ElementsCheckout('YOUR_API_KEY', {
  env: 'production'
});

await client.injectCheckout({
  containerId: 'checkout',
  checkoutId: new URLSearchParams(window.location.search).get('lce_checkout'),
  hideHeader: false
});
```

## 9) Promo Ticker with Time Windows

```javascript
const client = await Elements('YOUR_API_KEY', {
  env: 'production',
  promoTicker: [
    {
      promoCode: 'SUMMER20',
      text: ['20% Off Summer Sale', 'Free Shipping on $50+'],
      separator: '|',
      activeFrom: '2026-06-01T00:00:00Z',
      activeUntil: '2026-08-31T23:59:59Z'
    },
    {
      promoCode: 'FALL10',
      text: ['10% Off Fall Collection'],
      separator: '|',
      activeFrom: '2026-09-01T00:00:00Z',
      activeUntil: '2026-11-30T23:59:59Z'
    }
  ]
});
```

## 10) Product List with Filters and Search

```javascript
const client = await Elements('YOUR_API_KEY', { env: 'production' });

await client.injectProductListSearch({
  containerId: 'search-box',
  slug: 'whiskey-collection'
});

await client.injectProductListFilters({
  containerId: 'sidebar-filters',
  slug: 'whiskey-collection',
  filters: ['price', 'brands', 'sizes', 'fulfillment']
});

await client.injectProductList({
  containerId: 'product-grid',
  slug: 'whiskey-collection',
  rows: 4,
  columns: 3,
  productUrl: '/products/{grouping}'
});
```

## 11) Check Product Availability by State

```javascript
const availability = await window.LiquidCommerce.elements.actions.product
  .getProductAvailabilityByState(['00619947000020', '08504405135'], 'CA');

console.log('Availability in CA:', availability);
```

## Related Docs

- [Events Guide](../guides/events.md)
- [Product Component](../guides/product-component.md)
- [Checkout Component](../guides/checkout-component.md)
- [Client API](../api/client.md)