Skip to main content

Saving and Restoring Basket Products

We want to have different set of products/contracts for different vacancies in our system, how can we do that?​

We want to order same set of products/contracts for a different campaign, how can we do that?​

Most ATSs have vacancies under which there are multiple campaigns. An example is:

  1. Construction Work (vacancy)

    1. Truck Driver (campaign)
    2. Crane Operator (campaign)

  2. Website Translation (vacancy)

    1. German Translation (campaign)
    2. Japanese Translation (campaign)

There are a couple of scenarios that saving the basket products/contracts state and restoring would be beneficial such as:

  1. User orders a campaign like Truck Driver and then wants to order Crane Operator with same set of products/contracts

Normally the user would either need to click "Create New from This" in the Campaign Detail Card which is listed in Campaign List with Card Layout or the user would need to start from the first step of ordering journey and manually add the products/contracts to the basket.


  1. User starts the order journey for a campaign like Truck Driver for Construction Work vacancy but then leaves in the middle of it and switches to German Translation campaign for Website Translation vacancy

In this case, the products/contracts for Truck Driver campaign would not be cleared out and would still be in the basket when user goes to German Translation campaign.


By default, HAPI Elements only has one shopping basket and unless the end user orders the campaign with the products/contracts in the basket or removes all of them manually (or you clear the basket programmatically), the same set of products/contracts will be used.


To improve the UX flow, you can use Elements JS API functions and variables we provide:

Getting the products/contracts meta​

const productsAndContractsInBasket = window.hapi.basket.state.productsMeta.value

Restoring the products/contracts meta to basket​

// the meta you previously saved
const productsAndContractsInBasket = window.hapi.basket.state.productsMeta.value

// restore
window.hapi.basket.state.productsMeta = productsAndContractsInBasket

Clearing the basket​

window.hapi.basket.service.clear()

Combining altogether​

const saveToLocalStorageOrDatabase = (vacancyId, productsAndContractsMeta) => {}
const getFromLocalStorageOrDatabase = (vacancyId) => {}
const clearLocalStorageOrDatabase = (vacancyId) => {}

const idOfVacancyA = "some-vacancy-id-of-yours-1"
// when user changes from Vacancy A to Vacancy B
const productsAndContractsInBasket = window.hapi.basket.state.productsMeta.value
saveToLocalStorageOrDatabase(idOfVacancyA, productsAndContractsInBasket)
// clear the basket
window.hapi.basket.service.clear()

// when user lands back to Vacancy A from Vacancy B
const previousBasketMeta = getFromLocalStorageOrDatabase(idOfVacancyA)
if (previousBasketMeta?.length > 0) {
    window.hapi.basket.service.clear()
    window.hapi.basket.state.productsMeta = previousBasketMeta
}

// clearing your local storage or DB when order is completed
// note that HAPI Elements automatically clears the basket on order success
// thus you don't need to execute window.hapi.basket.service.clear()
window.hapi.campaign.service.orderCampaign.onSuccess(() => {
    try {
        clearLocalStorageOrDatabase(idOfVacancyA)
    } catch (error) {
        console.log('Could not clear local storage or database with given vacancy ID', idOfVacancyA)
    }
})