This example explains how you can hide a field on Firmhouse Checkout with some custom JavaScript.

Hiding and customising address fields on Checkout


Firmhouse provides you the option to create additional Extra Fields so that you can ask additional extra information from your customers on checkout.

For example, some of our users use this for asking someone's age, the name of their pet, or when and where they would like to have their products delivered.

In the following sample we will be using the value of an extra field called "Nearest city" in combination with a datepicker field "Request delivery date". We'll make the available dates in the "Request delivery date" datepicker field dependent on which city which was chosen.

For example: for Amsterdam only enable Mondays, and for Rotterdam only enable Tuesdays and Wednesdays.

## Sample code

Put this in the `<body>` in **Checkout > Preferences > Custom code**. 

You need to update the ids of the extra fields in the `document.querySelector()` calls and you need to customise the city -> day mappings in the `availableShipmentDates` variable.

```html
<script> 
  const availableShipmentDates = {
      Amsterdam: [1],
      Rotterdam: [2, 3],
  }; 

  const citySelector = document.querySelector("#subscription_extra_field_answers_attributes_3_value"); 
  citySelector.addEventListener("change", updateShipmentDate);

  function updateShipmentDate(event) {
    console.debug("updating available shipment dates...")
    const shipmentDate = document.querySelector("#subscription_extra_field_answers_attributes_4_value"); 
    
    const datesForCity = availableShipmentDates[event.target.value]
    if (datesForCity) {
      shipmentDate._flatpickr.config.disable = [
        function (date) {
          // Disable all dates between now and next week.
          const today = new Date()
          const nextWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7)
          if (date <= nextWeek) {
            return true;
          }

          // Make days available that are in listed cities.
          if (datesForCity.includes(date.getDay())) {
            return false;
          }

          // Make all other dates unavailable.
          return true;
        } 
      ];
    } else {
      shipmentDate._flatpickr.config.disable = [
        function (date) {
          return true;
        } 
      ];
    }
    shipmentDate._flatpickr.clear()
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    const citySelector = document.querySelector("#subscription_extra_field_answers_attributes_3_value"); 
    if (citySelector) {
      citySelector.dispatchEvent(new Event('change', { 'bubbles': true }))
    }
  })
</script> 
```


This example shows you how you can use the value from a dropdown that contains cities, to modify available delivery dates in a datepicker.

On Checkout show available delivery dates based on chosen city


You can hide or customise address fields on Firmhouse Checkout with some custom JavaScript in your Checkout settings. Most commonly this is used for customising the address fields to your needs. 

For example, some of our users want to only have a single address line, without separate house number.

The only prerequisite is that your project is running on a custom domain.

To customise something on Firmhouse Checkout, you can add custom code to **Checkout > Preferences > Custom code > Body** field. 

The following example code does two things:
1. It hides the house number field.
2. It sets the address field to be limited to 35 characters in your customer's browser.

## Sample code

```html
<script>
  var house_number_field = document.getElementById("subscription_house_number");
  if (house_number_field) {
    var house_number_field_wrapper = house_number_field.parentNode.parentNode.parentNode.parentNode;
    house_number_field_wrapper.remove();
  }
  
  var address_field = document.getElementById("subscription_address");
  if (address_field) {
    address_field.setAttribute("maxlength", "35");
  }
</script>
```



You can hide or customise address fields in the Self Service Center with some custom JavaScript in your settings. Most commonly this is used for customising the address fields to your needs. 

For example, some of our users want to only have a single address line, without separate house number. So you want to remove the house number field so that your customers don't fill it out.

The only prerequisite is that your project is running on a custom domain.

To customise something in the Self Service Center, you can add custom code to **Settings > Self Service Center > Custom code** section. 

The following example code does two things:
1. It hides the house number field.
2. It sets the address field to be limited to 35 characters.

## Sample code

Put the following code in the **Header** field under **Settings > Self Service Center > Custom code**.

```html
<script>
  const targetNode = document.documentElement || document.body;
  const config = { attributes: false, childList: true, subtree: true };

  const callback = function(mutationsList, observer) {
    // You can customise inside this callback function.
    const subscription_house_number = document.getElementById("subscription_house_number")
    if (subscription_house_number) {
      subscription_house_number.closest('div').remove()
    }
    
    const subscription_address = document.getElementById("subscription_address")
    if (subscription_address) {
      address.setAttribute("maxlength", "35");
    }
  };

  const observer = new MutationObserver(callback);
  observer.observe(targetNode, config);
</script>
```


This example explains how you can hide a field in the Self Service Center.