@loyaltylion/headless-api-client
libraryroot.tsx
).
Sending LoyaltyLion data down as a deferred load ensures that the rest of your
page will never be blocked by LoyaltyLion. Using Suspense
and Await
you can
wait until the data has loaded before rendering the relevant components.
The exact data you need to load depends on whether a customer is logged in or not. In our
reference implementation, we have a fetchLoyaltylionData
function which
checks if a customer is logged in, and then calls the appropriate endpoint to load
the relevant data.
/rewards
page.
If you’re using tiers, the rules and rewards in the configuration will contain
multiple variants
, which reflect the rule and reward’s configuration for each
tier, e.g. if it’s enabled or provides more points for a particular tier.
It’s up to you how you want to render these variants. In the official
LoyaltyLion JS SDK, we always render the first enabled variant, but you could,
for example, render all variants, e.g. to show prospective customers the
difference between each tier.
Customer objects will have available_rules
and available_rewards
, which are
reflect the rules and rewards that are available to the customer, based on their
tier. Each rule and reward will have a single variant
(based on the tier),
and a context
object, which can be used to determine if the customer can
actually interact with the rule or reward.
Get Customer
and Initialize Session
will always return the full
site configuration in the response, in addition to the customer,
so you never need to call Get Configuration
separately if you’re using either of these endpoints.customer
object may not be a member of the program. You
need to check customer.state
to determine if they are enrolled, a guest
(non-member), or blocked from the program.
For Hydrogen, we recommend using the Initialize
Session endpoint and
calling it in the root loader. This will trigger a new call any time the page is
reloaded from scratch, or when any mutation occurs (e.g. the cart changes).
If you need to retrieve the customer in other loaders, we recommend using the
Get Customer endpoint instead.
This endpoint is faster because it never create or update the customer in
LoyaltyLion, which is fine if you’re calling Initialize Session
in the root
loader (i.e. it’s guaranteed to have been called at least once when a customer
logged in).