Remove British Forces from Multi-Address Modal

In this tutorial, we’ll guide you through removing “British Forces” from the multi-address modal.

Step 1: Duplicate Your Live Theme
Always work on a duplicated development theme to ensure your live store remains unaffected by changes.

Step 2: Create and Upload the Snippet

1. Navigate to the Assets folder of your theme.
2. Create a new JavaScript file named giftship-british-forces.js.
3. Copy and paste the following code into the file:

class ClassWatcher {

      constructor(targetNode, classToWatch, classAddedCallback, classRemovedCallback) {
          this.targetNode = targetNode
          this.classToWatch = classToWatch
          this.classAddedCallback = classAddedCallback
          this.classRemovedCallback = classRemovedCallback
          this.observer = null
          this.lastClassState = targetNode.classList.contains(this.classToWatch)
  
          this.init()
      }
  
      init() {
          this.observer = new MutationObserver(this.mutationCallback)
          this.observe()
      }
  
      observe() {
          this.observer.observe(this.targetNode, { attributes: true })
      }
  
      disconnect() {
          this.observer.disconnect()
      }
  
      mutationCallback = mutationsList => {
          for(let mutation of mutationsList) {
              if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                  let currentClassState = mutation.target.classList.contains(this.classToWatch)
                  if(this.lastClassState !== currentClassState) {
                      this.lastClassState = currentClassState
                      if(currentClassState) {
                          this.classAddedCallback()
                      }
                      else {
                          this.classRemovedCallback()
                      }
                  }
              }
          }
      }
  }
  
  (function() {

    var removeOpts = function() {
      setTimeout(function() {

        var provinceEl = document.querySelector('#gsNewProvince');

        var optionEls = provinceEl.querySelectorAll('option');

        //console.log("optionEls", optionEls);
        
        optionEls.forEach(function(el) {
          console.log("el.value", el.value);
          if (el.value === "British Forces") {
            el.remove();
          }
          
        });
        
      }, 300);
    };
    
    document.querySelector('#gsNewCountry').addEventListener('change', function(e) {

      //console.log("change", e);
      
      removeOpts();
      
    });

    let classWatcher = new ClassWatcher(document.querySelector('.gs__a-modal'), 'gs__m-open', removeOpts, function() {
      
    });


    removeOpts();
    
  })();

Step 3: Edit theme.liquid to Include the Snippet

1. Open theme.liquid in your theme editor.
2. Scroll to the bottom of the file, just above the closing </body> tag.
3. Paste the following code:

{% if request.path contains '/a/gs/cart/' %}
<script src="{{ 'giftship-british-forces.js' | asset_url }}"></script>
{% endif %}

Step 4: Remove Additional Provinces (e.g., Northern Ireland)

if (el.value === "British Forces" || el.value === "Northern Ireland") {
  el.remove();
}