Home / Blog / How to create a Shopping cart screen

How to create a Shopping cart screen

20 Nov 2024 · 6 min read

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 Shopping Cart Screen stands as a crucial component in user interface design, providing users with a central hub to review and manage items they intend to purchase within an application. It plays a pivotal role in facilitating the shopping experience by offering a convenient platform for users to view, modify, and finalize their selections before proceeding to checkout. By presenting a user-friendly and visually engaging interface, the Shopping Cart Screen enhances user satisfaction and streamlines the purchasing process.

This comprehensive guide empowers designers and developers to seamlessly integrate a user-centric Shopping Cart Screen into their applications. Leveraging design components from the Ionic Kit, rooted in the robust framework of the extensive Ionic library, ensures effortless integration and consistency in design, ultimately enhancing the overall usability and enjoyment 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 cart blank --type=react

3. Get inside the project directory

cd cart

4. Create a Cart page

Create page Cart.tsx inside src/pages and add code.

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

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

export default Cart;

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 an IonButtons component with the slot set to start, positioning the button at the beginning of the toolbar. Also, add className='ion-padding-start' to provide padding at the start.

Within the IonButtons component, include an IonBackButton component with the properties defaultHref='#' and text=''. This creates a back button that navigates back in the app's history when clicked. To customize the default icon, set the icon property to {arrowBack}. Ensure that {arrowBack} has been imported correctly 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 'Cart' to add a title for this page.

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

8. Place the Like button

Inside the IonToolbar component, add an IonButtons component with the slot set to end, positioning the button at the ending of the toolbar. Also, add className='ion-padding-end' to provide padding at the end.

Within the IonButtons component, incorporate the IonButton with IonIcon component inside with slot property to icon-only and icon to {heartOutline}.

import { heartOutline, arrowBack } from "ionicons/icons";
...
<IonHeader>
    <IonToolbar>
        <IonButtons slot="start" className="ion-padding-start">
            <IonBackButton
                defaultHref="#"
                text=""
                icon={arrowBack}
            ></IonBackButton>
        </IonButtons>
        <IonTitle>Cart</IonTitle>
        <IonButtons slot="end" className="ion-padding-end">
            <IonButton>
                <IonIcon slot="icon-only" icon={heartOutline}></IonIcon>
            </IonButton>
        </IonButtons>
    </IonToolbar>
</IonHeader>

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

9. Organize the list of items

Within the IonContent section, place the IonList with lines to none and className to ion-margin-top.

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

10. Place the first item

Inside the IonList component, add an IonItem component.

Inside the IonItem component, add the IonThumbnail component with the slot attribute set 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 'Article: 180286' respectively.

Next, use one more <p> tag at add price information '$50'. Inside <p> tap add <span> with clasName='old' (custom class for styling) to show old price '$60'.

<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>Article: 180286</p>
            <p>$50 <span className='old'>$60</span></p>
        </IonLabel>
    </IonItem>
</IonList>

11. Setting up the quantity counter

Inside the IonItem component, set the slot to end. Add an IonButton with the following properties: className='btn' (for custom styling), slot set to end, fill set to solid, shape set to round, color set to light, and size set to large.

Within this IonButton, add an IonIcon component with slot set to icon-only and icon set to {remove}.

Next, include an IonText component, also with slot set to end. Inside this IonText, add a <p> tag with className='count' (for custom styling) and the number '2' to display the quantity of items.

Finally, add another IonButton with the same properties, but with the IonIcon component inside set to icon={add}.

<IonList lines='none' className='ion-margin-top'>
  ...
    <IonItem slot='end'>
        <IonButton
            className='btn'
            slot='end'
            fill="solid"
            shape="round"
            color="light"
            size="large">
            <IonIcon slot="icon-only" icon={remove}></IonIcon>
        </IonButton>
        <IonText slot='end'>
            <p className='count'>2</p>
        </IonText>
        <IonButton
            className='btn'
            slot='end'
            fill="solid"
            shape="round"
            color="light"
            size="large">
            <IonIcon slot="icon-only" icon={add}></IonIcon>
        </IonButton>
    </IonItem>
</IonList>

12. Add other items

Repeat the previous two steps to add other two items.

<IonList>
    ...
    <IonItem>
        <IonThumbnail slot='start'>
            <img alt='image' src='three.jpg' />
        </IonThumbnail>
        <IonLabel>
            <h2>Eyeshadow</h2>
            <p>Article: 180286</p>
            <p>$85 <span className='old'>$89</span></p>
        </IonLabel>
    </IonItem>
    <IonItem slot='end'>
        <IonButton
            className='btn'
            slot='end'
            fill="solid"
            shape="round"
            color="light"
            size="large">
            <IonIcon slot="icon-only" icon={remove}></IonIcon>
        </IonButton>
        <IonText slot='end'>
            <p className='count'>1</p>
        </IonText>
        <IonButton
            className='btn'
            slot='end'
            fill="solid"
            shape="round"
            color="light"
            size="large">
            <IonIcon slot="icon-only" icon={add}></IonIcon>
        </IonButton>
    </IonItem>

    <IonItem>
        <IonThumbnail slot='start'>
            <img alt='image' src='one.jpg' />
        </IonThumbnail>
        <IonLabel>
            <h2>Cosmetic set for face care</h2>
            <p>Article: 180286</p>
            <p>$87 <span className='old'>$93</span></p>
        </IonLabel>
    </IonItem>
    <IonItem slot='end'>
        <IonButton
            className='btn'
            slot='end'
            fill="solid"
            shape="round"
            color="light"
            size="large">
            <IonIcon slot="icon-only" icon={remove}></IonIcon>
        </IonButton>
        <IonText slot='end'>
            <p className='count'>1</p>
        </IonText>
        <IonButton
            className='btn'
            slot='end'
            fill="solid"
            shape="round"
            color="light"
            size="large">
            <IonIcon slot="icon-only" icon={add}></IonIcon>
        </IonButton>
    </IonItem>
</IonList>

13. Add Total block

There should be three <IonItem> components:

  1. The first <IonItem> has the properties lines='none' and className='ion-margin-top'.
  2. The second <IonItem> has lines='full'.
  3. The last <IonItem> has lines='none'.

Each <IonItem> contains an <IonLabel> and an <IonNote> with the following text:

  • The first <IonItem> displays 'Subtotal' and '$304'.
  • The second <IonItem> displays 'Discount' and '$32'.
  • The last <IonItem> displays 'Total' and '$272'.
<IonContent>
    ...
    <IonItem lines='none' className='ion-margin-top'>
        <IonLabel>Subtotal</IonLabel>
        <IonNote>$304</IonNote>
    </IonItem>

    <IonItem lines="full">
        <IonLabel>Discount</IonLabel>
        <IonNote>$32</IonNote>
    </IonItem>

    <IonItem lines="none">
        <IonLabel>Total</IonLabel>
        <IonNote>$272</IonNote>
    </IonItem>
</IonContent>

14. Add buttons

There should be three <IonButton> components:

  1. The first <IonButton> has the properties expand='block' and className='ion-margin'. Text inside is 'Go to checkout'.
  2. The second <IonItem> has fill='clear', expand='block' and className='ion-margin'. Text inside is 'Share cart'
<IonContent>
    ...
    <IonButton
        expand='block'
        className='ion-margin'
    >
        Go to checkout
    </IonButton>
    <IonButton
        fill="clear"
        expand='block'
        className='ion-margin'
    >
        Share cart
    </IonButton>
</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!

Looking for Ionic kit for you platform?
Ionic Sketch
Ionic Figma
Ionic XD
Made in New Zealand 🇳🇿 at  Sliday