Sanjay Kumar
Oct 7, 2020
  2226
(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
Boosting Graph Query Performance with Stored Templates

Stored Templates offer a solution by pre-generating and storing translated queries. This bypasses the time-consuming translation process, leading t...

Jonas Bergqvist | Feb 27, 2025

Exploring Optimizely SaaS CMS – What’s New & How to Accelerate your Build

In my latest video, I take a fresh look at Optimizely SaaS CMS , covering some of the recent improvements aimed at enhancing the editor experience....

Minesh Shah (Netcel) | Feb 27, 2025

Adaptive Images with Optimizely CMP

Images from Optimizely CMP can now be seamlessly integrated into Optimizely CMS through Adaptive Images, with the all same features that web editor...

Ted | Feb 27, 2025 |

Using the 1996 text-based Browser 'Links' to optimize website accessibility

Use a text-based browser from the late 1990s to improve the accessibility of your modern Optimizely website!

Tomas Hensrud Gulla | Feb 25, 2025 |

Using the 1996 text-based Browser 'Links' to optimize website accessibility

Use a text-based browser from the late 1990s to improve the accessibility of your modern Optimizely website!

Tomas Hensrud Gulla | Feb 25, 2025 |

Convert media type in a migrationstep

I needed to convert the type for some media files. Suddenly webp files were sent to the CMS from an external system and webp was not added to the...

Jeroen Stemerdink | Feb 24, 2025 |