I need some advice!
I am working on a modified version of the Next.js/Commerce.js storefront ChopChop. I have been trying to combine the cart and the checkout page as one by adding the component to the BillingForm.js
.
.
.
return <>
<div className="md:flex md:space-x-12 lg:space-x-24">
<div className="md:w-1/4"></div>
<div className="md:w-1/2">
<Cart/> // cart added here
<fieldset className="mb-3 md:mb-4">
<legend className="text-black font-medium text-lg md:text-xl py-3 block">
Customer Details
</legend>
.
.
.
The visual result is the following:
What's not working correctly is the CheckoutSummary.js and OrderSummary.js component content (Subtotal, Tax, Shipping, Total) that is generated from Checkout.js component like this:
order ? <OrderSummary {...order} /> : <CheckoutSummary {...live} />
For the CheckoutSummary.js component, the values are correct as long as there are no updates in the cart component; if the cart is somehow updated, the content (Subtotal, Tax, Shipping, Total) stays the same, and the changes are not reflected.
When adding ..cart instead of ..live to the CheckoutSummary component:
const cart = useCartState();
order ? <OrderSummary {...order} /> : <CheckoutSummary {...cart}
I do get a Subtotal value that will change on update, but since the ...cart object does not contain Tax, Shipping, Total, they are not displayed.
For the OrderSummary.js, using the modified checkout/cart BillingForm.js the ..order object that is sent to the OrderSummary component is not updating so the order summary (Subtotal, Tax, Shipping, Total) will not reflect the updates either.
I also noticed that when adding or removing items to the cart, a submit will be triggered. Have not figured out why this is happening. Or if it's related to the update issue
How can I have the cart and checkout info on the same page, while the order object is updated correctly at cart update and is reflected on the CheckoutSummary and OrderSummary components?
