Build a Fully Functional Shopping Cart in WeChat Mini Programs

Introduction

Previously, shopping carts were implemented with heavy DOM manipulation. WeChat Mini Programs use a Vue.js‑like approach, and this article shows how to build a cart feature in a Mini Program.

Requirements

The cart must support single selection, select all, and deselection, with total price calculation based on selected items. It should allow increasing or decreasing the quantity of each product, and deleting items, showing an empty‑cart layout when no items remain.

Data needed includes a list of products (carts) with image, title, price, quantity, selected flag, and id; a selectAllStatus flag; totalPrice; and a hasList flag indicating whether the cart is empty.

Implementation

Initialization

Cart data is usually fetched from the server; here we simulate it in the onShow lifecycle method to ensure the latest state each time the cart page appears.

Layout (wxml)

Bind the previously designed static layout to the data fields.

Calculate Total Price

Total price equals the sum of (price × quantity) for all selected items. The method is called whenever an operation that may affect the price occurs.

Selection Event

Clicking an item toggles its selected field; the item index is passed via data-index="{{index}}".

Select All Event

The select‑all checkbox updates each product's selected status based on the selectAllStatus flag.

Increase/Decrease Quantity

Pressing “+” increments num; pressing “‑” decrements it when num > 1.

Delete Item

Clicking the delete button removes the item from the cart list; if the list becomes empty, hasList is set to false to display the empty‑cart layout.

Conclusion

Although a shopping cart appears simple, it involves many WeChat Mini Program concepts, making it an excellent practice project for beginners.