Build Shopping Cart in Power apps

Loading

Requirement: Build a Shopping Cart in power apps

Create the Company Store App for that Setup The SharePoint List, “Company Store Products“. Add columns- Title: text field, Price: currency, Image: Image field. Now Create A Gallery Of Store Products, insert Text Input And Minus and Plus button Controls For Each Product. Track the Shopping Cart Product Quantities With a Collection(colCompanyOrder).Increase the Product Quantity In a Shopping Cart. Decrease the Product Quantity In a Shopping Cart. Create a Company Store Orders SharePoint List Save Items in the Shopping Cart to a SharePoint List.

TextInput- Default Property:LookUp(colCompanyOrder,ProductID = ThisItem.ID,Quantity)

OnChange Property: 
If(
    IsBlank(
        LookUp(
            colCompanyOrder,
            ProductID = ThisItem.ID
        )
    ),
    Collect(
        colCompanyOrder,
        {
            Title: ThisItem.Title,
            ProductID: ThisItem.ID,
            Quantity: Value(Self.Text),
            PricePer: ThisItem.Price
        }
    ),
    Value(Self.Text) > 0,
    Patch(
        colCompanyOrder,
        LookUp(
            colCompanyOrder,
            ProductID = ThisItem.ID
        ),
        {
            Title: ThisItem.Title,
            Quantity: Value(Self.Text),
            ProductID: ThisItem.ID
        }
    ),
    Remove(
        colCompanyOrder,
        LookUp(
            colCompanyOrder,
            ProductID = ThisItem.ID
        )
    )
)

Reset Property: locResetTextInput

Minus Button- OnSelect Property:
If(
    LookUp(
        colCompanyOrder,
        ProductID = ThisItem.ID,
        Quantity
    ) > 1,
    Patch(
        colCompanyOrder,
        LookUp(
            colCompanyOrder,
            ProductID = ThisItem.ID
        ),
        {
            ProductID: ThisItem.ID,
            Title: ThisItem.Title,
            Quantity: LookUp(
                colCompanyOrder,
                ProductID = ThisItem.ID,
                Quantity
            ) - 1
        }
    ),
    LookUp(
        colCompanyOrder,
        ProductID = ThisItem.ID,
        Quantity
    ) = 1,
    Remove(
        colCompanyOrder,
        LookUp(
            colCompanyOrder,
            ProductID = ThisItem.ID
        )
    )
);
Reset(TextInput1)

Add Button- OnSelect Property:
If(
    IsBlank(
        LookUp(
            colCompanyOrder,
            ThisItem.Number = ThisItem.ID
        )
    ),
    Collect(
        colCompanyOrder,
        {
            Title: ThisItem.Title,
            ProductID: ThisItem.ID,
            Quantity: 1,
            PricePer: ThisItem.Price
        }
    ),
    Patch(
        colCompanyOrder,
        LookUp(
            colCompanyOrder,
            ProductID = ThisItem.ID
        ),
        {
            Title: ThisItem.Title,
            ProductID: ThisItem.ID,
            Quantity: LookUp(
                colCompanyOrder,
                ProductID = ThisItem.ID,
                Quantity
            ) + 1
        }
    )
);
Reset(TextInput1)

Add Button to the screen Name it as Place order

OnSelect Property:
Patch(
    'Company Store orders',
    AddColumns(
        colCompanyOrder,
        "TotalPrice",
        Quantity * PricePer
    )
);
Notify(
    "Order was SuccessfullySubmitted",
    NotificationType.Success
);
Clear(colCompanyOrder);
UpdateContext({locResetTextInput: true});
UpdateContext({locResetTextInput: false});
Navigate(Screen2);

Now Add Another screen and it display the placed orders,add label to see the count of the orders placed by a person.

On Text Property: Sum(C,Value)

Leave a Reply

Your email address will not be published. Required fields are marked *