Event Listeners for Configuration change

Suresh_Lamichhane
I want to update the Part Number and Price on the right hand above Add To Cart button, on changing Color/Size configurations. I know the information lies within the configurator object and we can get it by configurator.g…

Comments

10 comments

  • Comment author
    Suresh_Lamichhane

    I want to update the Part Number and Price on the right hand above Add To Cart button, on changing Color/Size configurations. I know the information lies within the configurator object and we can get it by configurator.getConfiguration() call. However, I want to get it when the event is fired, so what’s the event listener I am looking for?

    Thanks

    0
  • Comment author
    William Thompson

    Hi Suresh welcome to the forum. There are no built-in events on our configuration form at the moment.

    Most of our implementations do not use Threekit’s off-the-shelf form, typically UI elements are created that fit in with the website’s larger design to drive configuration changes and if event listeners are needed, you can add them to your custom elements.

    For example this is creating custom drop downs in react after all the item’s attributes have been saved in a a variable called attrs.

    {attrs.map((e) => {
            return (
              <select
                name={e.name}
                id={e.name}
                key={e.name}
                onChange={(e) => setConfig(e)}
              >
                {e.values.map((e) => {
                  return (
                    <option key={e} value={e}>
                      {e}
                    </option>
                  );
                })}
              </select>
            );
          })}
    

    Please let me know if this is helpful.

    0
  • Comment author
    Suresh_Lamichhane

    Hi Will,

    So, on this page, I have used a configurator, you will see if you scroll down a bit:
    https://tequipment-design.idevdesign.net/fluke117.html?IsConfigure=1

    Is there no way I can grab the configurations upon changing of the Color/Size? Currently I am leveraging DOMsubtreemodified event, you will notice how i have used it on the page. But it doesn’t work like how i expected.

    Let me know.
    Thanks

    0
  • Comment author
    William Thompson

    Talking to my product team I was pointed to an API that is not yet documented. You can create a reference to the private configurator instance and use this snippet to create a listener like this:

    const privateConfig =  player.enableApi(’player’).getConfigurator()
    privateConfig.on(’setConfiguration’, config=> console.log(config));
    

    Let me know if this helps.

    0
  • Comment author
    Suresh_Lamichhane

    Hi Will,
    Sorry for replying late, that worked (however, the config object of the arrow function sometimes would have wrong configurations, so what i did was i again called configurator.getConfigurator() inside the function and that worked. My next question is how do I get the image of the selected configuration. I know the image url would look like this:
    https://preview.threekit.com/api/files/a879186c-185f-4229-a352-f1d5c7e22d50/content?bearer_token=ccbbfefe-4243-4a8f-9bc8-0772395918ec

    Where a879186c-185f-4229-a352-f1d5c7e22d50 is the fileId. How can i get this value for the selected configuration? Is there an easy way?
    Please let me know.

    Thank you,
    Suresh

    0
  • Comment author
    William Thompson

    There are two approaches you can take. You can either take a snapshot with the client-side API or you can retrieve images on from the platform with our server-side API.

    There is a small caveat with the snapshot technique: it creates an image from the current player’s viewport so if your user interacts with the model at all before taking a snapshot, that adjustment will be reflected in the snapshot. Be sure to either set a camera to position your item in the way you’d like or limit movement of the item in the platform.

    I believe the server-side call may be your preference if you are trying to retrieve the fileId. You should not have to do any webgl renders since you already have images on the platform, this API call should get them to you.

    Here are some posts that may help you, let me know if I can clarify anything:

    This is definitely possible from the client-side API. If you have an embedded player you can do a quick test with these 4 lines of code and it will capture the current contents in the player: let image = new Image(); let imgSrc = await player.snapshotAsync(); image.src = imgSrc; document.body.appendChild(image)
    If you need the thumbnails to match a configuration I would fire off a batch of WebGL renders so each configuration has an image attributed to it and we can query the Layers API for those images. It should be a matter of simply making a GET request to a URL similar to something like: https://{ENV}.threekit.com/api/layers/layer?bearer_token={TOKEN}&assetLayerConfiguration={CONFIG}&assetId={ASSETID} A couple of things to note: If you are making this request from the browser, make sure your be…
    0
  • Comment author
    Suresh_Lamichhane

    Thanks Will, that worked. I did the same way you have mentioned here and it worked.
    Thanks

    0
  • Comment author
    Suresh_Lamichhane

    Hi Will,
    I talked to our client and client said they have to train non technical people for the item and their asset setup, while catalog items setup is easy from the dashboard, the asset one is a little tricky when we are using import.js and layers api. It’s easy enough for the technical people like us. So, we decided we would go via the dashboard route for this. Phil created a canvas for us and we used the datatables approach with the assetId (image id) on the csv and that worked with the rules mapping. Now my question is, how can we just grab the image like with the layers api?

    For example, the asset I am interested in is:
    https://preview.threekit.com/o/american-eagle-dev/assets/7c79757b-2fcc-414d-9f90-c43da63da84b

    With the snapshot style, you mentioned, it carries the image data encoded, while this looks like it’s working, I want to store this on our database table and use it on other pages like cart/checkout/confirm pages. This is a very large field to store on the database table. Can I get a image url instead? Also, when we upload the images to the assets folder, it looks like it becomes a 3D rather than 2D. All we need is a simple 2D image url with the configuration selected.

    Let me know.
    Thank you,

    0
  • Comment author
    Suresh_Lamichhane

    Will,

    Actually upon inspecting element, I found this.
    https://preview.threekit.com/api/assets/thumbnail/83507d5e-2676-4c39-8ebf-c231f72f90ce?orgId={orgId}&failOnEmpty=true

    Not sure if there is a better way to achieve what I am looking for.
    Thanks

    0
  • Comment author
    William Thompson

    Hi Suresh, I spoke with Phil on my team and he said there was a call today to help resolve some of these points. Was that helpful in resolving these or are there some outstanding challenges?

    Let me know.

    Thanks,
    Will

    0

Please sign in to leave a comment.