Color picker on front end

[vikram_s]

Hello,

We want to add color picker on website using API. So that end user can choose color from the predefined color picker even after end user is not satisfied with predefined colors then they should select the custom color of their choice. Please guide us how we can implement color picker.

Kindly check 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();
	
}); 

We want to add color picker on our below mentioned site similar as reference site:
Reference site:- Threekit | Quickdemos
Site: Abodu Two – Abodu

Thanks,
Vikram

[Will]

Hi VIkram,

The quickdemo site simply uses the HTML input color and using an event listener will set the appropriate color attribute on Threekit. You do have to make sure your Threekit item is using the attribute type of Color.

A very simple example is something like:

HTML

<input
  type="color"
  id="item-color"
  value={COLOR_VALUE}
  onChange={(e) => handleChange(e)}
  style={{ background: COLOR_VALUE }}
/>

Javascript

  const handleChange = (e) => {
    setCOLOR_VALUE(e.target.value);
    e.preventDefault();
    window.configurator.setConfiguration({ Color: e.target.value });
  };

In the quickdemo, we set COLOR_VALUE via React Hooks but you can handle that however you’d like.

Please let me know if this helps.

[vikram_s]

Hello Will,

We have convert React Hook in jQuery with below mentioned code:

<input
type=“color”
id=“item-color”
onChange=“handleChange(this.value);”

function handleChange(colorValue)
{
jQuery("#item-color").val(colorValue);
window.configurator.setConfiguration({ Color: colorValue });
jQuery("#item-color").css(“background-color”, colorValue);
console.log(colorValue);
}

Kindly check link where we are trying to implement:- Abodu One – Abodu

Product color not changed after choosing the color.

Thanks

[Will]

What attribute are you trying to target? Like I said, you need an attribute type of ‘color’ on Threekit to set the color from the picker. When you configurator.getAttributes() from the Mixer Demo, you can see a type: color

On the page you linked, you only have attribute types of String and Asset.

setConfiguration({Attribute_name: Attribute_Value})
I do not see an attribute called Color on your model, it seems you are trying to set an attribute that does not exist.

[vikram_s]

Hello Will,

Yes we are trying to target the color attribute and first we need to make sure Color attributes is set or not inside threekit model panel. After that will update you soon.

Thanks

[vikram_s]

Hello Will,

We are getting some little color issue in product on website using configurator API. Please check screenshot:

Kindly check deck color and overall color is little blur on website also we are not able to zoom product on website.

Below is configurator script we are using:-

.threekitPlayer({
authToken: “token_id”,
el: document.getElementById(“player”),
stageId: ‘stag_id’,
assetId: “asset_id”,
showConfigurator: false,
showAR: true,
showShare: true
})

Please check and let us know.

Thanks

[Will]

Hi Vikram,

Can you please elaborate on your color picker issue? Is it that the color name/hex does not show up on the form? Sorry I am not sure if I follow.

The zoom issue is related to our latest push and our team is aware but you can get around it by following these steps:

• In your org please navigate to Settings → Player

• Uncheck Zoom (in 2D) & Save

• Check zoom (in 2D) and save

Toggling the feature off/on again should fix the zoom.

[vikram_s]

Hello Will,

Our color picker is working fine. We have not any issue with color picker.

May be this is lighting issue but we are using stagId so please let us know how we can solve this lighting issue.

You can compare deck lighting in above screenshot.

[Will]

I will DM you for asset details.

[Will]

I have opened a case for you Vikram, someone from Threekit will be in touch via our support channels. Please contact me if you have any questions about this topic and feel free to post a new topic with any new questions.