Product List and View Page for Ecommerce App


Product list and view page for ecommerce App
Product list and view page for ecommerce App

Let's create template for product list and view product
For fontawesome refer this link

Please watch this video to understand the code

BackNavigation.xaml

 <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Ecommerce.UI.Template.CustomControls.BackNavigation"
             xmlns:fontawesome="clr-namespace:Ecommerce.UI.Template.Models">
    <StackLayout  Spacing="20"  Grid.Row="0" Orientation="Horizontal">
        <Label  Text="{x:Static fontawesome:Solid.Arrow_Left}" FontSize="20" VerticalOptions="Center" FontFamily="FontAwesomeFreeSolid" TextColor="Gray">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
            </Label.GestureRecognizers>
        </Label>
        <Label x:Name="lbl" Text="Products" VerticalOptions="Center"  FontAttributes="Bold" FontSize="20" TextColor="{x:StaticResource Primary}"></Label>
    </StackLayout>
</ContentView>

BackNavigation.xaml.cs

public partial class BackNavigation : ContentView
{
	public BackNavigation()
	{
		InitializeComponent();
	}

    private async void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
    {
		await Shell.Current.GoToAsync("..");
    }

	public string Title
	{
		get => lbl.Text;
		set => lbl.Text = value;
	}
}

ProductTemplate.xaml
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Ecommerce.UI.Template.Pages.Product.Template.ProductTemplate">
    <StackLayout Padding="0,5">
        <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" ColumnDefinitions="Auto,*,Auto" ColumnSpacing="10" RowDefinitions="Auto,Auto,Auto,Auto">
            <Frame CornerRadius="20" Padding="0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" BorderColor="White">
                <Image Source="{Binding Img}" Aspect="Fill" Grid.Column="0" HeightRequest="110" WidthRequest="110" Grid.Row="0" Grid.RowSpan="4"></Image>
            </Frame>
            <Label Text="{Binding Title}" TextColor="{x:DynamicResource Primary}" FontSize="18" FontAttributes="Bold" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2"></Label>
            <Label Text="{Binding Description}" TextColor="{x:DynamicResource GrayColor}" FontAttributes="Bold" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"></Label>
            <Label Text="{Binding Price,StringFormat='${0}'}" TextColor="{x:DynamicResource GrayColor}" TextDecorations="Strikethrough"  Grid.Row="2" Grid.Column="1" ></Label>
            <Label Text="{Binding DiscountPrice,StringFormat='${0}'}" TextColor="DeepPink" FontAttributes="Bold" FontSize="18" Grid.Row="3" Grid.Column="1" ></Label>
            <Label Text="Color" TextColor="Gray" FontAttributes="Bold" Grid.Row="2" Grid.Column="2" ></Label>
            <StackLayout Orientation="Horizontal" Spacing="5" Grid.Row="3" Grid.Column="2" >
                <BoxView Color="#89E6DB" HeightRequest="20" WidthRequest="20"></BoxView>
                <BoxView Color="#F47876" HeightRequest="20" WidthRequest="20"></BoxView>
                <BoxView Color="#ECAD77" HeightRequest="20" WidthRequest="20"></BoxView>
            </StackLayout>
        </Grid>
    </StackLayout>
</ContentView>

ViewProductTemplate.xaml
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Ecommerce.UI.Template.Pages.Product.Template.ViewProductTemplate">
    <StackLayout>
        <Image Source="{Binding Img}" HorizontalOptions="FillAndExpand" HeightRequest="270" Aspect="AspectFit"></Image>
    </StackLayout>

</ContentView>
Now add product list page in your solution
Products.Xaml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Ecommerce.UI.Template.Pages.Product.Products"
             xmlns:fontawesome="clr-namespace:Ecommerce.UI.Template.Models"
             xmlns:template ="clr-namespace:Ecommerce.UI.Template.Pages.Product.Template"
             xmlns:controls="clr-namespace:Ecommerce.UI.Template.CustomControls"
             Title="Products"
             Shell.NavBarIsVisible="False">
    <Grid HorizontalOptions="FillAndExpand" Padding="20,20,10,20" VerticalOptions="FillAndExpand" RowDefinitions="40,70,*" ColumnDefinitions="*,Auto">
        <controls:BackNavigation Grid.Row="0" Title="Products" Grid.Column="0"  Grid.ColumnSpan="2"></controls:BackNavigation>
        <SearchBar Margin="-25,0,0,0" HorizontalOptions="FillAndExpand" Placeholder="Search for Product" Grid.Row="1" Grid.Column="0"/>
        <Label Text="{x:Static fontawesome:Solid.Filter}" FontSize="20" VerticalOptions="Center" Grid.Row="1" Grid.Column="1" HorizontalOptions="End" FontFamily="FontAwesomeFreeSolid" TextColor="Gray"></Label>
        <ListView x:Name="listView" Grid.Row="2" HasUnevenRows="True" SeparatorVisibility="None" ItemSelected="listView_ItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <template:ProductTemplate></template:ProductTemplate>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</ContentPage>
Product.xaml.cs
public partial class Products : ContentPage
{
	public Products()
	{
		InitializeComponent();
		listView.ItemsSource = new ProductModel().GetProducts();
	}

    private async void listView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
		try
		{
			if (listView.SelectedItem != null)
			{
				await Shell.Current.GoToAsync("ViewProduct");
			}
		}
		catch(Exception ex)
		{
            await DisplayAlert("Ecommerce", ex.Message, "OK");
        }
    }
}
ViewProduct.xaml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Ecommerce.UI.Template.Pages.Product.ViewProduct"
             xmlns:fontawesome="clr-namespace:Ecommerce.UI.Template.Models"
             xmlns:template="clr-namespace:Ecommerce.UI.Template.Pages.Product.Template"
             xmlns:controls="clr-namespace:Ecommerce.UI.Template.CustomControls"
             Shell.NavBarIsVisible="False">
    <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="20" RowDefinitions="Auto,Auto,Auto,300,Auto,Auto,Auto,Auto,Auto,Auto,*" ColumnSpacing="20" ColumnDefinitions="*,*">
        <controls:BackNavigation Grid.Row="0" Title="Products Details" Margin="0,0,0,20"></controls:BackNavigation>
        <Label Text="OnePlus Mobile" Grid.Row="1"  TextColor="{x:DynamicResource Primary}"></Label>
        <Label Text="A little more that you had expect.OnePlus Nord CE2 Lite 5G." Grid.Row="2" Grid.ColumnSpan="2" TextColor="DarkGray"></Label>
        <StackLayout  Grid.Row="3" Margin="-20,20,-20,0" Grid.Column="0" Grid.ColumnSpan="2">
            <CarouselView x:Name="cv" HeightRequest="290" IndicatorView="indicatorView">
                <CarouselView.ItemTemplate>
                    <DataTemplate>
                        <template:ViewProductTemplate></template:ViewProductTemplate>
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>
            <IndicatorView x:Name="indicatorView"
                   IndicatorColor="LightGray"
                   SelectedIndicatorColor="DarkGray"
                   HorizontalOptions="Center" />
        </StackLayout>
        <StackLayout Spacing="10" Grid.Row="4" Grid.Column="0" Margin="0,50,0,0" Orientation="Horizontal">
            <Label Text="$100" TextColor="DeepPink" FontAttributes="Bold" FontSize="20" ></Label>
            <Label Text="$150" TextColor="{x:DynamicResource GrayColor}" FontSize="20" TextDecorations="Strikethrough"  ></Label>
        </StackLayout>
        <Label Text="5 in a stock" TextColor="{x:DynamicResource Primary}" Margin="0,50,0,0" FontAttributes="Bold" FontSize="18" Grid.Row="4" Grid.Column="1" HorizontalOptions="End"></Label>
        <Label Text="Description" Margin="0,20,0,0" TextColor="{x:DynamicResource GrayColor}" Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2"></Label>
        <Label Text="OnePlus Nord CE2 Lite 5G. A little more that you had expect.OnePlus Nord CE2 Lite 5G.A little more that you had expect.OnePlus Nord CE2 Lite 5G." TextColor="{x:DynamicResource Primary}"
               Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="2"></Label>

        <Label Text="Choose Color" Margin="0,20,0,0" TextColor="{x:DynamicResource GrayColor}" Grid.Row="8" Grid.Column="0" ></Label>
        <Label Text="Light Sky" TextColor="{x:DynamicResource Primary}" Grid.Row="9" Grid.Column="0" Grid.ColumnSpan="2"></Label>

        <StackLayout Orientation="Horizontal" Spacing="5" VerticalOptions="Center" HorizontalOptions="End" Grid.Row="8" Grid.RowSpan="2" Grid.Column="1">
            <Label Text="{x:Static fontawesome:Solid.Check_Square}" FontFamily="FontAwesomeFreeSolid" VerticalOptions="Center" TextColor="#89E6DB" FontSize="28"></Label>
            <Label Text="{x:Static fontawesome:Solid.Square_Full}" FontFamily="FontAwesomeFreeSolid"  VerticalOptions="Center" TextColor="#F47876" FontSize="20"></Label>
            <Label Text="{x:Static fontawesome:Solid.Square_Full}" FontFamily="FontAwesomeFreeSolid" VerticalOptions="Center"  TextColor="#ECAD77" FontSize="20"></Label>
        </StackLayout>
        <Button Grid.Row="10" Grid.Column="0" CornerRadius="10" Text="Add to Card" VerticalOptions="End" BorderWidth="1" BorderColor="{x:DynamicResource Primary}" BackgroundColor="White" TextColor="{x:DynamicResource Primary}"></Button>
        <Button Grid.Row="10" Grid.Column="1" CornerRadius="10" Text="Buy Now"  VerticalOptions="End" BorderColor="{x:DynamicResource Primary}" BackgroundColor="{x:DynamicResource Primary}" TextColor="White"></Button>
    </Grid>
</ContentPage>
ViewProduct.xaml.cs
public partial class ViewProduct : ContentPage
{
	public ViewProduct()
	{
		try
		{
			InitializeComponent();
			cv.ItemsSource = new ProductModel().GetSimilarProducts();
		}
		catch(Exception ex) 
		{
		}
	}
}
I have added some property in ProductViewModel and add new method in productmodel class. If you have implement from previous blog please update as per below
public class ProductViewModel
{
    public ImageSource Img { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
    public decimal DiscountPrice { get; set; }
    public decimal Price { get; set; }
}
public List<ProductViewModel> GetSimilarProducts()
    {
        List<ProductViewModel> list = new List<ProductViewModel>
            {
                new ProductViewModel { Img = "https://www.bajajmall.in/content/dam/emistoremarketplace/index/05-06-23/3/mobile-clp/slider/MCLP_Slider_4_MOB_smartphones25347_PLP_B2B.jpg", Title = "Authentication" },
                new ProductViewModel { Img = "https://m.media-amazon.com/images/I/41mDAtPMDKL._SX300_SY300_QL70_FMwebp_.jpg", Title = "Bank" },
                new ProductViewModel { Img = "https://m.media-amazon.com/images/I/61eXvcm9zrL._SX522_.jpg", Title = "School" },
                new ProductViewModel { Img = "https://m.media-amazon.com/images/I/61pRq8L49ML._SX522_.jpg", Title = "Course" },
                new ProductViewModel { Img = "https://m.media-amazon.com/images/I/51KQSVWKhgL._SX522_.jpg", Title = "Course" },
                new ProductViewModel { Img = "https://m.media-amazon.com/images/I/61vDLLvBnJL._SX522_.jpg", Title = "Course" },
                new ProductViewModel { Img = "https://m.media-amazon.com/images/I/71kshdi72lL._SX522_.jpg", Title = "Course" },
            };
        return list;
    }
Also update below method
 public List<ProductViewModel> GetProducts()
    {
        List<ProductViewModel> list = new List<ProductViewModel>
            {
                new ProductViewModel { Img = "https://www.bajajmall.in/content/dam/emistoremarketplace/index/05-06-23/3/mobile-clp/slider/MCLP_Slider_4_MOB_smartphones25347_PLP_B2B.jpg", Description="This product is from best seller", DiscountPrice= 100, Title = "Mobiles",Price = 150 },
                new ProductViewModel { Img = "https://images.theconversation.com/files/45159/original/rptgtpxd-1396254731.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=754&fit=clip",Description="This product is from best seller", DiscountPrice= 100, Title = "Books",Price = 150 },
                new ProductViewModel { Img = "https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/2414313/2022/4/18/c08becf1-36fc-4c1f-a3c9-92542d3ef8221650284958075HERENOWMenRedBlackCheckedPureCottonCasualShirt1.jpg",Description="This product is from best seller", DiscountPrice= 100, Title = "Shirt",Price = 150 },
                new ProductViewModel { Img = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRvnXFwrk_PWtUpvJiRjp7fRFKDchw4AnG4KA", Title = "Fresh",Description="This product is from best seller", DiscountPrice= 100 ,Price = 150},
                new ProductViewModel { Img = "https://www.businessinsider.in/thumb/msid-81412331,width-640,resizemode-4/Master.jpg", Title = "Fashion",Description="This product is from best seller", DiscountPrice= 100 ,Price = 150},
                new ProductViewModel { Img = "https://upload.wikimedia.org/wikipedia/commons/0/08/LGwashingmachine.jpg", Title = "Appliance",Description="This product is from best seller", DiscountPrice= 100 ,Price = 150},
                new ProductViewModel { Img = "https://m.media-amazon.com/images/I/71AaH5W7c1L._SL1500_.jpg", Title = "Toys",Description="This product is from best seller", DiscountPrice= 100 ,Price = 150},
                new ProductViewModel { Img = "https://m.media-amazon.com/images/I/315vj6oj-FL.jpg", Title = "Electronics",Description="This product is from best seller", DiscountPrice= 100,Price = 150 },
            };
        return list;
    }
I hope this is helpful to you. please share your feedback in comment section. Thanks. 
-

Comments

Post a Comment

Popular posts from this blog

Push Notifications in .NET MAUI: A Comprehensive Guide

Image
Join our exclusive WhatsApp group for Xamarin and .NET MAUI developers to connect with experts, share insights, and get help with your projects. Whether you're a beginner or an experienced developer, this group is the perfect place to enhance your skills and collaborate with the community. What are Push Notifications? Push notifications are messages sent directly to a user's mobile device from a server, even when the app is not actively being used. They are a crucial part of mobile app development, enabling real-time communication with users. Notifications can inform users about new content, updates, reminders, or other important information, thus enhancing user engagement and retention. Watch video to understand code: Implementing Push Notifications in Android and iOS using .NET MAUI In this blog, we'll explore how to implement push notifications in a .NET MAUI application for both Android and iOS platforms. We'll start by setting up a Firebase ...
Read more

Push Notification using Firebase in xamarin form (Android and IOS)

Image
Push Notification using Firebase in xamarin form (Android and IOS) Watch video to understand the code: https://youtu.be/1Ixc_B86mDk Follow steps to create push notification in both project. Create Project in  https://console.firebase.google.com/ Create Project for push notification After Creating Project add app for both IOS and Android Project. Create app in project For Both IOS and Android project add Package name. Package name should be same as your package name in Xamarin Android and IOS Project. Click on Register App Download Google Service json. If you are in android app then download google-services.json else if you are in ios app then download "GoogleService-Info.plist" file Click Next then click Next then Click Continue to console button. We have created project in firebase console now we will continue coding in xamarin. In Android Project add Internet Permission. Right click on android project -> Click on property -> In left menu select "Androi...
Read more

Building User Authentication Interfaces in .NET MAUI: Login, Register, OTP Verification, and Forgot Password

Image
Building User Authentication Interfaces in .NET MAUI: Login, Register, OTP Verification, and Forgot Password  In this blog post, we will explore how to create user authentication interfaces using .NET MAUI (Multi-platform App UI), a framework for building cross-platform applications. We will focus on four essential screens: Login, Register, OTP Verification, and Forgot Password. By the end of this tutorial, you will have a solid foundation for creating secure and user-friendly authentication flows in your .NET MAUI applications. Prerequisites: To follow along with this tutorial, you should have a basic understanding of .NET MAUI and C#. You will also need the .NET MAUI development environment set up on your machine. Before starting with the UI first install nugget "CommunityToolkit.Maui" in your MAUI project. Then initialize in MauiProgram.cs file public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMau...
Read more