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 ==== >
<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;
}
</style>
<<<< =========== 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' -%}
<div class="card__section">
<h2 style="font-weight:bold;">Recommended Product</h2>
<div class="productGrid">
<img src="{{ RelatedProduct | img_url: '320x320' }}">
<div style="margin-inline:10px;">
<a href="{{ RelatedProduct.url }}">
<h2>Now {{ RelatedProduct.price | money }}</h2>
<h3>{{ RelatedProduct.title }}</h3>
<div class="action-button">
<input type="hidden" name="id" value="{{ RelatedProduct.variants.first.id }}">
<input type="hidden" min="1" type="number" name="quantity" value="1">
<input
class="addToCart"
type="submit"
data-action="add-to-cart"
value="Add to cart"
>
</div>
</a>
</div>
</div>
<h5 style="width:100%; font-size:10px; margin-top:5px;">* This product is recommended with this product</h5>
</div>
{%- endform -%}
{% else %}
{%- endif -%}
{%- endif -%}
