Jump to content
Claudia M

Radio button on Checkout instead of Dropdown

Recommended Posts

I have followed the post to add radio button on checkout instead of the dropdown.  I got it to show but it is not auto updating when I change the shipping product. See below.  It won't auto update to Priority when it is selected.  When I click "Continue to Secure Checkout" it does show the updated shipping amount, but I want it to update as soon as the new shipping is selected. Thanks for any and all help.

5a359b2293efe_radiobutoncheckout.PNG.94e1b8a87e7b8370e4dda715c63e5760.PNG

here is my code change in content.checkout-medium-up:

{if isset($SHIPPING)}
         <tr>
            <td colspan="4">
              <span class="txt pad-top">Select your shipping method  </span><br />
             <span class="txt-med" style="font-weight:normal; padding-bottom:0.625rem!important;"> This may change when your actual delivery address is known</span>
                <ul class="no-bullet center" style="margin-top: 0rem!important;margin-bottom: 0rem!important;">
                  {foreach from=$SHIPPING key=group item=methods}
                  {foreach from=$methods item=method}
                  <li class="prod-details-li-txt-last">
                    <input name="shipping" type="radio" value="{$method.value}" id="{$method.value}" {$method.selected|replace:'selected':'checked'}><label for="{$method.value}">{$method.display}</label>
                  </li>
                  {/foreach}
                  {/foreach}
                  </ul>
         </td>            <td class="bgw">{$LANG.basket.shipping}<br />
              


and here is the change I made in js/2.cubecart  Line 82:

  $(".autosubmit select, .autosubmit input[type='radio']").not('.nosubmit').change(function() {
        $(this).parents(".autosubmit").submit();

 

 

 

Edited by Claudia M

Share this post


Link to post
Share on other sites

Recall that when making changes to a page's resources (CSS, javascript, images), you will need to force your browser to fetch fresh copies of those resources. This is usually done with the keyboard shortcut CTRL-F5.

If you have done that, we may need to closer at your template code.

Unless you are experimenting with another installation of CubeCart, I do not see the changed file.

Line 82 of a freshly fetched copy:

$(".autosubmit select").not('.nosubmit').change(function() {

 

Share this post


Link to post
Share on other sites

it's a customized Foundation I use. 

my Skin/js/2.cubecart  Line 82:

$(".autosubmit select").not('.nosubmit').change(function() {
        $(this).parents(".autosubmit").submit();

I tried refreshing every which way I thought of.

Share this post


Link to post
Share on other sites

Ok. Let's think that the FTP program is configured to default to simply not overwrite an existing file, and don't bother asking you about it.

Share this post


Link to post
Share on other sites

The code I gave you above is from looking at the file in control panel.  I thought too that FTPing (??) it hadn't taken.  Sometimes it doesn't.

Share this post


Link to post
Share on other sites

I had opened up the Shipping Estimates to always be present. If I change the shipping cost selection then click Get Shipping Rates it will update the rate right then.  The problem is if the customer is logged in then the shipping estimate, so the get shipping rates button, is not there so the shipping rates aren't updated.

.5a35acc1b0263_radiobuttonchwithestimate.PNG.9cd3cde45b5bddd28a6174d57c08582e.PNG

.... Is it now changed? Maybe use the editor in the control panel?

I don't know what you mean by that.  That is the code in the file via control panel.

Share this post


Link to post
Share on other sites

I will argue that this estimate box is not interfering.

Changing the radio button choice should trigger an auto-submit. Doing this action is not happening because (unless just recently), the file has not been successfully edited.

 

Share this post


Link to post
Share on other sites

At line 82 of /js/2.cubecart.js:

From:

$(".autosubmit select").not('.nosubmit').change(function() {

To:

$('.autosubmit select, .autosubmit input[name="shipping"]').not('.nosubmit').change(function() {

 

Share this post


Link to post
Share on other sites

Well don't I feel stupid.  All along I thought I had given you the code below and I wasn't.  Was looking right at the stock code and thought it was the edited code.  I am so sorry.  I made the change (I thought I already had!) and it is working now.

$('.autosubmit select, .autosubmit input[name="shipping"]').not('.nosubmit').change(function() {

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...