Get pricing of the product using configurator API

Development
1

Hello,

We want to get the pricing of the product using the configurator API and show it to the end customer. kindly help us we can get the price of the product.

Kindly check the the below mentioned script that we are using to load the configurator on website :

window
.threekitPlayer({
authToken: “public_token”,
el: document.getElementById(“player”),
assetId: “asset_id”,
showConfigurator: true,
showAR: true,
showShare: true
})
.then(async api => {
window.player = api;
var data = window.configurator = await api.getConfigurator();

});

Thanks

2

Hi Vikram, we are currently in the process of documenting this new feature but in the meantime I hope this will help you. You can retrieve the price of your item as configured in 2 steps:

  1. Use the Pricebook API to retrieve the ID of the pricebook you are using
  2. Use the configurator API to retrieve the price configurator.getPrice(pricebookId, currency) for example: configurator.getPrice("01234567-89ab-cdef-0123-456789abcdef", "USD")
3

Yes It’s working.

Thanks Will

1 Like
4

Hello Will,

I am getting the default price of the product always after changes any configuration like “Roof Selection”: “Composite Shingle” to “Standing Seam”.

Please check the screenshot and suggest to us how we can do it?

Pricebook
Pricebook1920×1080 246 KB

Thanks

5

Have you tested on the platform and confirmed that it is set up correctly there and updating the price? If so please DM me the asset details and I will take a look.

6

Yes, we have tested it on the platform it’s working fine.

Ok, I’m doing DM to you.

1 Like
7

Thanks for the details @vikram_s - I’m not sure where the issue lies but I believe it is something in your front-end code. There is a thread here that I think may be helpful to you.

There is an undocumented API that will listen for configuration changes and with that you should be able to correctly retrieve the changing price. I did a little test locally and was able to see the price changes with the snippet below. The pricebook ID I retrieved from your org:

const privateConfig = window.player.enableApi("player").getConfigurator();

privateConfig.on("setConfiguration", (config) =>
  console.log(
    window.configurator.getPrice("025e3fea-5a6e-453f-8e09-05d3258cb15c", "USD")
  )
);

Please let me know if this is helpful.

8

Alternatively, window.configurator.getPrice("025e3fea-5a6e-453f-8e09-05d3258cb15c", "USD") should always return the price at the time of the API call. Let me know if you experience otherwise.

9

Getting object how we can get price only?

Data
Data1920×1080 242 KB

10

That object is returned when you use privateConfig.on(...) event listener. If you actually change configurations you will see the price. Or like I said you can call window.configurator.getPrice("025e3fea-5a6e-453f-8e09-05d3258cb15c", "USD")

11

aaa
aaa1920×1080 180 KB

12

Please DM me the link to your test website, I believe the issues are a conflict on the front-end.

13

I believe the issue is the way you are setting the configuration with your custom form. The attribute Roof Selection is a Part Reference type and therefore needs to be set with an object containing a key-value pair of {assetId: ASSET_ID}. Currently it is being set with a String value.

ex: configurator.setConfiguration({"Roof Selection": {assetId: "1d93601a-6657-446f-8751-80e1cf631ba7"}}).

There is an indication on your test website that the configuration is not being set correctly - the roof is missing:

image
image1570×828 156 KB

If you set the configuration correctly, it will also respond with the updated price.

1 Like
14

Hi Will,
When you mention this:
window.configurator.getPrice(“025e3fea-5a6e-453f-8e09-05d3258cb15c”, “USD”)

How do we get this id value? “025e3fea-5a6e-453f-8e09-05d3258cb15c”
Let me know.
Thanks,

15

Please check out the Pricebook API Docs.

You will need to create a pricebook either via API or on the platform and then you can list all pricebooks in your org by hitting the endpoint:
https://{ENV}.threekit.com/api/orgs/{ORG_ID}/pricebooks

You can find your org ID in your org by navigating to Settings → Profile