Can you do conditional options within a select control?

Developers
1

When building a custom element is it possible to hide some of the items within a Select Control depending on what another control currently has set?

The module I’m building has two general options but not all of them can be combined - so - I’m hoping to show/hide some depending on the others current value.

I know this can be done on the control level itself with “required” but I don’t see anything at the options level.

Is there possibly a JavaScript event that runs in the builder whenever the Select Control changes that I could tap into?

I do see a list of events on the frontend, but nothing for the builder.

Thanks!

2

you just do like this

$this->controls['controlA'] = [
    // other properties  
    'type' => 'select',
    'options' => [
        'value_a' => esc_html__( 'Value A', 'bricks' ),
        'value_b' => esc_html__( 'Value B', 'bricks' ),
    ]
];

$this->controls['controlB'] = [
    // other properties  
    'type' => 'select',
    'options' => [
        'value_c' => esc_html__( 'Value C', 'bricks' ),
        'value_d' => esc_html__( 'Value D', 'bricks' ),
    ],
    'required' => ['controlA', '=', 'value_a']
];

$this->controls['controlC'] = [
    // other properties  
    'type' => 'select',
    'options' => [
        'value_c' => esc_html__( 'Value C', 'bricks' ),
        'value_e' => esc_html__( 'Value E', 'bricks' ),
        'value_f' => esc_html__( 'Value F', 'bricks' ),
    ],
    'required' => ['controlA', '=', 'value_b']
];
1 Like
3

To elaborate a little further what I’m putting together first lets you select a product and then the next option is the product colors.

Product A & Product B might support Green, Blue, Red, Yellow, and Pink – but – Product C only supports Blue and Pink.

I was hoping for an easy way on the frontend to just visually hide the unavailable color options on products that don’t support it.

I know you can do what you suggested but it would be pretty verbose to put all those combinations together as completely different controls.

There’s also the issue that if you set the color and then change the product while it does visually hide the control in the builder the value from the control set that’s hidden is still set, so it makes making sure the correct variable is used in the output a little trickier than I’d like.

It would be way easier to just dynamically hide the incompatible values from the dropdown - or - I suppose if there is a way to unset the control when it’s hidden by bricks that’d work as well.

4

or custom .js way to go.

you can add attributes to each variation and relative related variations as well and then write a js for it.

5

Thanks for the reply and sorry for the confusion, I’m not using WooCommerce at all.

This is regarding a custom element and the options in a “select” control.

Though I have used that plugin before unrelated and it does work well. :joy:

1 Like
6

– ignore
image

7

I’m talking about the builder interface, not the site itself.

1 Like
8

thats a required control

check my example element

this methodology possible for other controls types as well.

I would recommend first showing a select control after selection showing related checkbox controls or multi-select select control again that would work too.

this is the all currently existing controls for the bricks. copy paste to AI to write it some examples for you :wink:

9

Yes, I do understand the required argument for showing/hiding the control completely, but I want the control to always show and conditionally hide specific items in the object array based on the selection of a different control.

// Color
    $this->controls['color'] = [
      'tab' => 'content',
      'label' => esc_html__( 'Color', 'lt-bricks' ),
      'type' => 'select',
      'options' => [
        'black' 	=> 'Black',
        'white' 	=> 'White',
        'red'       => 'Red',
        'pink'.     => 'Pink',
      ],
      'inline' => true,
      'placeholder' => esc_html__( 'Color', 'lt-bricks' ),
    ];

Example being if the “Product” control is set to Product A it can show all of them, but if set to Product B it would hide the “Pink” and “Red” options.

I was hoping for some sort of js event I could use to hide some of the options from showing based on what is selected so I could still keep all the colors in a single control.

10

I’m trying to understand the purpose of these Product and Color controls. Are their values meant to be rendered as attributes? Should users be able to select a product and color on the frontend? So far, the only thing that’s clear is that this is a custom element and not tied to WooCommerce.

Without knowing how you’re rendering this element, it’s difficult to provide specific suggestions.

11

There’s not much functionality to it, really.

I’m putting together an element that’ll let our content entry team place photos of products/devices that have screens/windows in them and then I’m using a Background Control as a way for them to be able to place items within the screens/windows as background images and adjust the placement easily. On the front end for users it’s just a static element.

All & all it’s working great and right now in the render section I’ve gone some conditionals in place that override some of the values in variables to make it work, but it would be a lot easier to maintain if I were able to just hide different options within a single control depending on the selection of another so they couldn’t be selected at all.

I suppose I’m sort of hoping for something like the bricks/element/settings filter but that only seems to run on the initial load of the builder, rather than re-rendering the control each time options are changed.