Looking for Ionic kit for you platform?
Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.
The Order Tracking Screen is a key feature in e-commerce, food delivery, and logistics applications, allowing users to monitor their orders in real time. A well-designed tracking screen includes delivery status updates, estimated arrival time, live location tracking, and order details to keep users informed at every stage. Additional features like courier details and contact option for support can further enhance the user experience.
This guide will walk you through the steps to design and implement an Order Tracking Screen using the Ionic Design Kit. By leveraging its UI components and the Ionic Framework, you can create a visually engaging, responsive, and intuitive order tracking interface that ensures users stay updated effortlessly.
1. Install Ionic CLI with the command
Creating a project with the Ionic CLI
npm i -g @ionic/cli
2. Create a new project
To create a new project, run the following command.
ionic start delivery blank --type=react
3. Get inside the project directory
cd delivery
4. Create a Delivery page
Create page Delivery.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const Delivery: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default Delivery;
Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.
5. Select the layout structure
For convenience, we will be using the layout structure recommended by Ionic for all screens. This allows us to add header code and content inside the IonPage.
<IonPage>
<IonHeader>
...
</IonHeader>
<IonContent>
...
</IonContent>
</IonPage>
6. Add a header with back button
This section creates a fixed header at the top of the screen. It includes a back button on the left side, allowing the user to return to the previous page. The IonToolbar contains the page title 'Delivery', displayed at the center. The back button uses an icon={chevronBack} and doesn't display any text.
...
<IonHeader>
<IonToolbar>
<IonButtons slot='start' className='ion-padding-start'>
<IonBackButton text="" defaultHref='#' icon={chevronBack} />
</IonButtons>
<IonTitle>
Delivery
</IonTitle>
</IonToolbar>
</IonHeader>
7. Show estimated delivery time
This part of the content shows estimated delivery information. It includes three centered text elements: one describes that it's an estimated time, the second displays the actual time range, and the third gives a short status update about the courier picking up the order. The use of IonText with the ion-text-center class ensures the text is horizontally centered.
<IonContent className='ion-padding-top'>
<IonText className='ion-text-center'>
<p>Estimated delivery time</p>
</IonText>
<IonText className='ion-text-center'>
<h1>15:45 - 16:00</h1>
</IonText>
<IonText className='ion-text-center'>
<p>The courier picks up your order</p>
</IonText>
</IonContent>
8. Display delivery progress
A grid layout is used here with three columns, each showing the progress of the delivery process. Each IonCol has a IonProgressBar showing a value (likely between 0 and 1), accompanied by a label under it, such as 'In progress', 'Pick up', or 'Delivery'. The final step uses a special class disabled to style it differently when the delivery hasn’t started yet.
...
<IonContent>
...
<IonGrid>
<IonRow>
<IonCol size="4" className='ion-text-center'>
<IonProgressBar value={progressOne} />
<IonText>
<p>In progress</p>
</IonText>
</IonCol>
<IonCol size="4" className='ion-text-center'>
<IonProgressBar value={progressTwo} />
<IonText>
<p>Pick up</p>
</IonText>
</IonCol>
<IonCol size="4" className='ion-text-center'>
<IonProgressBar value={progressThree} />
<IonText>
<p className='disabled'>Delivery</p>
</IonText>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
9. Add courier details
This section shows who the courier is. It contains a single list item with the courier's avatar on the left, their name 'Daniel Smith' and role 'Courier' in the center, and a chat icon on the right. This allows for quick identification and possibly interaction (e.g., opening a chat).
<IonContent>
...
<IonList lines='none'>
<IonItem>
<IonAvatar slot='start'>
<img src='del-ava.png' alt='avatar' />
</IonAvatar>
<IonLabel>
<h2>Daniel Smith</h2>
<IonNote>Courier</IonNote>
</IonLabel>
<IonIcon slot='end' icon={chatbubbleOutline} color='primary' />
</IonItem>
</IonList>
</IonContent>
10. List ordered items
Here you see a list of ordered items. Each item includes a small image of the product on the left, the product name and quantity in the center, and the price on the right. The IonListHeader introduces the section with the title 'Your order'. This part provides a visual and text summary of everything the user has purchased.
<IonContent>
...
<IonList lines='none'>
<IonListHeader>
<h3>Your order</h3>
</IonListHeader>
<IonItem>
<IonAvatar slot='start'>
<img src='del-one.png' alt='image' />
</IonAvatar>
<IonLabel>
<h2>Ham and pepperoni pizza</h2>
<IonNote>1x</IonNote>
</IonLabel>
<IonNote slot='end'>$23</IonNote>
</IonItem>
<IonItem>
<IonAvatar slot='start'>
<img src='del-two.png' alt='image' />
</IonAvatar>
<IonLabel>
<h2>Vegetarian pizza</h2>
<IonNote>1x</IonNote>
</IonLabel>
<IonNote slot='end'>$18</IonNote>
</IonItem>
<IonItem>
<IonAvatar slot='start'>
<img src='del-three.png' alt='image' />
</IonAvatar>
<IonLabel>
<h2>Orange juice</h2>
<IonNote>3x</IonNote>
</IonLabel>
<IonNote slot='end'>$12</IonNote>
</IonItem>
</IonList>
</IonContent>
11. Show pickup and delivery addresses
This section outlines the delivery route. It includes two list items: the pickup location and the drop-off address. Each item has an icon at the start (pin for pickup and flag for drop-off), colored accordingly for quick visual distinction, followed by the address text.
<IonContent>
...
<IonList lines='none'>
<IonListHeader>
<h3>Delivery</h3>
</IonListHeader>
<IonItem>
<IonIcon slot='start' icon={pin} color='warning' />
<IonLabel>
245 Oak Street, New York, NY
</IonLabel>
</IonItem>
<IonItem>
<IonIcon slot='start' icon={flag} color='success' />
<IonLabel>
1535 Maple Avenue, Apt 7B, Brooklyn, NY
</IonLabel>
</IonItem>
</IonList>
</IonContent>
12. Display cost summary
The final section gives a cost breakdown. It lists the delivery fee and the total order value using labeled IonItem components. The monetary values are placed in IonNote tags on the right to separate them from the labels and align them for easy readability.
<IonContent>
...
<IonList lines='none'>
<IonListHeader>
<h3>Summary information</h3>
</IonListHeader>
<IonItem>
<IonLabel>Delivery</IonLabel>
<IonNote slot='end'>$2</IonNote>
</IonItem>
<IonItem>
<IonLabel>Order value</IonLabel>
<IonNote slot='end'>$53</IonNote>
</IonItem>
</IonList>
</IonContent>
Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.
Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!