How can I add a required date of birth field to the cart page?

Store Design
1

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
DOB-Field-Add-to-Cart-Page.jpg626×320 9.35 KB

the development store is:

idioma-education-consulting.myshopify.com

2

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
note_location.jpg987×751 110 KB

3

hi

try this

https://help.shopify.com/en/themes/customization/cart/get-more-information-with-cart-attributes

4

I appreciate your reply and the instructions you provided. I will consider your solution should I decide to take on this task myself.

5

So if you add this code

Add Your Birthdate for fun surprises!

to your cart.liquid then it collects the birthdate and adds it to the customer notes on the admin side, however if you have your cart set as drawer and not page then it skips right over the actual page. does anyone know how to get it to actually show the birthday field in the cart drawer like it is showing on a cart page?

6

Hi, I added this code, but I can’t seem to find the customer’s birthday in the customer section… do you have any suggestions?

thanks!

7

Could you tell how i can make the birthday input required?

1 Like
8

I’m experiencing the same issues - can’t make it required and also not seeing the birthday field in the order notes. Any workarounds that any of you had?

1 Like