dependent characteristics

Hi,

Normally, with the "Characteristics dynamic display" setting activated in the HikaShop configuration, you'll only get the possible values in each dropdown, based on the variants you've added to the product.
So in your case you would need to create such variants:
- with frame with color 1
- with frame with color 2
etc
- with frame with color x
- without frame without color
Then, when you select the frame characteristic, the color characteristic selector should appear. And if "with frame" is selected, then you should be able to select the colors from 1 to x, and if "without frame" is selected, then you should be able to select the color "without color". But there is no system to hide the second selector in that second case.

An alternative would be to only have a frame characteristic in your product, and the have a custom field of the table "item" for the color selector.
Then, you could hide/display the custom field based on the value selected in the characteristic selector with a few lines of javascript custom code added to the page.
www.hikashop.com/forum/product-category-...ased-on-variant.html

Another alternative would be to have two custom item fields, one for the frame selection and one for the color selection. In that case, in the color custom field, you can just select the frame custom field and its value "with frame" in the "displayed limited to" setting and you'll have the switch done for you automatically. The drawback though is that custom item fields can't change the price of the product... unless you combine it with a custom plugin, but that means more development and in that case, the custom javascript of my previous suggestion is simpler to implement.

Hi,

Well, it would be something like that:

<script>
window.Oby.registerAjax("hkAfterUpdateVariant", "my_custom_function");
function my_custom_function() {
 if(document.getElementById('XXX').value == 'YYY') {
  document.getElementById('ZZZ').style.display = 'block';
 } else {
  document.getElementById('ZZZ').style.display = '';
 }
}
my_custom_function();
</script>

Hi,

The YYY value is supposed to be an integer number corresponding to the characteristic_id of the value of the characteristic in the database.
You need to check the "value" attribute of the option in the HTML of the select on the page to get the correct value
As your website frontend is not accessible and you didn't provide a link to the product where you're doing your tests, I can't give you the exact value you should use.

Hi,

Yes. Please use our contact form for that and include a link to this thread for reference in your message:
www.hikashop.com/support/contact-us.html

Hi,

I checked your page's HTML and javascript code and here is what I found:
monosnap.com/file/MU1MuAFBKy6D9Y1D5rcZUjJOWyTVYe
monosnap.com/file/r5MOwz3919lpSbIN7i12RoWqIJDaGO
As you can see, the sim option of the characteristic select with the id hikashop_product_characteristic_18 has the value 16 and not 2 like you set in the javascript code.
Change that and it should work better.

Hi,

You changed the line:
document.getElementById('hikashop_item_cordamoldura').style.display = 'none';
that you had before to:
document.getElementById('hikashop_item_cordamoldura').style.display = '';
monosnap.com/file/od4xnBohdS9m3ri0TuogsDOPXaV0lc
Because of that, both the if and the else of that function do the same thing and thus it's normal that the custom item field is always displayed. That was actually an error I had made in my initial code proposition that you had fixed when adding the first version of the javascript on your end.

Hi,

I have another mistake in my javascript.
You shouldn't add the double quotes around the function name.
So it should be like that:

<script>
window.Oby.registerAjax("hkAfterUpdateVariant", my_custom_function);
function my_custom_function() {
 if(document.getElementById('hikashop_product_characteristic_18').value == '16') {
  document.getElementById('hikashop_item_cordamoldura').style.display = 'block';
 } else {
  document.getElementById('hikashop_item_cordamoldura').style.display = 'none';
 }
}
my_custom_function();
</script>

Hi,

That's because even if you hide the custom item field, it is still in the form on the page, and thus when the form is submitted when you click on the add to cart button, the default value will be sent to the cart.

The solution here is that among the values of your custom field, you have an entry without anything entered in the "value" input field and that you select that value in the "default" setting of the custom field.
That way, the custom field selection will be discarded during the add to cart process unless the customer selects something else in the custom field.