# Getting information
One thing you will need is to get information out of the current configuration. There is plenty of stuff you can do here but we will focus on two things:
- part list: is a list which contains all relevant details to a current configuration
- perspective image: is an image which shows the current configuration
Let's start with the part list. The part list works similar to the events onUpdatePossibleChildren and onUpdateParameters. You only need to add a function to onPartListUpdate. In code this could look something like rubensConfiguratorApi.callbacks.onPartListUpdate = handlePartlist; The handlePartlist function should take care of updating the UI. Also it's possible to calculate a price depending on the part list. Therefore you can make requests to your backend or do some fancy price calculation. In our example we decided to open a pop up when the user clicks on the "add to cart" button.
To never loose a configuration state it's curcial to save the configuration to the Roomle Rubens Platform. Therefore we give you all the information you need when calling saveCurrentConfiguration. Only rely on data which is sent to you by this function since it has the correct data which is stored in the backend. In vary rare cases (hash collisions (opens new window)) it could happen that the backend has to do transformations to the data, so always use the data from the backend. To get this data just call saveCurrentConfiguration. This whole example leads to some more code so it's a good idea to checkout the Code Sandbox.
But to give you a better picture what's going on consider these code changes inside the Code Sandbox:
onMounted(async () => {
// ...
// ...
rubensConfiguratorApi.callbacks.onPartListUpdate = (partlistObj) => {
const sum = partlistObj.fullList.reduce((acc, part) => {
if (!part.articleNr) {
return;
}
// calc some pseudo-price, this must be replaced with your own price logic
const pseudoPrice = parseInt(part.articleNr.replace(/\D/g, ''));
if (!pseudoPrice || isNaN(pseudoPrice)) {
return;
}
acc += pseudoPrice * part.count;
return acc;
}, 0);
partlistObj.pseudoPrice = Math.round(sum / 1000);
console.log(partlistObj);
partlist.value = partlistObj;
};
// ...
// ...
return {
// ...
// ...
togglePopUp: async function () {
showPopUp.value = !showPopUp.value;
savedConfigurationData.value = null;
const savedData = await rubensConfiguratorApi.saveCurrentConfiguration();
savedConfigurationData.value = savedData;
},
// ...
// ...
};
});
# Code Sandbox
To see the results of this chapter you can visit the following Code Sandbox:
← Addons Landing page →