Fix max-quantity and value of quantity button

Technical Q&A
, ,
1

here is my code,I want max quantity will be available quantity of product ,it is working fine,but when i do all available product to add to cart ,then max is leading to infinte,value become 0,
here is my code ,help me

 <div class="product-form__buttons">

          {%- liquid

            assign check_against_inventory = true

            if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue'

              assign check_against_inventory = false

            endif

            if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory

              assign quantity_rule_soldout = true

            endif

          -%}

           <div

                  id="Quantity-Form-{{ section.id }}"

                  class="product-form__input product-form__quantity{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} product-form__quantity-top{% endif %}"

                  {{ block.shopify_attributes }}

                >

                  {% comment %} TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter {% endcomment %}

                  {% # theme-check-disable %}

                  {%- assign cart_qty = cart

                    | item_count_for_variant: product.selected_or_first_available_variant.id

                  -%}

                  {% # theme-check-enable %}

                  <span class="visually-hidden" id="quantity-label-{{ section.id }}">

                    {%- if cart_qty > 0 -%}

                      {{- 'products.product.quantity.in_cart_aria_label' | t: quantity: cart_qty -}}

                    {%- else -%}

                      {{- 'products.product.quantity.label' | t -}}

                    {%- endif -%}

                  </span>

                  <label

                    class="quantity__label form__label"

                    for="Quantity-{{ section.id }}"

                    aria-labelledby="quantity-label-{{ section.id }}"

                  >

                    <span aria-hidden="true" hidden>{{ 'products.product.quantity.label' | t }}</span>

                    <span class="quantity__rules-cart{% if cart_qty == 0 %} hidden{% endif %}" aria-hidden="true">

                      {%- render 'loading-spinner' -%}

                      <span

                        >(

                        {{- 'products.product.quantity.in_cart_html' | t: quantity: cart_qty -}}

                        )</span

                      >

                    </span>

                  </label>

                  <div class="price-per-item__container">

                    <quantity-input class="quantity" data-url="{{ product.url }}" data-section="{{ section.id }}">

                      <button class="quantity__button" name="minus" type="button">

                        <span class="visually-hidden">

                          {{- 'products.product.quantity.decrease' | t: product: product.title | escape -}}

                        </span>

                        <span class="svg-wrapper">

                          {{- 'icon-minus.svg' | inline_asset_content -}}

                        </span>

                      </button>

                      <input

                        class="quantity__input"

                        type="number"

                        name="quantity"

                        id="Quantity-{{ section.id }}"

                        data-cart-quantity="{{ cart_qty }}"

                        data-min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"

                        min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"

                          data-max="{{ product.selected_or_first_available_variant.inventory_quantity}}"

                          max="{{  product.selected_or_first_available_variant.inventory_quantity }}"

                        step="{{ product.selected_or_first_available_variant.quantity_rule.increment }}"

                        value="{{ product.selected_or_first_available_variant.quantity_rule.min }}"

                        form="{{ product_form_id }}"

                      >

                      <button class="quantity__button" name="plus" type="button">

                        <span class="visually-hidden">

                          {{- 'products.product.quantity.increase' | t: product: product.title | escape -}}

                        </span>

                        <span class="svg-wrapper">

                          {{- 'icon-plus.svg' | inline_asset_content -}}

                        </span>

                      </button>

                    </quantity-input>
2

Hey @Devlop33 replace your code with this one

<div class="product-form__buttons">

  {%- liquid
    assign check_against_inventory = true
    if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue'
      assign check_against_inventory = false
    endif
    if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory
      assign quantity_rule_soldout = true
    endif
  -%}

  <div
    id="Quantity-Form-{{ section.id }}"
    class="product-form__input product-form__quantity{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} product-form__quantity-top{% endif %}"
    {{ block.shopify_attributes }}
  >
    {% # theme-check-disable %}
    {%- assign cart_qty = cart | item_count_for_variant: product.selected_or_first_available_variant.id -%}
    {% # theme-check-enable %}

    {%- assign remaining_qty = product.selected_or_first_available_variant.inventory_quantity | minus: cart_qty | at_least: 0 -%}

    <span class="visually-hidden" id="quantity-label-{{ section.id }}">
      {%- if cart_qty > 0 -%}
        {{- 'products.product.quantity.in_cart_aria_label' | t: quantity: cart_qty -}}
      {%- else -%}
        {{- 'products.product.quantity.label' | t -}}
      {%- endif -%}
    </span>

    <label
      class="quantity__label form__label"
      for="Quantity-{{ section.id }}"
      aria-labelledby="quantity-label-{{ section.id }}"
    >
      <span aria-hidden="true" hidden>{{ 'products.product.quantity.label' | t }}</span>
      <span class="quantity__rules-cart{% if cart_qty == 0 %} hidden{% endif %}" aria-hidden="true">
        {%- render 'loading-spinner' -%}
        <span>({{ 'products.product.quantity.in_cart_html' | t: quantity: cart_qty }})</span>
      </span>
    </label>

    <div class="price-per-item__container">
      <quantity-input class="quantity" data-url="{{ product.url }}" data-section="{{ section.id }}">
        <button class="quantity__button" name="minus" type="button">
          <span class="visually-hidden">
            {{- 'products.product.quantity.decrease' | t: product: product.title | escape -}}
          </span>
          <span class="svg-wrapper">{{- 'icon-minus.svg' | inline_asset_content -}}</span>
        </button>

        <input
          class="quantity__input"
          type="number"
          name="quantity"
          id="Quantity-{{ section.id }}"
          data-cart-quantity="{{ cart_qty }}"
          data-min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
          min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
          data-max="{{ product.selected_or_first_available_variant.inventory_quantity }}"
          max="{{ remaining_qty }}"
          step="{{ product.selected_or_first_available_variant.quantity_rule.increment }}"
          value="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
          form="{{ product_form_id }}"
        >

        <button class="quantity__button" name="plus" type="button">
          <span class="visually-hidden">
            {{- 'products.product.quantity.increase' | t: product: product.title | escape -}}
          </span>
          <span class="svg-wrapper">{{- 'icon-plus.svg' | inline_asset_content -}}</span>
        </button>
      </quantity-input>

if this will work then don’t forget to like and mark as solution on it