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.

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:

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 for the initial cart total:

<!-- 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):

// 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()
}