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 …

Comments

10 comments

  • Comment author
    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

    0
  • Comment author
    William Thompson

    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.

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

    0
  • Comment author
    William Thompson

    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.

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

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

    0
  • Comment author
    William Thompson

    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.

    0
  • Comment author
    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.

    0
  • Comment author
    William Thompson

    I will DM you for asset details.

    0
  • Comment author
    William Thompson

    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.

    0

Please sign in to leave a comment.