Add to cart button in cart page to make a product upsell

[zied_drira]

Hello,

I am trying to add an upsell of 1 product in my cart page (Dawn theme).

I am not very confortable with js and Ajax Cart.

I tried to re-use the code already existing in product page and paste it in the cart page code.

I am able to view my Add-to-cart button but what is missing is how I can get the product_id and use it in the add-to-cart form.

I added the upsell product in a specific collection.

Here is the code I added in cart page:

{% for product in collections.Accessoires.products %}
  
<div class="product-item" id="{{ product.title|handleize|downcase}}">
{{ product.title }}
</div>

                {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled>
                  <div class="product-form__buttons">
                    <button
                      type="submit"
                      name="add"
                      class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
                    {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                    >
                        <span>
                          {%- if product.selected_or_first_available_variant.available -%}
                            {{ 'products.product.add_to_cart' | t }}
                          {%- else -%}
                            {{ 'products.product.sold_out' | t }}
                          {%- endif -%}
                        </span>
                        <div class="loading-overlay__spinner hidden">
                          <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                            <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                          </svg>
                        </div>
                    </button>
                    {%- if block.settings.show_dynamic_checkout -%}
                      {{ form | payment_button }}
                    {%- endif -%}
                  </div>
                {%- endform -%}

{% endfor %}

Here is my website URL: https://test-boutique-zd.myshopify.com/

Access code: othuin

Theme used: Dawn theme 5.0

All the design work will be done after.

Thanks for your help !