Restyling radio buttons. Need some quick JS help I think

[x97wehner]

Hey all,

I'm working to restyle my radio buttons on my product attributes to look more like buttons. You can see a sample below. Ignore the actual radio button showing, I can hide that easily later once I fix this issue. I've used css to style them correctly so when I select the label button, it selects the radio correctly. It does not, however keep the active color style applied after it's checked (In this case the button checked should be dark gray), nor does it apply the style on page load for default checked radio options. It only applies the dark gray I desire, when actually clicking the label button.

I'm sure it's to do with the "Checked" class that TB inserts when a radio is selected. You can see below. I'm no JS expert but I believe it is required to solve this issue. Can anyone give me a quick fix/answer on how to apply style to the checked label button always?

<fieldset class="attribute_fieldset">
  <label class="attribute_label">Hand&nbsp;</label>
  <div class="attribute_list">
    <ul class="attribute_radio_list">
      <li>
        <div class="radio" id="uniform-26"><span class="checked"><input type="radio" class="attribute_radio" name="group_7" id="26" value="26" checked="checked"></span></div>
        <label for="26" class="radio_label">Right
        </label>
      </li>
      <li>
        <div class="radio" id="uniform-27"><span><input type="radio" class="attribute_radio" name="group_7" id="27" value="27"></span></div>
        <label for="27" class="radio_label">Left
        </label>
      </li>
    </ul>
  </div> <!-- end attribute_list -->
</fieldset>

I appreciate the help

Edited January 21, 2022 by x97wehner

[wakabayashi]

Is this site online? I guess, it would be much easier to help, if we could test that with the source code. If the class "checked" is set, it should be possible to style just with CSS IMO. But maybe I didn't get the problem correct.

[x97wehner]

1 hour ago, wakabayashi said:

Is this site online? I guess, it would be much easier to help, if we could test that with the source code. If the class "checked" is set, it should be possible to style just with CSS IMO. But maybe I didn't get the problem correct.

Sure. It's a dev site so I had to take it out of maintenance mode first. You can take a look here now.

https://devfreshjan2022.twighockeycompany.com/office/rogue-b-hockey-stick#/23-age_group-senior

You'll see that the radio selectors correctly show what is picked in navy blue on mobile devices. However on desktop or laptops with higher resolution, it does not show the navy blue coloring and I cannot figure out why.

Edited January 21, 2022 by x97wehner

[wakabayashi]

Your html markup is not the same on mobile as on desktop. It seems, that you change the markup on desktop version by some Javascript.

On desktop:

<li class="">
																<div class="radio" id="uniform-26" style="display: none;"><span class="checked"><input type="radio" class="attribute_radio" name="group_7" id="26" value="26" checked="checked"></span></div>
																<label for="26" class="radio_label">Right
															</label></li>

On mobile:

<li class="">
																<input type="radio" class="attribute_radio" name="group_7" id="26" value="26" checked="checked">
																<label for="26" class="radio_label">Right
															</label></li>

Do you know from where this manipluation comes from? Maybe it's your theme. You could either change the CSS or try to resolve the manipulation. First is probably easier, second is probaly cleaner 🙂

[x97wehner]

44 minutes ago, wakabayashi said:

Your html markup is not the same on mobile as on desktop. It seems, that you change the markup on desktop version by some Javascript.

On desktop:

<li class="">
																<div class="radio" id="uniform-26" style="display: none;"><span class="checked"><input type="radio" class="attribute_radio" name="group_7" id="26" value="26" checked="checked"></span></div>
																<label for="26" class="radio_label">Right
															</label></li>

On mobile:

<li class="">
																<input type="radio" class="attribute_radio" name="group_7" id="26" value="26" checked="checked">
																<label for="26" class="radio_label">Right
															</label></li>

Do you know from where this manipluation comes from? Maybe it's your theme. You could either change the CSS or try to resolve the manipulation. First is probably easier, second is probaly cleaner 🙂

I'm pretty sure that markup is out of the box with TB. That site is running panda theme, however, my main site runs Warehouse. Both have the same markup. I found an old prestashop forum post that shows the same markup as well.

Do you know how to resolve the desktop issue either way? With CSS or other? I've been spinning my wheels on it for 2 days and can't figure it out.

Edited January 21, 2022 by x97wehner

[wakabayashi]

Try this selector:

#attributes .attribute_list li label:focus,
#attributes .attribute_list li label:hover,
#attributes .attribute_list li label:active,
#attributes input[type="radio"]:checked+label,
#attributes .attribute_list li div.radio span.checked+label

Edit: thats probably not working. Need to rethink.

Edited January 21, 2022 by wakabayashi

[haylau]

Looking great, when complete could you make into a module to share? Or a short tutorial showing exactly what you changed and where?

[wakabayashi]

In this case we went for a JS solution.

<script>
    document.querySelector('#buy_block').addEventListener("click", function(event) {
        updateLabelsSelectedClass();
    });

    updateLabelsSelectedClass();

    function updateLabelsSelectedClass() {

        var attributes_options = document.querySelectorAll('#attributes input');

        if (attributes_options) {
            attributes_options.forEach(function (element) {
                var label = element.closest('li').querySelector('label');
                if (label) {
                    (element.checked) ? label.classList.add('labelSelected') : label.classList.remove('labelSelected');
                }
            })
        }
    }
</script>

It's not the cleanest solution, but it seems to work out well. In general this something that should be done in the theme and not by a module hack 🙂

[x97wehner]

Thanks for helping me solve this offiline @wakabayashi   The radio buttons are now shown as below

 

Edited January 21, 2022 by x97wehner