I want to make my add to cart button change the text according to the inventory quantity

[Mymrtbone]

Hey guys, I am new to coding and websitebuilding. I managed to make the follwoing code work in a custom liquid section, but is not connected to the Quantity buttons. Also i would prefer if it wan´t a custom liquid section but integrated into the product-card.liquid, but i can´t seem to make it work. Could you please help me out/ point out my errors? Thanks in advance and have a nice day (:  i am using a free theme, but forgot which one, since i changed alot

{% assign card_product = product %} <!-- If you're in a product template -->

{%- if card_product -%} <!-- Check if card_product is not null -->
<product-form data-section-id="{{ section.id }}">
{%- form 'product',
card_product,
id: product_form_id,
class: 'form',
novalidate: 'novalidate',
data-type: 'add-to-cart-form'
-%}
<input
type="hidden"
name="id"
value="{{ card_product.selected_or_first_available_variant.id }}"
class="product-variant-id"
{% if card_product.selected_or_first_available_variant.available == false %}
disabled
{% endif %}
>

<!-- Add to Cart Button -->
<button
id="{{ product_form_id }}-submit"
type="submit"
name="add"
class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add{% endif %}"
aria-haspopup="dialog"
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
aria-live="polite"
data-sold-out-message="true"
{% if card_product.selected_or_first_available_variant.available == false %}
disabled
{% endif %}
>
<span>
{%- if card_product.selected_or_first_available_variant.inventory_quantity <= 1 -%}
{{ 'products.product.pre_order' | t }} <!-- Display Pre-order text -->
{%- else -%}
{{ 'products.product.add_to_cart' | t }} <!-- Display Add to Cart text -->
{%- endif -%}
</span>
{%- if horizontal_quick_add -%}
<span class="icon-wrap">
{{- 'icon-plus.svg' | inline_asset_content -}}
</span>
{%- endif -%}
{%- render 'loading-spinner' -%}
</button>
{%- endform -%}
</product-form>
{%- else -%}
<p>{{ 'products.product.not_found' | t }}</p> <!-- Message if the product is not found -->
{%- endif -%}

[Iwillsolveit]

To integrate your custom code into the product-card.liquid file and connect it to the quantity buttons, follow these steps:

Step 1: Access product-card.liquid

1. Go to Shopify Admin.

2. Navigate to Online Store > Themes.

3. Click on Actions > Edit code next to your active theme.

4. Open the Sections folder and find product-card.liquid.

Step 2: Modify the Code

Insert this code where you want the quantity buttons:

<!-- Quantity Input -->

<div class="quantity-selector">

    <button class="quantity-button" data-action="decrement">-</button>

    <input type="number" name="quantity" value="1" min="1" class="quantity-input" />

    <button class="quantity-button" data-action="increment">+</button>

</div>

<script>

  document.addEventListener('DOMContentLoaded', function() {

    const quantityInputs = document.querySelectorAll('.quantity-input');

    quantityInputs.forEach(input => {

      const incrementButton = input.nextElementSibling;

      const decrementButton = input.previousElementSibling;

      incrementButton.addEventListener('click', function() {

        input.value = parseInt(input.value) + 1;

      });

      decrementButton.addEventListener('click', function() {

        if (parseInt(input.value) > 1) {

          input.value = parseInt(input.value) - 1;

        }

      });

    });

  });

</script>

Step 3: Save and Test

1. Save your changes.

2. Test the product cards in your store to ensure the quantity buttons work correctly.

This code allows users to adjust

the product quantity seamlessly within the product card.

[Mymrtbone]

Thanks for your help!

the button i made works in differenciating between inventory quantities, but i want to integrate it into my shopify but it doesn´t work, so i wanted to know how i can do it. i tried the quantity selector and it works, but is not connected to the add to cart button, so it doesn´t matter what the input is there