Event Listeners for Configuration change

Development
1

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?

image
image1879×577 73.5 KB

Thanks

2

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.

3

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

4

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.

5

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

6

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:

7

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

1 Like
8

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,

9

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

10

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