How can I manage custom size and size variant selections in Shopify?

[achchiraj26]

I’m working on a Shopify store where I have both size variants and a custom size input for products. I need to implement logic so that:

1. If a user selects a size variant, the custom size input should not be included in the cart.
2. Conversely, if the user inputs a custom size, the selected size variant should be excluded from the cart.

This is a part of my liquid code:

<div class="select">
      <select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id" class="multi_select" data-variants>
        {% for v in product.variants %}
          <option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-featured-image="{{ v.featured_media }}" data-image="{{ v.featured_media | product_img_url: '600x' }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
        {% endfor %}
      </select>
      {% if product.tags contains 'Custom Size' %}
        <div>
          <!-- Add this button to toggle custom size fields -->
          <div class='toggle-customizable-wrapper'>
            Or
            <button type="button" id="toggle-custom-size">Custom Size</button>
          </div>
          <!-- Custom size fields -->
          <div id="custom-size-fields" style="display:none; margin-top: 10px;">    
            <label for="unit-of-measure">Unit of Measure:</label>
            <select id="unit-of-measure" class="custom-size-input" name="properties[Unit of Measure]">
              <option value="cm">Cm</option>
              <option value="ft">Ft</option>
            </select>
            <p>
              Selected size: <span class="chosen-size">0 x 0</span> <span class="chosen-unit">Cm</span>
            </p>
            <div class='product-custom-size-container'>
              <div>
                <label for="custom-width">Width:</label>
                <input type="number" value='0' id="custom-width" class="custom-size-input" name="properties[Custom Width]" min="1"  placeholder="Enter width">
              </div>
              <div>
                <label for="custom-length">Length:</label>
                <input type="number" value='0' id="custom-length" class="custom-size-input" name="properties[Custom Length]" min="1"  placeholder="Enter length">
              </div>
              <div class="chosen-unit-container">
                <p class="chosen-unit">Cm</p>        
              </div>
            </div>
          </div>
        </div>      

and this is the script code:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const toggleButton = document.getElementById("toggle-custom-size");
    const customSizeFields = document.getElementById("custom-size-fields");
    const unitSelect = document.getElementById('unit-of-measure');
    const unitDisplay = document.querySelector('.chosen-unit');
    const chosenSize = document.querySelector('.chosen-size');
    const widthSize = document.getElementById('custom-width');
    const lengthSize = document.getElementById('custom-length');
    const selectorOptionColor = document.querySelector('[data-option="option2"]'); // the color variant must be the first one in variants list
    const selectorOptionFringes = document.querySelector('[data-option="option1"]'); // the fringes variant must be the second one in variants list
    const selectorOptionSize = document.querySelector('[data-option="option3"]'); // the size variant must be the third one in variants list
    let isSizeCustomable = false;

    const productDetailsForm = document.getElementById('product_form_{{ product.id }}');
    productDetailsForm.addEventListener('submit', function(event) {
      event.preventDefault();  // Prevent the default form submission
      event.stopImmediatePropagation();
      console.log('Form submission intercepted');  // Check if this logs
    });
    
    const onChangeSize = () => {
      chosenSize.textContent = `${widthSize.value || 0} x ${lengthSize.value || 0}`
    }
  
    widthSize.addEventListener("input", onChangeSize);
    lengthSize.addEventListener("input", onChangeSize);
  
    unitSelect.addEventListener("change", () => {
      const selectedUnit = unitSelect.options[unitSelect.selectedIndex].text;
        unitDisplay.textContent = selectedUnit;
    })
  
    toggleButton.addEventListener("click", () => {
      selectorOptionSize.value = null;
      customSizeFields.style.display = "block";
      isSizeCustomable = true;
    });

    selectorOptionSize.addEventListener("change", () => {
      customSizeFields.style.display = "none";
      isSizeCustomable = false
    });

  });

I have try to intercept the form after submission but this does not works.