Get pricing of the product using configurator API

vikram_s
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 u…

Comments

15 comments

  • Comment author
    vikram_s

    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

    0
  • Comment author
    William Thompson

    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")
    0
  • Comment author
    vikram_s

    Yes It’s working.

    Thanks Will

    0
  • Comment author
    vikram_s

    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?

     

    Thanks

    0
  • Comment author
    William Thompson

    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.

    0
  • Comment author
    vikram_s

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

    Ok, I’m doing DM to you.

    0
  • Comment author
    William Thompson

    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.

    0
  • Comment author
    William Thompson

    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.

    0
  • Comment author
    vikram_s

    Getting object how we can get price only?

    0
  • Comment author
    William Thompson

    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")

    0
  • Comment author
    vikram_s

     

    0
  • Comment author
    William Thompson

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

    0
  • Comment author
    William Thompson

    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:

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

    0
  • Comment author
    Suresh_Lamichhane

    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,

    0
  • Comment author
    William Thompson

    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

    0

Please sign in to leave a comment.