One of the pages that you will be required to create when building a Ecommerce mobile app is a Cart system where in users can easily manage the items they want to buy. The demo bellow demonstrates how you to create a stylish cart system without having to install external plugins to meet the requirements.
We’re rendering 5 products stored in the state. Each line item has its own checkbox, quantity field and a delete button.
- Checbox – rather than using the default React Native checkbox which only works on android, I’ve decided to use a icon and then have it toggle on-press. On-press it calls the selectHandler() function to check / uncheck the line item, which also updates the cartItems state then re-renders the screen.
- Delete button – rather than using a <Button> component, we’re simply wrapping the delete action with a <TouchableOpacity> which basically works like a button. On-press it calls the function deleteHandler() which removes the item from the cartItems state then re-renders the screen. The delete button is not working on the demo, but it works on iOS and Android devices.
- Quantity field – rather than installing a external plugin for a quantity UI component, I’ve decided to just make my own using Icons and some styling techniques. Basically we’re using icons on the Plus and Minus buttons, then the quantity number is simply a text that renders the value from the cartItems state. On-press of the buttons, we call the quantityHandler() function which passes the action (add / subtract) depending on what was pressed, and then updates the cartItems state then re-renders the screen.
At the bottom of the screen you’ll also find: a container where you can enter the voucher code, a button for selecting all items, a dynamic subtotal, and a checkout button.
- The voucher field is standard for most ecommerce sites
- Select All – this basically checks / unchecks all the items in the list.
- SubTotal – this basically renders the total price of all CHECKED items. The value of the subtotal also renders on the fly as you DELETE the line item or UPDATE the quantity of a line item.
- Checkout button – when the user is ready to proceed with the payment, they can click on the checkout button which will send them to the checkout screen (not included in the demo).