> ## Documentation Index
> Fetch the complete documentation index at: https://developers.loyaltylion.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Live updating

<Warning>
  The SDK doesn't automatically observe our components or their inputs for
  changes. It's up to you to implement an update flow that is appropriate for
  your use case.
</Warning>

If you have a dynamic cart, you may have some function that runs when the cart updates. Or in some other cases you may have be dynamically creating or removing the span above as the user navigates your page. Regardless of your approach, the SDK supports a function that *refreshes* the page as necessary:

```javascript theme={null}
window.loyaltylion.ui.refresh()
```

### If the component has been removed after pageload and is then re-added

* Render the component to the screen
* call `window.loyaltylion.ui.refresh()`

### If the component's value needs to be updated

* Update the component's attribute value
* call `window.loyaltylion.ui.refresh()`

#### Example

Let's say you have a span showing the [points for cart](/sdk/simple-components/points-for-cart/) for the initial cart total:

```html theme={null}
<!-- cart value at server render: $49.99 -->
<span id="ll-cart-points" data-lion-points-for="4999"></span>
```

And you have some dynamic cart functionality *(note: intended to illustrate flow and order of events only, your dynamic page content code likely looks different)*:

```javascript theme={null}
// function that runs whenever the cart is updated
function onCartUpdate(event, updatedCart) {
  const newValue = updatedCart.total

  // ... something that updates the prices shown in the cart
  window.ajaxCart.updateValues(updatedCart)

  // ... something that renders the new item that was just added to the cart
  window.ajaxCart.renderCartDrawer()

  // now we must find and update the cart-points span's data attribute
  document
    .getElementById('ll-cart-points')
    .setAttribute('data-lion-points-for', '7999')

  // now that we've updated the element, we tell the sdk to refresh
  window.loyaltylion && window.loyaltylion.ui.refresh()
}
```