How to create a Wishlist 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 Wishlist Screen is a vital feature in many modern apps, especially in e-commerce, travel, and content-based platforms. It allows users to save items, content, or experiences they want to revisit later. By providing users with a convenient way to store their preferences, a Wishlist Screen improves user engagement, enhances the shopping experience, and increases the chances of conversion. A well-designed Wishlist Screen offers an intuitive layout, clear item categorization, and simple navigation, all of which contribute to an enjoyable user experience.

This guide will walk you through the steps to design and implement a Wishlist Screen using the Ionic Design Kit. By leveraging its pre-built components and the Ionic Framework, you can create a consistent, visually appealing, and user-friendly Wishlist Screen that encourages users to engage with your app more frequently.

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

3. Get inside the project directory

cd wishlist

4. Create a Wishlist page

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

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

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

export default Wishlist;

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 {chevronBackOutline}. Ensure that {chevronBackOutline} has been imported correctly from Ionic icons.

import { chevronBackOutline } from "ionicons/icons";

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

7. Put the title on top of the page

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

<IonHeader>
  <IonToolbar>
        <IonButtons slot='start' className='ion-padding-start'>
            <IonBackButton text='' defaultHref='#' icon={chevronBackOutline} />
        </IonButtons>
        <IonTitle>Wishlist</IonTitle>
  </IonToolbar>
</IonHeader>

8. Place the Bag 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 {bagOutline}.

import { chevronBackOutline, bagOutline } from "ionicons/icons";

...
<IonHeader>
  <IonToolbar>
    <IonButtons slot='start' className='ion-padding-start'>
      <IonBackButton text='' defaultHref='#' icon={chevronBackOutline} />
    </IonButtons>
    <IonTitle>Wishlist</IonTitle>
    <IonButtons slot='end' className='ion-padding-end'>
      <IonButton>
        <IonIcon slot='icon-only' icon={bagOutline} />
      </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 with lines to none, place the IonList .

<IonContent>
    <IonList lines='none'>
  </IonList>
</IonContent>

10. Create an item with image and details

Inside the IonList component, add an IonItem component.

Wrap the content in an IonItem. Add an image with IonThumbnail and slot='start', include the text inside IonLabel with a header <h2> and other details like article number and price in paragraphs <p>, and finally, place an icon {bagAddOutline} at the end using IonIcon with slot='end'.

<IonList lines='none'>
    <IonItem>
        <IonThumbnail slot='start'>
            <img src='w-1.jpg' alt='image' />
        </IonThumbnail>
        <IonLabel>
            <h2>Knitted toy ball for cats</h2>
            <p>Article: 180286</p>
            <p>$15</p>
        </IonLabel>
        <IonIcon slot='end' icon={bagAddOutline} />
    </IonItem>
</IonList>

11. Create other items

Repeat the previous step to add other items with different data.

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!