Phoenix Cart Forum

A Faster, Friendlier Cart for Phoenix Cart: Live Updates Without the Page Reload

The traditional shopping cart works like a form. You change a quantity, press "Update", the whole page reloads, and you hope the numbers now make sense. It works, but it's clunky, and every reload is a small chance for a customer to lose their place or their patience.

This new Addon removes that step. Quantity changes happen instantly, in place, and everything on the page stays in sync.



What it does

Each product row has plus and minus buttons beside the quantity. When a customer clicks one:

- The quantity changes immediately.
- The line price updates on the spot.
- The cart total and item count update, including the mini-cart in the header or sidebar.
- The minus button turns into a trash icon when the quantity reaches one, so the next click clearly means "remove this item".
- If the quantity reaches zero, the row fades out and disappears.

All of this is done with a small, self-contained script that talks to a lightweight endpoint. The page itself never reloads.

Stock warnings that stay accurate

The cart also handles stock levels, and it keeps the warnings correct as things change.

If a customer asks for more of an item than you have, that item gets a stock marker next to its name, and a notice appears explaining what happens next. Depending on your store's settings, the notice either warns that checkout is still allowed or tells the customer they need to adjust the quantity first.

That notice reflects the state of the whole cart, not just the last item touched. If one product is over its available stock, the notice stays visible while the customer adjusts other items, and it disappears only when every item in the cart is within stock. The stock marker on each row, meanwhile, always describes that row alone.

Benefits for customers

It feels immediate. Changing a quantity gets an instant response instead of a page reload. The cart behaves like a modern app, which is what shoppers expect.

They always know where they stand. The price, total and item count change as they click, so there are no surprises at checkout.

Problems are shown when they happen. If an item can't be fulfilled in the requested quantity, the customer finds out at the moment they choose it, right next to the product, rather than at the end of checkout.

Removing items is obvious. The minus-to-trash icon makes it clear what the next click will do, which prevents both accidental removals and confusion.

It works well on a phone. Large, tappable plus and minus buttons are far easier than typing into a small number field, and the browser's tiny spinner arrows are hidden.

Benefits for shop owners

Fewer abandoned carts from friction. Every reload, confusing total or late stock surprise is a reason for a customer to give up. Removing those moments helps keep customers moving toward checkout.

Stock problems surface early. Customers learn about stock limits while they can still do something about it, which means fewer frustrated checkouts and fewer awkward conversations about orders you can't fully ship.

You control the stock policy. The notice follows your existing stock settings. If you allow checkout with insufficient stock, customers get a gentle warning. If you don't, they get a clear instruction to adjust. The cart does not impose its own rules.

It's server-verified. The browser never decides prices or stock on its own. Every change goes to the server, which updates the real session cart and returns the authoritative numbers. What customers see is what the store will actually charge.

It fits the Phoenix Cart way of working. There are no core file changes to track through upgrades. It uses the Bootstrap 5 styling and plain JavaScript the rest of the storefront already relies on, so there is no extra library to load or maintain.

The takeaway

A cart is where interest turns into an order, so it should be the smoothest page in the shop. Live quantity changes, instant totals and honest, accurate stock warnings make it faster for customers to buy and give shop owners fewer problem orders to deal with, all without touching the core.

This was first made available for FREE in the Code Co-op.
Not yet a member? What are you waiting for...join the Co-op.

This add-on shows a free shipping message on the shopping cart page.

- It uses the free shipping setting in the Order Total Delivery Module.
- If the cart total is below the free shipping threshold, the message says:
"Add [remaining amount] to qualify for free shipping."
- If the cart total has reached the free shipping threshold, the message says:
"Your cart qualifies for free shipping."
- Note that the destination setting is ignored because the destination country is not yet set at this stage.