Color Picker and Text Box

  • Posts: 78
  • Thank you received: 1
11 years 2 months ago #121297

-- url of the page with the problem -- : www.ukoalabag.com
-- HikaShop version -- : Essential 2.2.0
-- Joomla version -- : 2.5.13
-- PHP version -- : 5.3.13
-- Browser(s) name and version -- : Firefox 22.0

Hi Guys,

Can you tell me how to implement 2 color selectors and a text area? When the client selects a product, we would like for them to be able to chose 2 RGB colors, maybe from an color map. And they also need an area to type specific instructions.

How can I add these?

Please Log in or Create an account to join the conversation.

  • Posts: 26158
  • Thank you received: 4028
  • MODERATOR
11 years 2 months ago #121314

Hi,

For the "item custom field", HikaShop business will be required.
Thanks to this version you will be able to create these "item custom fields" so the customer will be able to set the custom fields while adding a product into his cart.

After that, we don't have a "color picker" custom field but you can use a classical textbox and plug a color picker javascript library on it (or create a new custom field type using a custom plugin).

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 78
  • Thank you received: 1
11 years 2 months ago #122321

Thanks Jerome, I bought the Business Version. I can't find "Item Custom Field" as you speak of to start adding the textbox's. Where do I find this?

Please Log in or Create an account to join the conversation.

  • Posts: 26158
  • Thank you received: 4028
  • MODERATOR
11 years 2 months ago #122398

Hi,

In the backend, you can access to "Display > Custom fields".
By creating a "New" custom field, you will be able to choose the table (witch is the type/target) and you have to choose "item".

After that you can create the type you want, a textbox, a dropdown, etc.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 78
  • Thank you received: 1
11 years 2 months ago #122444

Thanks Jerome!!

I am getting very close here, just a little problem with the color picker. Can you please look at the site I am working with: www.originalweddingglass.com/store-2

I have some customization fields, and when you click "Add to Cart" the color picker values aren't transferred. I am using a 'Custom Text' box in Display -> Custom Fields filed to fill the value <input class="color">, and here is the doc and js that runs this color picker: jscolor.com/

It appears the hex value is in the field, but not being transferred to checkout, so we won't know what color to use when an order is sent.

Any help is appreciated. Or maybe you can recommend a different color picker if this one isn't compatible?

Attachments:
Last edit: 11 years 2 months ago by adeptdesigns.

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
11 years 2 months ago #122448

Jerome was talking about create a custom field of the type "text" and not "custom text". The input will be generated and saved automatically by HikaShop in that case and yu'll just have to plug the color picker on that generated input.

Please Log in or Create an account to join the conversation.

  • Posts: 78
  • Thank you received: 1
11 years 2 months ago #122468

Hi,

I have to use this to call the picker: <input class="color">

When I select "Field Type - Text" there is no place to insert that code. I am missing something here, your assistance is greatly appreciated.

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
11 years 2 months ago #122530

Hi,

You can't specify the class of the input.
You can however use manual binding as explained on their website to transform a normal input into a color picker just with its id with a few lines of javascript on your page :
jscolor.com/try.php#manual-binding

Please Log in or Create an account to join the conversation.

  • Posts: 78
  • Thank you received: 1
11 years 2 months ago #122616

I can't thank you guys enough for your quick and prompt support! I am clearly still missing something however.

I have the js added to the site directory, and correctly pointed in the head of the template index.php file. I tried to use the ID from the source code, and that does not activate the color picker. Have I called the wrong ID?

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
11 years 2 months ago #122629

That's the id of the span where the input is. Look on the right of that line and you'll find your input with the id "color".

Last edit: 11 years 2 months ago by nicolas.

Please Log in or Create an account to join the conversation.

  • Posts: 78
  • Thank you received: 1
11 years 2 months ago #122664

I should have mentioned, I tried that too. It didn't work either. :(

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 2334
  • Thank you received: 403
11 years 2 months ago #122694

It probably means you have this id multiple times on this page.
This happens when the input is displayed more than one time. So make sure this input is only displayed once.
If it still doesn't work, check your browser console to see if you have any JS error.

Please Log in or Create an account to join the conversation.

Time to create page: 0.093 seconds
Powered by Kunena Forum