Highlighting current variant on product page

colinashvin
Excursionist
30 0 9

Hello 

 

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

colinashvin_0-1665715149553.png

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

colinashvin_1-1665715271886.png

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)

 

colinashvin_5-1665715543854.png

colinashvin_6-1665715563868.png

 

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

colinashvin_4-1665715459978.png

 

colinashvin_3-1665715411161.png

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.

 

colinashvin_7-1665715714816.png

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 ?

Replies 3 (3)

PaulNewton
Shopify Partner
6339 579 1343

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.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


colinashvin
Excursionist
30 0 9

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
Shopify Expert
718 76 112

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

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here