Sanjay Kumar
Oct 7, 2020
  1336
(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
Implementing EmbeddedLocalization in Optimizely CMS 12

My previous post on translation (Translating Optimizely CMS 12 UI components) gives an overview of how to implement the FileXmlLocalizationProvider...

Eric Herlitz | Jan 27, 2023 | Syndicated blog

Breaking changes in EPiServer.CMS.TinyMce 4.0.0

After upgrading to the latest version of EPiServer.CMS.TinyMce, the dropdown with formats disappears. Learn how to get it back!

Tomas Hensrud Gulla | Jan 27, 2023 | Syndicated blog

Translating Optimizely CMS 12 UI components

Optimizely CMS 12 have been out for a while now, but still some elements haven't been properly translated resulting in a GUI defaulting to english....

Eric Herlitz | Jan 26, 2023 | Syndicated blog

Image preview in Optimizely CMS12 all properties view

With these simple steps, you can now see an Image and its Metadata, including size and dimensions, when editing an Image property in Optimizely...

Tomas Hensrud Gulla | Jan 26, 2023 | Syndicated blog