0

I have got a problem with css after Drupal processes radio buttons on Drupal Commerce product page. Radio buttons are formatted (images instead of typical radio)

Formatted radios

enter image description here

After clicking any of radio buttons:

enter image description here

The HTML:

<div class="form-item form-type-radios form-item-attributes-field-pack-size">
    <label for="edit-attributes-field-pack-size">Pack size </label>
    <div id="edit-attributes-field-pack-size" class="form-radios">
        <div class="form-item form-type-radio form-item-attributes-field-pack-size">
            <input type="radio" id="edit-attributes-field-pack-size-50-grams" name="attributes[field_pack_size]" value="50 grams" checked="checked" class="form-radio ajax-processed">  <label class="option" for="edit-attributes-field-pack-size-50-grams">50 grams </label>

        </div>
        <div class="form-item form-type-radio form-item-attributes-field-pack-size">
            <input type="radio" id="edit-attributes-field-pack-size-100-grams" name="attributes[field_pack_size]" value="100 grams" class="form-radio ajax-processed"> 
            <label class="option" for="edit-attributes-field-pack-size-100-grams">100 grams </label>

        </div>
    </div>
</div>

The SCSS is:

    #edit-attributes-field-pack-size {
        overflow: hidden;
        input {
            opacity: 0;
        }

        label[for|="edit-attributes-field-pack-size"] {
            display: block;
            width: 102px;
            height: 102px;
            background: url('/sites/all/themes/blissout/img/radio.png') no-repeat;
            text-indent: -1000px;
            overflow: hidden;
        }
        label[for|="edit-attributes-field-pack-size-50-grams"] {

        }
        label[for|="edit-attributes-field-pack-size-100-grams"] {
            background-position: -102px 0;
        }
        label[for|="edit-attributes-field-pack-size-500-grams"] {
            background-position: -204px 0;
        }
    }

And it works perfectly until the ajax is "preprocessed" on radios. That Ajax calculates the price depending on the size of selection (it's drupal commerce code). It's different product variation but the classes doesn't change.

I have tried putting CSS into html.tpl.php. If the trigger('create') is solution could someone describe me step by step how to write js/jquery code for it?

1

The problem is you're relying on an ID for your CSS selector, but when Drupal's Forms API refreshes a form via #ajax, it appends a numeric suffix to the ID to maintain a unique ID prior to replacement. Your CSS no longer applies because the selector no longer matches any element on the page. You should switch this to some class based selector instead.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.