Highlighting current variant on product page

[colinashvin]

Hello 

I am working on a shopify website theme (pipeline) and in the product page I am facing an issue.

the previous image shows the selection on the variant for a certain product. The main aim is to have the variant be selected (highlighted) when the product page loads. From the image I managed to achieve that.

However, in the product page I also have a sticky add to cart form that is fixed at the bottom of the page and displays on certain scrolling depths on the page

as the image shows, the sticky form is not highlighting the current selected variant. 

My aim is to have those two forms synced and both displaying the current selected variant.

The two images below show the code for the first form of the product (the one that functions properly)

The two images below show the code for the second form of the product (the one that isn't highlighting )

The two images on top show the code for the first form of the product (the one that functions properly)

Note: The functionality of the forms is working, if I change the variant from the second form it does highlight the variant on the first form. However the highlight on the second form is working.

The image above shows the CSS selector that highlights the lable for the selected variant.

My thinking is that in the backed, and since those variants are radio buttons, only 1 the inputs is marked as "checked" and therefore the highlighting happens only on the first form.

Is there a way for me to keep the functionality of both forms synced and at the same time have them both highlight the selected variant ?

[PaulNewton]

Please don't don't make contributors have to squint at images, there is a code format button in the post editor.

Is there even .radio_fieldset on the sticky bar, also use the dev tools console to verify it is actually the radios are checked then try manually applying the style.

The javascript involved mostly likely uses queryselector or similar for the variant radios that only returns the first product form fields y to get operated on which is why only the first instance of the forms and it's radios update properly.. But often you can't just switch querySelector for querySeletorAll as also need to make the related logic loop over every set of forms or it's inputs.

---

@colinashvin wrote:

My thinking is that in the backed, and since those variants are radio buttons, only 1 the inputs is marked as "checked" and therefore the highlighting happens only on the first form.

Verify that by checking the rendered source itself ctrl+u in most browsers.

If the sticky footer is not rendered in the html but is a clientside template that generates when the page load this can also be part of the problem.

Some of this dupe problem back and forth can be solved by just making the single sole product form absolutely positioned into the sticky footer, or the entire form the sticky element, or deep cloning it on the client-side. 

Also be sure the entirety of the sites footer is still reachable when using sticky footers and that there is enough overshoot.

Goodluck.

[colinashvin]

Hello, apologies for including images instead of code.

I checked the rendered source, and it appears both forms do render in the HTMl, and as I suspected the only input marked as checked is the very first one in the HTML 

Follwing is the rendered code in the HTMl and you can see 6 different variant inputs and only the first one is checked.

<div class="product__form__outer " data-product-form-outer ><form method="post" action="/cart/add" id="product-form-template--16270839316736__main-7851598151936" accept-charset="UTF-8" class="shopify-product-form" enctype="multipart/form-data" data-product-form="false" data-product-handle="pap-whitening-strips"><input type="hidden" name="form_type" value="product" /><input type="hidden" name="utf8" value="✓" /><input type="hidden" name="id" value="43194920173824"><div class="shop-pay-terms"></div><div class="form__selectors">
<div class="selector-wrapper  selector-wrapper--fullwidth js" data-split-select-wrapper data-select-label="Style"  data-option-position="1" data-swapper-wrapper><fieldset class="radio__fieldset">
                  <legend class="radio__legend">
<!--                     <span class="radio__legend__label">Style</span> -->
                    <span class="radio__legend__label">Pick a bundle</span>
<!--                     <span data-option-value data-swapper-target>1-Pack</span> --></legend><span class="radio__button">
                        <input
                          type="radio"
                          name="options[Style]"
                          value="1-Pack" id="7851598151936-form-Style-1-Pack"checked>
                        <label for="7851598151936-form-Style-1-Pack">
                          <span>1-Pack</span>
                        </label>
                      </span><span class="radio__button">
                        <input
                          type="radio"
                          name="options[Style]"
                          value="2-Pack" id="7851598151936-form-Style-2-Pack">
                        <label for="7851598151936-form-Style-2-Pack">
                          <span>2-Pack</span>
                        </label>
                      </span><span class="radio__button">
                        <input
                          type="radio"
                          name="options[Style]"
                          value="3-Pack" id="7851598151936-form-Style-3-Pack">
                        <label for="7851598151936-form-Style-3-Pack">
                          <span>3-Pack</span>
                        </label>
                      </span></fieldset></div></div><noscript>
        <select name="id" class="no-js" data-product-select aria-label="Style"><option
               selected="selected"
              
              value="43194920173824">
                1-Pack
            </option><option
              
              
              value="43194920206592">
                2-Pack
            </option><option
              
              
              value="43194920239360">
                3-Pack
            </option></select>
      </noscript><div class="add-to-cart-sticky btn-hide">
    <div class="atc-wrapper">
      <div class="atc-info">
        <span>PAP+ Teeth Whitening Strips</span>
        <span data-product-price >
          RM149.00
        </span>
      </div><div class="form__selectors">
<div class="selector-wrapper  selector-wrapper--fullwidth js" data-split-select-wrapper data-select-label="Style"  data-option-position="1" data-swapper-wrapper><fieldset class="radio__fieldset">
<!--                   <legend class="radio__legend">
                    <span class="radio__legend__label">Style</span>
                    <span data-option-value data-swapper-target>1-Pack</span></legend> --><span class="radio__button">
                        <input
                          type="radio"
                          name="options[Style]"
                          value="1-Pack" id="7851598151936-form-Style-1-Pack">
                        <label for="7851598151936-form-Style-1-Pack">
                          <span>1-Pack</span>
                        </label>
                      </span><span class="radio__button">
                        <input
                          type="radio"
                          name="options[Style]"
                          value="2-Pack" id="7851598151936-form-Style-2-Pack">
                        <label for="7851598151936-form-Style-2-Pack">
                          <span>2-Pack</span>
                        </label>
                      </span><span class="radio__button">
                        <input
                          type="radio"
                          name="options[Style]"
                          value="3-Pack" id="7851598151936-form-Style-3-Pack">
                        <label for="7851598151936-form-Style-3-Pack">
                          <span>3-Pack</span>
                        </label>
                      </span></fieldset></div></div><div class="atc-btn"

Making the ONE form as a fixed option on scroll will interfere with the transitioning on the element itself. making an element fixed would result in an unsmooth fixing of it, if that is not the case then perhaps advice me on the proper way to achieve that.

[Cedcommerce]

Hello @colinashvin,

Thank you for the detailed explanation of your issue, Could you share your website URL along with the password (if enabled) so we can check it on our end and let you know the exact solution?

Regards, 

CedCommerce