🔧 Maintenance Alert: World will be on Read-Only Mode on February 18th, 10:00 PM – 11:00 PM EST / 7:00 PM – 8:00 PM PST / 4:00 AM – 5:00 AM CET (Feb 19). Browsing available, but log-ins and submissions will be disabled.

Sanjay Kumar
Oct 7, 2020
  2213
(7 votes)

Customize order management in commerce manager

The purpose of the blog to customize the order management UI in the commerce manager and handle out-of-box functionality. 

In this blog I am going to cover two scenarios:

  1. Display the Customer Name into the Customer Information section from the shipping address (First Name + Last Name) if the order placed by an anonymous/guest user.
  2. Add a complete order button within the order summary section and trigger the button event.

        

The customization is based on the QuickSilver solution but you can try the recommended file and code changes in your solution.

So, Let’s get start coding fun 😊

- Display the Customer Name into the Customer Information section from the shipping address (First Name + Last Name) if the order placed by an anonymous/guest user.

  • Goto the EPiServer.Reference.Commerce.Manager site and expand the all folder as above screen and visit the folder.

       Folder Path: ..\EPiServer.Reference.Commerce.Manager\Apps\Order\CustomPrimitives

  • Include the OrderCustomer.ascx and add a new class with the same name e.g. ‘OrderCustomer.cs’.

  • Open OrderCustomer.ascx and copy the highlighted Inherits tag value (Mediachase.Commerce.Manager.Apps.Order.CustomPrimitives.OrderCustomer)and create the OrderCustomer.cs class and derived from the inherits value.
  • Override the OnPreRender(EventArgs e) method and fetch the purchase order shipping address detail using the order helper class
    using System;
    using EPiServer.Commerce.Order;
    using Mediachase.Commerce.Manager.Apps_Code.Order;
    
    namespace EPiServer.Reference.Commerce.Manager.Apps.Order.CustomPrimitives
    {
        public class OrderCustomer : Mediachase.Commerce.Manager.Apps.Order.CustomPrimitives.OrderCustomer
        {
            protected override void OnPreRender(EventArgs e)
            {
                base.OnPreRender(e);
                if (string.IsNullOrEmpty(this.lblCustomerName.Text))
                {
                    var purchaseOrder = this.OrderGroupId > 0
                        ? OrderHelper.GetPurchaseOrderById(this.OrderGroupId)
                        : null;
    
                    var address = purchaseOrder?.GetFirstShipment()?.ShippingAddress;
                    if (address != null)
                    {
                        this.lblCustomerName.Text = $@"{address.FirstName} {address.LastName}";
                    }
                }
            }
        }
    }
    ​
  • And in the last re-place the Inherits attribute value from your created class including full qualified namespace + class name. 

Result (1): Now refresh the purchase order and see the changes.

- Add a complete order button within the order summary section and trigger the button event:

  • Goto the EPiServer.Reference.Commerce.Manager site and expand all folder and open the folder.\

        Folder path: …\EPiServer.Reference.Commerce.Manager\Apps\Order\Config\View\Forms.

  • Include the PurchaseOrder-ObjectView.xml in your solution, If you notice in this file you will find numbers are buttons are already added and display in the order summary section, so similarly add a new button with the command name ‘btn_CompleteOrderBtn’ and permissions.

Create the CompletePurchaseOrderHandler class and inherit it from the TransactionCommandHandler and override the DoCommand method.

You can choose a transaction command handler on basis of the requirements e.g. purchase order, payment plan, and return form handler, etc...

  • Commerce.Manager.Order.CommandHandlers.PurchaseOrderHandlers
  • Commerce.Manager.Order.CommandHandlers.PaymentPlanHandlers
  • Commerce.Manager.Order.CommandHandlers.ReturnFormHandlers

And also enable or disable the button on basis of requirement in the given example the IsCommandEnable method enables the button if the order status is InProgress.

namespace EPiServer.Reference.Commerce.Manager.Features.Orders.OrderProcessing.Handlers
{
    public class CompletePurchaseOrderHandler: TransactionCommandHandler
    {
        protected override void DoCommand(IOrderGroup order, CommandParameters commandParameters)
        {
            order.OrderStatus = OrderStatus.Completed;
            var purchaseOrder = order as IPurchaseOrder;

            var shipments = purchaseOrder.GetFirstForm()?.Shipments?.ToList();
            
            if (shipments != null)
            {
                this.ShipmentProcessor.CompleteShipment(purchaseOrder, shipments);
            }

            this.SavePurchaseOrderChanges(purchaseOrder);
        }

        protected override bool IsCommandEnable(IOrderGroup order, CommandParameters cp)
        {
            // Enable button if 
            return order.OrderStatus.Equals(OrderStatus.InProgress) ;
        }
    }
}
  • Register the newly created button into the commands and add a handler and confirmation text that will ask for the confirmation before performing the action.

Result (2): Now build your solution and visit in the commerce area and refresh the purchase order screen, you will see a new button with the name ‘Complete Order’ and when the user clicks on the button then the order will be mark as complete.

Enjoy the coding and share your thoughts 😊

Oct 07, 2020

Comments

Please login to comment.
Latest blogs
The missing globe can finally be installed as a nuget package!

Do you feel like you're dying a little bit every time you need to click "Options" and then "View on Website"? Do you also miss the old "Globe" in...

Tomas Hensrud Gulla | Feb 14, 2025 | Syndicated blog

Cloudflare Edge Logs

Optimizely is introducing the ability to access Cloudflare's edge logs, which gives access to some information previously unavailable except throug...

Bob Davidson | Feb 14, 2025 | Syndicated blog

Comerce Connect calatog caching settings

A critical aspect of Commerce Connect is the caching mechanism for the product catalog, which enhances performance by reducing database load and...

K Khan | Feb 14, 2025

CMP DAM asset sync to Optimizely Graph self service

The CMP DAM integration in CMS introduced support for querying Optimizly Graph (EPiServer.Cms.WelcomeIntegration.Graph 2.0.0) for metadata such as...

Robert Svallin | Feb 13, 2025