Make clickable select option values non-clickable / Targeting-Mode

Tagged: 

Author Posts

uptwo November 20, 2020 at 2:34 pm

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

Hey,

i have a question / a request. If i want to target an option value as example via the targeting mode i can’t target the option its self. It selects the option, but won’t target it. To bypass that, i need to target the parent and search for the option value manually.

As an example:
Want to Target .color-variable-item-red > span
Result: Value is clicked
Bypass: Select .color-variable-wrapper and navigate to .color-variable-item-red > span

Relevant Code:

 <td class="value woo-variation-items-wrapper">
                              <select id="pa_color" class="hide woo-variation-raw-select woo-variation-raw-type-color" style="display: none;" name="attribute_pa_color" data-attribute_name="attribute_pa_color" data-show_option_none="yes">
                                <option value="">Wähle eine Option</option>
                                <option value="red" class="attached enabled">rot</option>
                                <option value="black" class="attached enabled">schwarz</option>
                              </select>
                              <ul role="radiogroup" aria-label="Farbe" class="variable-items-wrapper color-variable-wrapper" data-attribute_name="attribute_pa_color" data-attribute_values="[&quot;red&quot;,&quot;black&quot;]">
                                <li aria-checked="true" data-wvstooltip="rot" class="variable-item color-variable-item color-variable-item-red selected" title="rot" data-title="rot" data-value="red" role="radio" tabindex="0">
                                  <span class="variable-item-span variable-item-span-color" style="background-color:#dd3333;"></span>
                                </li>
                                <li aria-checked="false" data-wvstooltip="schwarz" class="variable-item color-variable-item color-variable-item-black" title="schwarz" data-title="schwarz" data-value="black" role="radio" tabindex="0">
                                  <span class="variable-item-span variable-item-span-color" style="background-color:#000000;"></span>
                                </li>
                              </ul>
                              <a class="reset_variations" href="#" style="visibility: visible; display: inline;">Auswahl zurücksetzen</a>
                            </td>

Is there a way to target option values? Or rather is it possible?
And if i can ask you another question; Any updates on the possibility to load specific stylesheets on specific sites only?

With best regards,
Max

Sebastian November 20, 2020 at 4:29 pm

Hey Max,

When an element isn’t directly clickable for whatever reason, it is possible to target elements without clicking them.

Expand the advanced targeting controls, click near the element, and then click on the line of HTML for the element. See this video example.

So the line you are looking for in the HTML pane would look like this:

<span class="variable-item-span variable-item-span-color" style="background-color:#dd3333;"></span>

In your case, some JavaScript behaviour attached to the pseudo select element is probably preventing MT from selecting the options with regular click.

Does that make sense?

Thanks,
Sebastian

You must login or register to reply to this topic.