Adding more required fields to the shopping cart

In order to successfully complete the purchase the client must fill just a couple of required fields (shipping information and e-mail address) in the shopping cart.

If there's need to create more required fields in the shopping cart here's how.
For example's, let's change the 'Name' and 'Company' to also be required.

1) Find the names of the fields that you want to change.
When you inspect the code of the page you can find the names.

Here are the names of the 'name' and 'company' fields:

name="cart[customer][name]"
name="cart[billing_address][company_name]"

2) Use the input names as selectors and use document.querySelectorAll and forEach to loop over them. Add the required attribute to all of them and you're done.

var inputs = document.querySelectorAll(
  'input[name="cart[customer][name]"], input[name="cart[billing_address][company_name]"]'
);
inputs.forEach(function(inputEl) {
  inputEl.setAttribute('required', '');
});

3) To ensure that the code is executed in the correct shopping cart view, we can listen for the voog:shoppingcart:show event and check the event.detail.view value.

document.addEventListener('voog:shoppingcart:show', function(event) {
  if (event.detail.view == 'shipping_form') {
    // code goes here
  }
});

Here's the final code that adds the required attribute to the 'name' and 'company' fields, preventing submitting empty values in them.

<script>
  document.addEventListener('voog:shoppingcart:show', function(event) {
    if (event.detail.view == 'shipping_form') {
      var inputs = document.querySelectorAll(
        'input[name="cart[customer][name]"], input[name="cart[billing_address][company_name]"]'
      );
      inputs.forEach(function(inputEl) {
        inputEl.setAttribute('required', '');
      });
    }
  });
</script>

Developers

Adding more required fields to the shopping cart