Cart page customization with jQuery

[michaelmorgan]

I am creating a feature on the cart page where it lists four different causes that the company will donate to. The customer will need to select only one of the causes (checkbox) in order to move on to the checkout. I needed to find a way to relay the info of which cause they selected into the order details and I thought of appending the value of the checkbox that's checked into the order notes. The issue I am having now is trying to append the value into the notes when the checkout button is submitted. Here is what I have so far.

      <div class="donate" {{ block.shopify_attributes }}>
        <div class="donate__title">Choose your cause</div>
        <input class="donate__checkbox" type="checkbox" id="choice1" name="choice1" value="Mental health awareness" required>
        <label for="choice1">Mental health awareness</label><br>
        <input class="donate__checkbox" type="checkbox" id="choice2" name="choice2" value="Assistance animal training" required>
        <label for="choice2">Assistance animal training</label><br>
        <input class="donate__checkbox" type="checkbox" id="choice3" name="choice3" value="Canine cancer research" required>
        <label for="choice3">Canine cancer research</label><br>
        <input class="donate__checkbox" type="checkbox" id="choice4" name="choice4" value="Animal rescue & welfare" required>
        <label for="choice3">Animal rescue & welfare</label>
        <div class="donate__subtext">{{ section.settings.donate__subtext }}</div>
      </div>

$(document).ready(function() {
  var requiredCheckboxes = $(':checkbox[required]');
  var checked = $('.donate__checkbox:checked').val();
  $('body').on('click', '[name="checkout"]', function() {
    if(requiredCheckboxes.is(':checked')) {
      $('#Cart-note').append(' ').append(checked);
      $('#checkout').get(0).setAttribute('type','submit');
      $(this).submit();
    }
    else {
      $('#donate__alert').removeClass('hide');
      return false;
    }
  });  
});

Note: I changed the checkout button type="button" just recently to experiment but it still didn't work. Any help would be much appreciated!

[LitExtension · Accepted solution]

Hi @michaelmorgan,

You don't need to use note, you just need to add attributes, and it will work fine.

Refer https://www.youtube.com/watch?v=5QmJTTGHWTw

Or https://community.shopify.com/c/shopify-design/cart-use-cart-attributes-to-collect-more-information/...

Hope it helps!

[michaelmorgan]

Thank you soo much for this! I wish I would have known about this website sooner!

[LonzoBrown]

---

@michaelmorgan wrote:

Thank you soo much for this! I wish I would have known about this website sooner!

---

......