I am just rending product from metafields but add to cart for not work with rejax

Technical Q&A
,

Topic summary

A developer using the Warehouse theme is encountering an issue with adding metafield-rendered products to the cart. The problem occurs specifically when using the theme’s default DRAWER cart option, which relies on AJAX requests.

Current Behavior:

  • Without AJAX: Add to cart works correctly for metafield products
  • With AJAX (DRAWER cart): The main page product gets added instead of the intended metafield product

Technical Context:
The developer has shared their implementation code, which includes:

  • Custom styling for a product grid display
  • A product form that references product.metafields.custom.recommendproducts
  • Form structure with variant ID, quantity, and submit button

The issue appears to be related to how the AJAX cart system identifies which product to add when the form is submitted. The discussion remains open with no solution provided yet.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone thank you for coming around this post. I am using a warehouse theme and wanted to add metafields rendered product in the product page but facing the issue that when I am using the form without rejax the add to cart works fine but when I am using the theme default cart opinion " DRAWER" which is based on the rejax request for the add to cart function I am adding the current page product instant of the metafields product. can someone help me out with this

<===== STYLE ==== >

.productGrid{ box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px; display:flex; width:100%; padding:20px 10px; border-radius:10px; } .productGrid img{ width: 100px; object-fit: contain; padding: 4px; } .productGrid h3{ text-overflow: ellipsis; margin:0px; padding:0px; } .productGrid h2{ font-weight:bold; margin:0px; padding:0px; overflow:hidden; } .productGrid .addToCart{ border:none; outline:none; margin-top:5px; background-color: black; padding: 7px 14px; color: white; border-radius: 2px; /* width:200px; */ font-size:16px; font-weight:500; } .actionsBtns{ display:flex; }

<<<< =========== CODE ================ >>>

{%- if product.metafields.custom.recommendproducts != blank -%}
{%- assign RelatedProduct = product.metafields.custom.recommendproducts.value -%}
{%- if RelatedProduct.variants.first.inventory_quantity != 0 -%}
{%- assign product_form_id = ‘product_form_’
| append: RelatedProduct.section.id
| append: RelatedProduct.variants.first.id
-%}

{%- form ‘product’, RelatedProduct, id: product_form_id, class: ‘product-form’ -%}

Recommended Product

* This product is recommended with this product
{%- endform -%} {% else %} {%- endif -%} {%- endif -%}