Required text field doesn't work on product page

Highlighted
Tourist
19 0 2

Hi, I already saw a couple of similar questions to this but I can't figure out what's the problem in my case.

soundcards.myshopify.com

pass: LcDxr7y@)$ahBM#R

 

I want to add a required field where a Spotifylink has to be put in before being able to checkout. I generated the field with the UI-elements generator, because I want the field to be matching the theme.

I added this code to my product-template.liquid:

 

 

 

 

<p class="line-item-property__field">
  <label for="spotify-link">Spotify-Link:</label>
  <input required class="required" id="spotify-link" type="text" name="properties[_Spotify-Link]">
</p>

 

 

 

 

 

The "required" option doesn't work at all and it's also a little misplaced since it doesn't match the "Material" option. Also, removing items from the cart genrates an error..

For this store it's necessary to fill out this field, how can I make it work?

I am not afraid to dive into the code by the way, so feel free to even post more complex solutions if it doesn't work on another way.

Thanks!

0 Likes
Highlighted

Hi @fblome 

I dont see it on your product page.

Are you putting it within your main form?

A form is usually depicted by <form>all your code between, add to cart etc</form>

If my answer was helpful please Like and Accept my post as the Solution
Need help customizing your store? Contact me on email at Defineify@gmail.com
1 Like
Highlighted
Tourist
19 0 2

It should be visible now! I tested something out, that's why it was not shown.

0 Likes
Highlighted

Hi @fblome 

your Add to cart is using AJAX, so it submits the form without changing pages. Which means the required in your input is ignored.

Your options are,

1. disable the popup cart

2. create a javascript/jquery for that element to be required.

If my answer was helpful please Like and Accept my post as the Solution
Need help customizing your store? Contact me on email at Defineify@gmail.com
0 Likes
Highlighted
Tourist
19 0 2

Thanks!

 

I really would like to keep the pop-up cart, I am wondering how I can create a jquery? Is this complicated for someone who barely understands programming?

0 Likes
Highlighted

Hi @fblome 

You can probably find some already done in Stack overflow but might be hard to implement being Shopify.

If my answer was helpful please Like and Accept my post as the Solution
Need help customizing your store? Contact me on email at Defineify@gmail.com
0 Likes
Highlighted
Tourist
19 0 2

Hm okay, than I will probably have to find an App that does this job. Thanks anyways!

0 Likes