How to create an Order history screen

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 History Screen serves as a vital component in user interface design, providing users with a comprehensive overview of their past orders within an application. It plays a crucial role in enhancing user convenience by offering quick access to detailed information about previous purchases or transactions. By presenting a clear and organized layout, the Order History Screen facilitates easy navigation and retrieval of order-related data, ultimately improving the user experience.

This detailed guide equips designers and developers with the necessary insights to seamlessly integrate a user-centric Order History Screen into their applications. Leveraging design components from the Ionic Kit, built upon the solid foundation of the extensive Ionic framework library, ensures effortless integration and consistency in design, ultimately enhancing the overall usability and satisfaction of the application.

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 order-history blank --type=react

3. Get inside the project directory

cd order-history

4. Create an Order page

Create a page Order.tsx inside src/pages and add code.

import { IonPage } from '@ionic/react';

const Order: React.FC = () => {
  return (
    <IonPage></IonPage>
  );
};

export default Order;

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>
    <IonToolbar>
    ...
    </IonToolbar>
  </IonHeader>
  <IonContent>
  ...
  </IonContent>
</IonPage>

6. Place the Back button component

Inside the IonToolbar component, add the IonButtons component and set the slot to start. This positions the button at the beginning of the toolbar.

Within the IonButtons component, include the IonBackButton component, setting the properties defaultHref='#' and text='' to create a back button that navigates back in the app's history upon being clicked. To customize the default icon, set the icon property to {arrowBack}. Please make sure that you’ve imported the icon from Ionic icons.

import { arrowBack } from "ionicons/icons";

...
<IonHeader>
    <IonToolbar>
        <IonButtons slot="start" className="ion-padding-start">
            <IonBackButton
                defaultHref="#"
                text=""
                icon={arrowBack}
            ></IonBackButton>
        </IonButtons>
    </IonToolbar>
</IonHeader>

7. Put the title on top of the page

After the IonButtons component, place the IonTitle with the text 'Order history' to add a title for this page.

<IonHeader>
  <IonToolbar>
        <IonButtons slot="start" className="ion-padding-start">
            <IonBackButton
                defaultHref="#"
                text=""
                icon={arrowBack}
            ></IonBackButton>
        </IonButtons>
    <IonTitle>Order history</IonTitle>
  </IonToolbar>
</IonHeader>

8. Place the Cart and Search buttons

Add an IonButtons component and set its slot to end to position the buttons at the end of the toolbar.

Inside the IonButtons component, include two IonButton components. For the first button, set the slot property to icon-only and the icon property to searchOutline. For the second button, set slot to icon-only and icon to cartOutline.

import { searchOutline, cartOutline, arrowBack } from "ionicons/icons";

...

<IonHeader>
    <IonToolbar>
        <IonButtons slot="start" className="ion-padding-start">
            <IonBackButton
                defaultHref="#"
                text=""
                icon={arrowBack}
            ></IonBackButton>
        </IonButtons>
        <IonTitle>Order history</IonTitle>
        <IonButtons slot="end" className="ion-padding-end">
            <IonButton>
                <IonIcon slot="icon-only" icon={searchOutline}></IonIcon>
            </IonButton>
            <IonButton>
                <IonIcon slot="icon-only" icon={cartOutline}></IonIcon>
            </IonButton>
        </IonButtons>
    </IonToolbar>
</IonHeader>

This concludes our work with IonHeader, and the following sections will cover working with IonContent.

9. Place the title

Add an IonItem component with the properties lines='none' and className='ion-margin-top'. Inside this IonItem, include an IonText component containing an <h1> tag with the text 'Order history'.

<IonContent>
    <IonItem lines='none' className='ion-margin-top'>
        <IonText>
            <h1>Order history</h1>
        </IonText>
    </IonItem>
</IonContent>

10. Place the date information

Add an IonItem component with the property lines='none'. Inside this IonItem, include a <p> tag with className='text-date' (custom class for styling) for styling, and set the text inside to '12/12/2023'.

<IonContent>
    ...
    <IonItem lines='none'>
        <p className='text-date'>12/12/2023</p>
    </IonItem>
</IonContent>

11. Place the order details

Add an IonItem component with the property lines='none'. Inside this IonItem, include IonLabel with text '#XYZ24DR' and IonNote with text 'Details'.

<IonContent>
    ...
    <IonItem lines='none'>
        <IonLabel>#XYZ24DR</IonLabel>
        <IonNote>Details</IonNote>
    </IonItem>
</IonContent>

12. Place detailed order information

Add an IonList component with the properties lines='none' and className='ion-margin-top'.

<IonContent>
    ...
    <IonList lines='none' className='ion-margin-top'>
    </IonList>

</IonContent>

13. Add item details

Inside the IonList component, add an IonItem component with className='item-card' (custom class for styling).

Within this IonItem, include an IonThumbnail component with property slot to start. Use the <img> tag within IonThumbnail to display the avatar image, specifying the alt attribute for the image description and src for the image path.

Next, use the IonLabel component to add additional information. Use the <h2> and <p> tags to display the texts 'Clay face mask' and 'Quantity: 2 | $50' respectively.

<IonContent>
    ...
    <IonList lines='none' className='ion-margin-top'>
        <IonItem className='item-card'>
            <IonThumbnail slot="start">
                <img alt="image" src="five.jpg" />
            </IonThumbnail>
            <IonLabel>
                <h2>Clay face mask</h2>
                <p>Quantity: 2 | $50</p>
            </IonLabel>
        </IonItem>
    </IonList>
</IonContent>

14. Add the following items

Repeat the previous step for the next four blocks, adjusting only the values of the IonLabel tags and src attributes as required for <img> tag.

<IonContent>
    ...
    <IonList lines='none' className='ion-margin-top'>
        <IonItem className='item-card'>
            <IonThumbnail slot="start">
                <img alt="image" src="five.jpg" />
            </IonThumbnail>
            <IonLabel>
                <h2>Clay face mask</h2>
                <p>Quantity: 2 | $50</p>
            </IonLabel>
        </IonItem>
        <IonItem className='item-card'>
            <IonThumbnail slot="start">
                <img alt="image" src="three.jpg" />
            </IonThumbnail>
            <IonLabel>
                <h2>Eyeshadow</h2>
                <p>Quantity: 1 | $85</p>
            </IonLabel>
        </IonItem>
        <IonItem className='item-card'>
            <IonThumbnail slot="start">
                <img alt="image" src="one.jpg" />
            </IonThumbnail>
            <IonLabel>
                <h2>Cosmetic set for face care</h2>
                <p>Quantity: 1 | $87</p>
            </IonLabel>
        </IonItem>
        <IonItem className='item-card'>
            <IonThumbnail slot="start">
                <img alt="image" src="two.jpg" />
            </IonThumbnail>
            <IonLabel>
                <h2>Night face cream</h2>
                <p>Quantity: 1 | $55</p>
            </IonLabel>
        </IonItem>
        <IonItem>
            <IonThumbnail slot="start">
                <img alt="image" src="four.jpg" />
            </IonThumbnail>
            <IonLabel>
                <h2>Fluid oil for hair ends</h2>
                <p>Quantity: 1 | $49</p>
            </IonLabel>
        </IonItem>
    </IonList>
</IonContent>

15. Add information for next date

Repeat steps 10 and 11 to set new date and new order information.

<IonContent>
    ...
    <IonItem lines='none' className='ion-margin-top'>
        <p className='text-date'>11/12/2023</p>
    </IonItem>

    <IonItem lines='none'>
        <IonLabel>#XTT24DR</IonLabel>
        <IonNote>Details</IonNote>
    </IonItem>
</IonContent>

16. Add items

Repeat steps 13 and 14 to add items for new date.

<IonContent>
    ...
    <IonList lines='none' className='ion-margin-top'>
        <IonItem className='item-card'>
            <IonThumbnail slot="start">
                <img alt="image" src="six.jpg" />
            </IonThumbnail>
            <IonLabel>
                <h2>Night face cream</h2>
                <p>Quantity: 1 | $55</p>
            </IonLabel>
        </IonItem>
        <IonItem>
            <IonThumbnail slot="start">
                <img alt="image" src="seven.jpg" />
            </IonThumbnail>
            <IonLabel>
                <h2>Fluid oil for hair ends</h2>
                <p>Quantity: 1 | $49</p>
            </IonLabel>
        </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!