Page

This page describes all of the page/campaign methods available within the Limio SDK.

Retrieving details of the current page

You may store details about your page (previously called campaign) in custom attributes or if you just want to retrieve the name of the page, the const campaign returns all of these to be used for any case you need.

import { useCampaign } from "@limio/sdk"

const Component = () => {
  const { campaign } = useCampaign()
  
  return (
    <section>
      <h1>{campaign.name}</h1>
      // This can be one you configure
      <p>{campaign.attributes.custom_attribute}</p>
    </section>
  )
}

Example page:

{
  "name": "Dummy Page",
  "path": "/offers/Dummy Page",
  "attributes": { // All configured page/campaign attributes will be returned here
    "meta_title__limio": "Dummy Shop",
    "push_to_checkout__limio": true
  }
}

Retrieving offers of the current page

The offers return an array of all offers stored under the current page. These are the items that should be used when adding items to the basket with the addToBasket method.

import React from "react"
import { useCampaign } from "@limio/sdk"

const Offers = () => {
  const { offers } = useCampaign()
  
  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 Page/Dummy Offer",
    "parent_path": "/offers/Dummy Page",
    "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"
    }
  }
]

Retrieving the tag the user entered the page with

If you need to get the tag that a user entered the page with (useful for tracking), the const tag returns that as a string:

import React from "react"
import { useCampaign } from "@limio/sdk"

const Component = () => {
  const { tag } = useCampaign()

  console.log(tag)
  // expected output: /tags/dummytag

  return <p>{tag}</p>
}

Retrieving add-ons of the current offers on the page

If you need to get the add-ons attached to a page, the const addOns returns an array with the add-ons objects:

import React from "react"
import { useCampaign } from "@limio/sdk"

const Component = () => {
  const { addOns } = useCampaign()


  return (
    <section>
      {addOns.map(addOn => (
        <div>
          <h1>{addOn.name}</h1>
          <button onClick={() => {
            // Actually adding items to the basket will be covered later on.
            console.log("Adding add-on to basket")
          }}>
            Add to basket
          </button>
        </div>
      ))}
    </section>
  )
}

Example of an add-on:

[
    {
        "path": "/add_ons/demo-add-on",
        "name": "Dummy Add On",
        "type": "item",
        "data": {
            "name": "Dummy Add On",
            "record_type": "add_on",
            "baseTemplate": "/config/templates/add_ons/default",
            "attributes": {
                "label__limio": [
                    "discount"
                ],
                "display_name__limio": "demo",
                "price__limio": [
                    {
                        "name": "charge_1",
                        "label": "Charge 1",
                        "value": "10.00",
                        "currencyCode": "GBP",
                        "type": "recurring",
                        "trigger": "subscription_start",
                        "repeat_interval": 1,
                        "repeat_interval_type": "month",
                        "repeat_count": 2,
                        "delay_interval": null,
                        "attributes": [],
                        "term_setting": "termed",
                        "delay_interval_type": "month"
                    }
                ]
            },
            "team": "users",
            "user": "[e-mail]",
            "path": "/add_ons/demo-add-on",
            "created": "2024-08-13T15:46:23+00:00",
            "modified": "2024-08-13T15:46:23+00:00"
        },
        "id": "b83ed9f688d6abc0e460d161428a0e208079e7ea",
        "version": "9cd75000a73f0011b62fe323ed083e7bc37cd907"
    }
]

Retrieving group values of the current offers on the page

Group values are configured at the offer level. For example, you might want to group offers by values such as monthly, yearly, or a custom value that you configure.

import React from "react"
import { useCampaign } from "@limio/sdk"

const Component = () => {
  const { groupValues } = useCampaign()
  
    console.log(groupValues.map(groupValue => {groupValue.lable})
    // expected output: ["Monthly", "Yearly"]

  return groupValues
 
}

Example of group values:

[
    {
        "label": "Monthly",
        "id": "monthly"
    },
    {
        "label": "Yearly",
        "id": "yearly"
    }
]