Imitation Box Horse - Complete Shopping Cart Function (14)

Technology Stack
AppGallery Connect

Development Preparation
In the previous section, we implemented status toggling for cart items, quantity adjustment, swipe-to-delete functionality, and price calculation for selected products. This section focuses on cloud synchronization to ensure cart data persists across devices and sessions. Currently, only data queries are fetched from the cloud. Other operations (e.g., selection, deletion) work locally but do not retain changes when the app is restarted or used on another device. Storing data locally (e.g., preferences or local databases) cannot solve cross-device synchronization. Therefore, we'll submit all operations to the cloud to maintain consistent cart states across devices, app restarts, and user account switches.

Functional Analysis

Product Selection
Maintain the isNeedPay status rendering logic from the previous section.
Use upsert to update cloud data, ensuring selections persist.
Quantity Adjustment
Update the buyAmount field locally as before.
Use upsert to synchronize quantity changes to the cloud database.
Product Deletion
Replace the local splice deletion with the cloud database's delete function to ensure permanent removal.
Add missing price calculation after deletion to keep totals accurate.
Price Calculation
No changes needed; continue calculating based on selected items.

Code Implementation

1. Selection Toggle with Cloud Sync

typescript
let cartPush = new cart_product_list();
let data: CartProductList = item;
cartPush.id = data.id;
cartPush.productId = data.productId; // Product ID
cartPush.productSpecId = data.productSpecId; // Specification ID
cartPush.productName = data.productName; // Product name
cartPush.productSpecName = data.productSpecName;
cartPush.productImgAddress = data.productImgAddress;
cartPush.buyAmount = data.buyAmount; // Quantity
cartPush.activityType = data.activityType; // Activity type (not used)
cartPush.productPrice = data.productPrice; // Price
cartPush.productOriginalPrice = data.productOriginalPrice; // Original price
cartPush.couponPrice = data.couponPrice;

if (item.isNeedPay) {
item.isNeedPay = false;
this.productList[index] = new CartProductList(
item.id, item.productId, item.productSpecId, item.productName, item.productSpecName,
item.buyAmount, item.isNeedPay, item.activityType, item.productImgAddress,
item.productOriginalPrice, item.productPrice, item.couponPrice
);
cartPush.isNeedPay = false;
} else {
item.isNeedPay = true;
this.productList[index] = new CartProductList(
item.id, item.productId, item.productSpecId, item.productName, item.productSpecName,
item.buyAmount, item.isNeedPay, item.activityType, item.productImgAddress,
item.productOriginalPrice, item.productPrice, item.couponPrice
);
cartPush.isNeedPay = true;
}

let num = await databaseZone.upsert(cartPush);
hilog.info(0x0000, 'TAG', Data updated: ${num} records);
this.getCountPrice();

1. Decrease Quantity with Cloud Sync

typescript
if (item.buyAmount === 1) {
showToast("Minimum quantity reached");
} else {
item.buyAmount--;

let cartPush = new cart_product_list();
let data: CartProductList = item;
cartPush.id = data.id;
cartPush.productId = data.productId;
cartPush.productSpecId = data.productSpecId;
cartPush.productName = data.productName;
cartPush.productSpecName = data.productSpecName;
cartPush.productImgAddress = data.productImgAddress;
cartPush.buyAmount = item.buyAmount;
cartPush.activityType = data.activityType;
cartPush.productPrice = data.productPrice;
cartPush.productOriginalPrice = data.productOriginalPrice;
cartPush.couponPrice = data.couponPrice;
cartPush.isNeedPay = data.isNeedPay;

let num = await databaseZone.upsert(cartPush);
hilog.info(0x0000, 'TAG', Data updated: ${num} records);

this.productList[index] = new CartProductList(
item.id, item.productId, item.productSpecId, item.productName, item.productSpecName,
item.buyAmount, item.isNeedPay, item.activityType, item.productImgAddress,
item.productOriginalPrice, item.productPrice, item.couponPrice
);
this.getCountPrice();
}

1. Increase Quantity with Cloud Sync

typescript
item.buyAmount++;

let cartPush = new cart_product_list();
let data: CartProductList = item;
cartPush.id = data.id;
cartPush.productId = data.productId;
cartPush.productSpecId = data.productSpecId;
cartPush.productName = data.productName;
cartPush.productSpecName = data.productSpecName;
cartPush.productImgAddress = data.productImgAddress;
cartPush.buyAmount = item.buyAmount;
cartPush.activityType = data.activityType;
cartPush.productPrice = data.productPrice;
cartPush.productOriginalPrice = data.productOriginalPrice;
cartPush.couponPrice = data.couponPrice;
cartPush.isNeedPay = data.isNeedPay;

let num = await databaseZone.upsert(cartPush);
hilog.info(0x0000, 'TAG', Data updated: ${num} records);

this.productList[index] = new CartProductList(
item.id, item.productId, item.productSpecId, item.productName, item.productSpecName,
item.buyAmount, item.isNeedPay, item.activityType, item.productImgAddress,
item.productOriginalPrice, item.productPrice, item.couponPrice
);
this.getCountPrice();

1. Delete Item with Cloud Sync

typescript
Button('Delete').margin(4)
.onClick(async () => {
try {
// Delete from cloud database
const condition = new cloudDatabase.DatabaseQuery(cart_product_list)
.equalTo("id", item.id);
const result = await databaseZone.delete(condition);
if (result > 0) {
// Remove from local list
let index = this.productList.indexOf(item);
this.productList.splice(index, 1);
this.getCountPrice(); // Update price calculation
showToast("Item deleted successfully");
}
} catch (err) {
hilog.error(0x0000, 'TAG', Failed to delete item: ${err});
showToast("Failed to delete item");
}
});

Final Notes
The shopping cart is now fully functional with cloud synchronization. All operations (selection, quantity adjustment, deletion) are persisted in the cloud, ensuring consistent states across devices.

PS: The cloud data submission code is highly repetitive. Interested developers may consider encapsulating these operations into reusable functions.