Page
This page describes all of the page/campaign methods available within the Limio SDK.
You may store details about your campaign/page in custom attributes or if you just want to retrieve the name of the campaign, the
getCampaign method returns all of these to be used for any case you need.import { usePage } from "@limio/sdk"
const Component = () => {
const { getCampaign } = usePage()
const campaign = getCampaign()
return (
<section>
<h1>{campaign.name}</h1>
// This can be one you configure
<p>{campaign.attributes.custom_attribute}</p>
</section>
)
}
Example campaign:
{
"name": "Dummy Campaign",
"path": "/offers/Dummy Campaign",
"attributes": { // All configured page/campaign attributes will be returned here
"meta_title__limio": "Dummy Shop",
"push_to_checkout__limio": true
}
}
The
getOffers method returns an array of all offers stored under the current campaign. These are the items that should be used when adding items to the basket with the addToBasket method.import React from "react"
import { usePage } from "@limio/sdk"
const Offers = () => {
const { getOffers } = usePage()
const offers = getOffers()
return (
<section>
{offers.map(offer => (
<div>
<h1>{offer.name}</h1>
<button onClick={() => {
// Actually adding items to the basket will be covered later on.
console.log("Adding to basket")
}}>
Add to basket
</button>
</div>
))}
</section>
)
}
Example offer:
[
{
"id": "d5b8eca9273dba0b971c33d56c3f81c65b6aaa87.97d170e1550eee4afc0af065b78cda302a97674c",
"name": "Dummy Offer",
"path": "/offers/Dummy Campaign/Dummy Offer",
"parent_path": "/offers/Dummy Campaign",
"type": "item",
"data": {
"name": "Dummy Offer",
"tags": ["/tags/dummytag"],
"segments": [],
"attributes": {
// All configured offer attributes will be returned
"price__limio": [
{
"delay_interval_type": "months",
"subscription_start_day": "",
"name": "charge_1",
"repeat_interval": 1,
"attributes": [],
"label": "Charge 1",
"trigger": "order_date",
"repeat_interval_type": "months",
"repeat_count": 1,
"type": "recurring",
"value": "10.00",
"currencyCode": "GBP"
}
],
"display_description__limio": "Dummy offer description",
"display_price__limio": "£10 a month forever",
"detailed_display_price__limio": "Pay £10 upfront for your first month, then £10.00 a month thereafter.",
"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>",
"cta_text__limio": "Subscribe Now",
"payment_types__limio": ["zuora_card"],
"display_name__limio": "Dummy Offer",
"group__limio": "Dummy Group",
"checkout__limio": {
"checkout_type": "standard"
},
"autoRenew__limio": true
},
"attachments": [
{
"path": "/assets/Images/Devices",
"name": "Devices",
"type": "image/png",
"url": "/public/f60388d3-28ca-4a5c-ba38-51cf04eb93bd/responsive.png"
}
],
"products": [
{
"name": "Dummy Product",
"path": "/products/Dummy Product",
"attributes": {
"product_code__limio": "SKU-00000001"
},
"type": "item"
}
],
"type": "item",
"familyName": "offers"
}
}
]
If you need to get the tag that a user entered the campaign/page with (useful for tracking), the
getTag method returns that as a string:import React from "react"
import { usePage } from "@limio/sdk"
const Component = () => {
const { getTag } = usePage()
const tag = getTag()
console.log(tag)
// expected output: /tags/dummytag
return <p>{tag}</p>
}
Last modified 2yr ago