Thymeleaf - Setting Object's Field To Another Object - spring-boot

Question

I've been stuck on this issue for a while now. I am making an E-Commerce application and I have a product class and a CartItems class.
The CartItems class contains a product in it, because in a cart you will have products inside and the CartItems basically takes the product you select and gets details like total price and quantity.
CartItems:
#Table(name = "cartitems")
public class CartItems implements Serializable {
#Id
#GeneratedValue(strategy = GenerationType.AUTO)
private int id;
#Column(name = "quantity")
private int quantity;
#Column(name = "price")
private double price;
#OneToOne
#JoinColumn(name = "product_id")
private Product product;
#ManyToOne
#JoinColumn(name = "cart_id")
private Cart cart;
public CartItems() {
}
public CartItems(Product product, int quantity, double price, Cart cart) {
this.quantity = quantity;
this.price = price;
this.product = product;
this.cart = cart;
}
Catalog Thymeleaf Page:
<div th:each="product : ${popularProducts}">
<form action="#" th:action="#{'/cart/'}" th:object="${cartItem}" method="POST">
<div class="card">
<img class="card-img" th:src="${product.pictureUrl}">
<a href="#" class="card-link text-danger like">
<i class="fas fa-heart"></i>
</a>
</div>
<div class="card-body">
<h4 class="card-title" th:text="${product.getName()}"></h4>
<h6 class="card-subtitle mb-2 text-muted" th:text="${product.getCategory()}"></h6>
<p class="card-text" th:text="${product.getDescription()}">
<div class="buy d-flex justify-content-between align-items-center">
<div class="price text-success"><h5 class="mt-4" th:text="'$' + ${product.getPrice()}"></h5></div>
<div class="form-group blu-margin">
<div class="form-label-group">
<input th:field="*{cartItem.quantity}" type="text" id="quantity" name="quantity" class="form-control" placeholder="1" required="required">
</div>
</div>
<i class="fas fa-shopping-cart"></i> Add to Cart
</div>
The problem is with setting the CartItems.product equal to the currently displayed product.
I am looping through each product, and if the user presses Add To Cart, I want the CartItem's product field to be equal to the currently displayed product. How do you manually set this when you pass it back up the controller?
Is there a way of just typing ${cartItem.product = product} without having the user to manually write it as an input?
Alternatively, is there a way I can feed up the product : ${popularProducts}
using model attribute? How do I bring that up once the form is submitted along with CartItem object?

Answer 1

I managed to fix this by putting the product id into the post mapping address as a path variable then using the product repository to find the product by the id passed through then setting it manually in the controller.