Add DOB field to Cart Page

Shopify Partner
14 0 2

Since its not possible to add new fields to the checkout page I need to add a field to the cart that is required before the customer can proceed with checkout. This date of birth field would need to be filled out and the entry captured for the shop owner. This may be beyond my skill level... 

DOB-Field-Add-to-Cart-Page.jpg

 

the development store is:

idioma-education-consulting.myshopify.com

0 Likes
Highlighted
Shopify Partner
1281 169 403

Do you need the information to be passed to the back end? And what kind of validation does it have to pass (certain age, certain format)? Because this could be as simple as using cart.note:


https://help.shopify.com/en/themes/liquid/objects/cart#cart-note

 

At the end of your cart form add your label and text area (this can usually be found in cart-template.liquid in your sections folder):

 <label>Date Of Birth:</label>
<textarea name="note" class="cart_note" maxlength="10" style="max-height: 40px; min-height: unset;">{{ cart.note }}</textarea>

Add a disabled attribute to your submit button (this is what Debut's looks like):

 <input type="submit" name="checkout"
            class="cart__submit btn btn--small-wide"
            value="{{ 'cart.general.checkout' | t }}" disabled>

Add a div underneath that to contain your error message as well as prompt to add their date of birth:

<div class="enter_dob" style="text-align: right;">Please enter your date of birth.</div>

Then you can add some javascript before your schema (assuming there is a schema if you're in a section):

<script>
  $('.cart_note').on('input', function(){
    if($(this).val().length == 10){
      var pattern =/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;
      if(pattern.test($(this).val())){
        $('.cart__submit').removeAttr('disabled');
        $('.enter_dob').text('Thank you');
      }else{
        $('.cart__submit').attr('disabled','disabled');
        $('.enter_dob').text('Please submit a valid date of birth');
      }
    }else{
      $('.cart__submit').attr('disabled','disabled');
      $('.enter_dob').text('Please submit a valid date of birth');
    }
  })
</script>

This is very minimal validation. It's basically making sure that they enter the date of birth in the right format, but not that the date is a real date or if they pass a certain age. I don't know your exact use case so I made it as simple as I knew how. So they need to enter text in the format of "09/12/1988", they cannot submit letters or other characters, but they could do "88/88/1988" and it would still pass validation. Let me know what you exactly need and I can look into it further.

 

Anyway, after submitting, you would recieve the date of birth on the order note in the admin:

note_location.jpg

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Highlighted
Shopify Partner
14 0 2

0 Likes