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

28 comments

  • Comment author
    William Thompson

    I have opened a case to get you more assistance, case #00006582 please refer to communication there for more support. 

    1
  • 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
  • Comment author
    Suresh_Lamichhane
    • Edited

    William Thompson

    Hi Will,

    Hope you are doing good. I was playing with the new Treble React version of the threekit. I want to achieve the same thing as above. Details can be found here:

    https://community.threekit.com/hc/en-us/community/posts/10803041599515-Add-an-onChange-event-handler
    Can you please let me know how do i know when the window.threekit.configurator.getConfiguration() changes so that I can fire up my ajax with the currently selected config?

    Please let me know.

    Thanks

    0
  • Comment author
    William Thompson
    • Edited

    Hi Suresh_Lamichhane you can find more information about our configuration event here. Simply, you can listen for configuration events like this in treble:

    threekit.player.on('setConfiguration', e => {  console.log(e); }) 
    0
  • Comment author
    Suresh_Lamichhane

    William Thompson

    The problem right now i have is, the window.threekit is not defined on the DOM load. Do you know how can i initiate this object? It used to work before treble, when just using the old version of threekit (not the react).

    Thanks

    0
  • Comment author
    William Thompson

    If you are using Treble, the `window.threekit` object is exposed when the player has been initialized and `threekit.player.on()` events will be available there:

    If you are not using treble, the player can be called something else depending on what the developer called in, I typically use `window.player`:

    If the crux of the issue is you are trying to start the event when the DOM loads (which is probably before the player loads) the object is not available, the Use Threekit Init hook in Treble may be helpful. You can determine if the player has loaded or not and then set the event listener.

    Let me know if this is helpful or not. 

    0
  • Comment author
    Suresh_Lamichhane

    William Thompson

    Awesome this worked for me. I am still new to exploring react, but seems like this worked. Appreciate it! Thanks

    0
  • Comment author
    William Thompson

    Fantastic! Glad it is working, please let me know if you have any more questions. 

    0
  • Comment author
    Suresh_Lamichhane

    William Thompson

    Hi there,

    The useThreekitInitStatus() hook worked. However I see some funky things which is not correct. The e.appliedConfiguration object doesn't have the right value for certain properties. If I do console.log(e.appliedConfiguration), it shows correct, but if i pass the e.appliedConfiguration to a function and check the object, it's the not the same as what console.log shows.

    Am i using the hook wrong?
    This is how I am currently using it, which I am not sure if it's the right way to use the hook:

    Can you please let me know?
    Thanks you

     

    0
  • Comment author
    Suresh_Lamichhane

    William Thompson

    Correction: even console.log() is not logging the right configuration. It's when the setConfiguration event is finished and if I type threekit.configurator.getConfiguration() in the console manually, it gives me the correct value. Please let me know.

    Thanks you

    0
  • Comment author
    William Thompson

    Hi Suresh_Lamichhane is the goal to provide the newly set configuration to another function? In the event, is the `e.configuration` rather than `e.appliedConfiguration` holding the values you are looking for?

    0
  • Comment author
    Suresh_Lamichhane

    Hi William Thompson

    Yes, the goal is to provide the newly set configuration to another function. e.configuration object also has the wrong data same as applied one. What's weird is if i have console.log(e) and the console logs the correct data, but if i read the configuration from e object, it has stale data, it's like some pending event hasn't been finished yet, so i need something like promise and read the data once the setConfiguration event fully finishes. Can you please think of something?
    Thank you so much. 

    0
  • Comment author
    William Thompson

    setConfiguration will result in a promise and return the newly set configuration, would doing something like this achieve the result you are looking for? Perhaps with this variable you could provide it to your function. If this does not help please let me know and I will find more guidance:

    `let newConfig = await configurator.setConfiguration({Finish: 'Gold'})` 

    0
  • Comment author
    Suresh_Lamichhane

    William Thompson

    I need this on the event handler though within the component that useThreekitInitStatus() hook:
    window.threekit.player.on('setConfiguration', (e) => { callAjax(e) });

    How can I use await here?

    0
  • Comment author
    William Thompson

    I fear that we are getting into Javascript and away from Threekit troubleshooting. Looking at the code snippets you provided earlier I am uncertain whether or not you are using React as effectively as possible - you are creating a ThreekitInitCheckComponent as a React Component which typically renders a dynamic element to display on a screen. Logic like that could be used in React Hooks which are similar to React lifecycle methds like componentDidMount, componentDidUpdate, etc.

    I am not sure I am the best person for guidance on React, however I am happy to help with Threekit use-cases. 

    0
  • Comment author
    Suresh_Lamichhane

    Hi William Thompson

    Can you provide us who might be the ideal source to talk to regarding this?

    Basically I just want to achieve this in threekit treble:

    Fire up an ajax to our server as soon as the configuration changes on the react flatform. Basically an event handler that listens for the configuration event change. 

    Thanks

    0
  • Comment author
    William Thompson

    First let's try this. to use await in your function you need to make sure the function is async. 

    window.threekit.player.on('setConfiguration', async (e) => {/// code here });

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

    0
  • Comment author
    Suresh_Lamichhane

    William Thompson

    I tried this and it still didn't work.

    window.threekit.player.on('setConfiguration', async (e) => { await callAjax(e)});

    0
  • Comment author
    Suresh_Lamichhane

    William Thompson

    If you get a chance, can you try this on your workstation. I have tried so many things but to no avail.

    Please let me know if it works for you using trebl.

    Thanks

    0

Please sign in to leave a comment.