Increase Quantity if variable is true

[graphicow3n]

I have a client who would like to have the default quantity to be 2 instead of 1 if the product is tagged "certain_text". I had some code that worked for their old theme but now that we have moved to another theme it's not working. I think it's cause the whole theme is java script I guess. The theme is named "Focal".

When I use my old code:

{% if product.tags contains 'qty_pair' %}
<input type="text" form="{{ product_form_id }}" is="input-number" class="quantity-selector__input" inputmode="numeric" name="quantity" autocomplete="off" min="1" value="2" size="2" aria-label="{{ 'product.form.quantity' | t | escape }}">
{% else %}
<input type="text" form="{{ product_form_id }}" is="input-number" class="quantity-selector__input" inputmode="numeric" name="quantity" autocomplete="off" min="1" value="1" size="2" aria-label="{{ 'product.form.quantity' | t | escape }}">
{% endif %}

It changed the look on the page so it says 2, but when you add it to the cart, it only adds 1.

Here is the javascript I think is controlling the quantity. I also have a variable I can use to tell if the value should be 1 or 2.

var InputNumber = class extends HTMLInputElement {
    connectedCallback() {
      this.addEventListener("input", this._onValueInput.bind(this));
      this.addEventListener("change", this._onValueChanged.bind(this));
      this.addEventListener("keydown", this._onKeyDown.bind(this));
    }
    get quantity() {
      return parseInt(this.value);
    }
    set quantity(quantity) {
      const isNumeric = (typeof quantity === "number" || typeof quantity === "string" && quantity.trim() !== "") && !isNaN(quantity);
      if (quantity === "") {
        return;
      }
      if (!isNumeric || quantity < 0) {
        quantity = parseInt(quantity) || 1;
      }
      this.value = Math.max(this.min || 1, Math.min(quantity, this.max || Number.MAX_VALUE)).toString();
      this.size = Math.max(this.value.length + 1, 2);
      }
    _onValueInput() {
      this.quantity = this.value;
    }
    _onValueChanged() {
      if (this.value === "") {
        this.quantity = 1;
      }
    }
    _onKeyDown(event) {
      event.stopPropagation();
      if (event.key === "ArrowUp") {
        this.quantity = this.quantity + 1;
      } else if (event.key === "ArrowDown") {
        this.quantity = this.quantity - 1;
      }
    }
  };

[PaulNewton]

This nonsense is because native <input type="number"> suck so type="text" gets used as a hack so you can' simply use the number types step attribute.

Add a data-input-step="2" to the special input then check for that data set property in javascript and use it's value for the increment/decrement replacing all the "1"'s .

step="2" would be an invalid attribute for Inputs with type="text".

https://stackoverflow.blog/2022/12/26/why-the-number-input-is-the-worst-input/ 

Also see the dawn reference for a different quantity implementation 

https://github.com/Shopify/dawn/blob/main/snippets/quantity-input.liquid