Basket
This page describes all of the basket methods available within the Limio SDK.
basketItems - Retrieving items in the basket
basketItems - Retrieving items in the basketYou may want to display to users what items they have in their basket, whether this be as part of a navigation bar dropdown, or somewhere else on the page. The items can be retrieved using
basketItems which are returned from the useBasket method.1
import React from "react"
2
import { useBasket } from "@limio/sdk"
3
4
const Basket = () => {
5
const { basketItems } = useBasket()
6
7
return (
8
<section>
9
<h1>Your Basket</h1>
10
{basketItems.map(item => (
11
<div>
12
<h2>{item.name}</h2>
13
<p>{item.data.display_description__limio}</p>
14
<p>{item.data.display_price__limio}</p>
15
</div>
16
))}
17
</section>
18
)
19
}
Copied!
Example
basketItems:1
[
2
{
3
id: "4b35bb3e-a50e-4eb2-9946-ebff2876f987",
4
quantity: 1,
5
offer: {
6
id: "d5b8eca9273dba0b971c33d56c3f81c65b6aaa87.97d170e1550eee4afc0af065b78cda302a97674c",
7
name: "Dummy Offer",
8
path: "/offers/Dummy Campaign/Dummy Offer",
9
parent_path: "/offers/Dummy Campaign",
10
type: "item",
11
data: {
12
name: "Dummy Offer",
13
tags: ["/tags/dummytag"],
14
segments: [],
15
attributes: { // All configured offer attributes will be returned
16
price__limio: [
17
{
18
delay_interval_type: "months",
19
subscription_start_day: "",
20
name: "charge_1",
21
repeat_interval: 1,
22
attributes: [],
23
label: "Charge 1",
24
trigger: "order_date",
25
repeat_interval_type: "months",
26
repeat_count: 1,
27
type: "recurring",
28
value: "10.00",
29
currencyCode: "GBP"
30
}
31
],
32
display_description__limio: "Dummy offer description",
33
display_price__limio: "£10 a month forever",
34
detailed_display_price__limio: "Pay £10 upfront for your first month, then £10.00 a month thereafter.",
35
offer_features__limio: "<h3>Dummy offer subscription benefits:</h3><ul><li>Unlimited web access</li><li>Smartphone and tablet apps</li><li>Save articles and share them with friends and family</li><li>Comment on articles and join conversations with our journalists</li><li>Newsletters exclusively for subscribers</li><li>Video exclusives</li></ul>",
36
cta_text__limio: "Subscribe Now",
37
payment_types__limio: ["zuora_card"],
38
display_name__limio: "Dummy Offer",
39
group__limio: "Dummy Group",
40
checkout__limio: {
41
checkout_type: "standard"
42
},
43
autoRenew__limio: true
44
},
45
attachments: [
46
{
47
path: "/assets/Images/Devices",
48
name: "Devices",
49
type: "image/png",
50
url: "/public/f60388d3-28ca-4a5c-ba38-51cf04eb93bd/responsive.png"
51
}
52
],
53
products: [
54
{
55
name: "Dummy Product",
56
path: "/products/Dummy Product",
57
attributes: {
58
product_code__limio: "SKU-00000001"
59
},
60
type: "item"
61
}
62
],
63
type: "item",
64
familyName: "offers"
65
}
66
}
67
}
68
]
Copied!
addToBasket - Adding items to the basket
addToBasket - Adding items to the basketIt's simple to put an item into the basket using the
addToBasket method. The addToBasket requires you to pass the item you want to add (see this section for details on offer items), and an options object containing, selectedProducts (if applicable), quantity and the location (redirectUrl) the offer was added from.Example of adding an item to the basket (this example also uses
getOffers to display the offers ready to be added to the basket):1
import React from "react"
2
import { usePage, useBasket } from "@limio/sdk"
3
4
const Offers = () => {
5
const { getOffers } = usePage()
6
const offers = getOffers()
7
8
const { addToBasket } = useBasket()
9
10
// This is used for the Limio checkout to know where return the user should
11
// they want to leave the checkout and go back to the landing page.
12
let redirectUrl = ""
13
if (typeof window !== undefined) {
14
const search = qs.parse(window?.location?.search)
15
redirectUrl = search["redirect_url"] || ""
16
}
17
18
return (
19
<section>
20
{offers.map(offer => (
21
<div>
22
<h1>{offer.name}</h1>
23
<button onClick={() => addToBasket(offer, { quantity: 1, redirectUrl })}>
24
Add to basket
25
</button>
26
</div>
27
))}
28
</section>
29
)
30
}
Copied!
updateCustomField - Updating custom field
updateCustomField - Updating custom fieldYou can update a custom, i.e. non Limio field, using the
updateCustomField method. The updateCustomField method required you to pass in the name of the new Custom Field as well as the value you wish for it to be set as:1
import React from "react"
2
import { useBasket } from "@limio/sdk"
3
4
const CustomField = () => {
5
const { updateCustomField } = useBasket()
6
7
const updatePartnershipNumber = (partnershipNumber) => {
8
return updateCusotmField("partnershipNumber", partnershipNumber)
9
}
10
11
return (
12
<section>
13
<div>
14
<h1>Partnership Number</h1>
15
<input onChange={(e) => updatePartnershipNumber(e.target.value)} />
16
</div>
17
</section>
18
)
19
}
Copied!
You will be able to find your custom fields in the
customFields object within the order object:1
{
2
order: {
3
customerDetails: {...},
4
billingDetails: {...},
5
deliveryDetails: {...},
6
orderItems: [...],
7
customFields: {
8
partnershipNumber: "123456"
9
}
10
}
11
}
Copied!
setCheckoutDisabled - Disable / Enable the checkout
setCheckoutDisabled - Disable / Enable the checkoutYou can enable / disable the Limio checkout, using the
setCheckoutDisabled method. This will allow for the checkout to be disabled until additional logice is carried out in an independent component, for example. The setCheckoutDisabled method requires a boolean argument to set the state of the checkout and can be called as follows:1
import React from "react"
2
import { useBasket } from "@limio/sdk"
3
4
const DisableCheckout = () => {
5
const { setCheckoutDisabled } = useBasket()
6
7
return (
8
<section>
9
<div>
10
<button onClick={(e) => setCheckoutDisabled(true)} />
11
</div>
12
</section>
13
)
14
}
Copied!
Last modified 7mo ago