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 Product Listing Screen is a core feature in e-commerce, marketplace, and retail applications. It displays available products in a grid view, allowing users to search, browse, filter, and select items efficiently. A well-designed Product Listing Screen enhances the shopping experience by providing clear product details, high-quality images, and intuitive navigation. Integrating filter options enables users to refine their search based on categories, price range, ratings, and more, making it easier to find what they need.
This guide will walk you through the steps to design and implement a Product Listing Screen using the Ionic Design Kit. By leveraging its design elements and the Ionic Framework, you can create a visually appealing, responsive, and user-friendly interface that improves product discovery and shopping efficiency.
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 productlisting blank --type=react
3. Get inside the project directory
cd productlisting
4. Create a Product listing page
Create page ProductListing.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const ProductListing: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default ProductListing;
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 a back button
The header of this page is created using the IonHeader component, which contains an IonToolbar element. The toolbar provides a structured layout for header elements. Inside the toolbar, the code defines a back button using the IonBackButton component. This button has a slot attribute set to start, meaning it appears on the left side of the toolbar. The button also has a class of ion-padding-start to add some padding from the left edge. The text attribute is set to an empty string to omit any label, while the defaultHref attribute is set to #, indicating that it navigates to the previous page. The icon displayed on the button is defined as arrowBack, which should be imported from Ionicons or another icon set. Finally, the IonTitle component sets the title of the page to 'All products', appearing at the center of the toolbar.
<IonHeader>
<IonToolbar>
<IonButtons slot='start' className='ion-padding-start'>
<IonBackButton text='' defaultHref='#' icon={arrowBack} />
</IonButtons>
<IonTitle>
All products
</IonTitle>
</IonToolbar>
</IonHeader>
7. Insert a search bar
The second toolbar is placed immediately after the first one, within the same IonHeader element. It serves the purpose of adding a search bar at the top of the page. The search bar itself is created using the IonSearchbar component, which is a built-in Ionic UI component that provides a user-friendly search input field. The search bar has no additional attributes, which means it uses the default settings. The placement within the toolbar ensures it takes up the entire width and integrates well with the page's header structure. This design makes it easy for users to quickly find products on the page.
<IonHeader>
<IonToolbar>
<IonButtons slot='start' className='ion-padding-start'>
<IonBackButton text='' defaultHref='#' icon={arrowBack} />
</IonButtons>
<IonTitle>
All products
</IonTitle>
</IonToolbar>
<IonToolbar>
<IonSearchbar />
</IonToolbar>
</IonHeader>
This concludes our work with IonHeader, and the following sections will cover working with IonContent.
8. Add filter chips
The content of the page starts with the IonContent component. Inside it, there is a <div> element that contains a series of filter chips. The div has classes ion-padding-start and ion-padding-top to add padding to the top and left sides. Each chip is created using the IonChip component. The first chip includes an icon for filtering, displayed using the IonIcon component with the options icon and a dark color. It also contains a label with the text 'Filters'. The subsequent chips represent individual categories: 'Plates', 'Mugs', and 'Cutlery'. Each of these chips has a label and a close icon to indicate that the filter can be removed. The chips without an outline appear filled, while the one with the outline={true} attribute has a bordered appearance. This intuitive chip layout helps users visually identify and manage selected filters on the page.
...
<IonContent>
<div className='ion-padding-start ion-padding-top'>
<IonChip outline={true}>
<IonIcon icon={options} color='dark' />
<IonLabel>Filters</IonLabel>
</IonChip>
<IonChip>
<IonLabel>Plates</IonLabel>
<IonIcon icon={close} color='dark' />
</IonChip>
<IonChip>
<IonLabel>Mugs</IonLabel>
<IonIcon icon={close} color='dark' />
</IonChip>
<IonChip>
<IonLabel>Cutlery</IonLabel>
<IonIcon icon={close} color='dark' />
</IonChip>
</div>
</IonContent>
9. Build the product grid
The product listing is structured using an Ionic grid layout, defined within an IonGrid component. Inside the grid, an IonRow component is used to group the columns. The code generates six columns dynamically using the Array.from() method and the map() function. The titles and prices of the products are stored in separate arrays, and each iteration of the loop creates an IonCol component representing a single product. The size of each column is set to 6, meaning two products fit per row. Inside each column, an IonThumbnail component displays a product image. The image source is dynamically generated using a template string that includes the current index. Below the image, an IonLabel component contains an <h2> element for the product name and a <p> element for the price. The className attribute of ion-text-nowrap eclipsis ensures that long text is truncated with an ellipsis when it exceeds the width. This grid-based layout with responsive columns makes the product listing visually appealing and easy to browse.
<IonContent>
...
<IonGrid>
<IonRow>
{Array.from({length:6}).map((_,index) =>{
const titles = [
"Cheerful ceramic mug",
"Ornately decorated ceramic plate",
"Whimsical illustrated coffee cup",
"Colorful ceramic mug",
"Elegant dinnerware set",
"Colorful rainbow-printed mug",
];
const prices = [
"$13",
"$67",
"$19",
"$11",
"$125",
"$8",
];
return (
<IonCol key={index} size='6'>
<IonThumbnail>
<img src={`pl-${index + 1}.png`} alt="image" />
</IonThumbnail>
<IonLabel className='ion-text-nowrap eclipsis'>
<h2>{titles[index]}</h2>
<p>{prices[index]}</p>
</IonLabel>
</IonCol>
)
})}
</IonRow>
</IonGrid>
</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!