Tailor Order Pages

Learning Objectives

After completing this unit, you’ll be able to:

• Analyze advanced order pages with order items.
  
• Customize the Add Item page to make product searching easy.
  
• Tailor the Order Items page for better order item selection and order placement.
  
• Explain how to make free samples available with an advanced order.
  

Customize Order Items

In the previous unit, you learned how to use Online Order Extensibility to customize the Order Page Header and Order Details. In so doing, Fatima, the Salesforce admin at Alpine Group, improved the order-capture process and store-manager experience at NTO.

In this unit, you shift your focus to order items, exploring how to tailor advanced order pages like Add Item, Order Items, and Free Items to meet different goals.

Join Fatima again as she uses the extensibility features in Salesforce Consumer Goods (CG) Cloud to make NTO’s advanced orders more relevant and easy to use.

Customize the Add Item Page

The Add Item page is where you find and add products to an order.

This page lists all items available in the product catalog and provides an Advanced Product Search feature. With filters, including Description, Consumer Goods Product Code, Category, and Brand, users can quickly find and add relevant products to their orders.

During her collaboration with NTO store managers, Fatima learns that the Brand filter is rarely used because all available products belong to the same brand. Instead, store managers rely on other filters like Description, Category, and Type to locate items. So continuing her quest to deliver a quick and smooth order-capture experience, Fatima removes the Brand filter from the Advanced Product Search.

Follow along in your Developer Edition org for practice.

1. From the Field Sales Execution app, Advanced Orders tab, open order O-00141.
   
2. In the Order Page Header, click Standard to open the order template.
   
3. Scroll to the Custom JSON for Add Items section and click .
   
4. Locate the JSON entry for the Brand filter:
   

{"fieldApiName":"Criterion_3_Product__r.Name","order":"6","objectApiName":"Product2","isFilter":true,"isColumn":true,"sortable":true,"isPickList":true}

5. Change the isFilter attribute from trueto false to remove the Brand filter.
   

6. Save your changes to the template.
   
7. Return to the O-00141 order record, and refresh the page.
   
8. In the Order Items tab, click + Add Item.
   
9. Expand the Advanced Product Search section, and confirm that the Brand filter is gone.
   

And there you have it. By removing the Brand filter, Fatima simplifies the UI and improves the search experience for NTO store managers. With the template updated, all new and pending advanced orders based on this template have the same filter options.

Customize the Order Items Tab

Order items are the standard products, or components, that form the building blocks of an order. Retail stores order these products from manufacturers, including free samples.

The Order Items tab has a structured, grid-based layout with two sections:

• All Items: Displays the full catalog of products available for ordering.
  
• Basket: Works as a virtual shopping cart where selected items are stored for review and checkout.
  

While reviewing the Order Items tab, Fatima sees an opportunity to improve it. The grid currently includes a column for Consumer Goods Product Code, but it’s really not relevant to NTO’s workflow. Instead, store managers rely on the Consumer Goods External Product ID, a unique identifier from their Enterprise Resource Planning (ERP) system.

To improve the Order Items tab, Fatima replaces the Product Code column with the External Product ID column, so that the grid displays only the most relevant data.

When tailoring the Order Items grid, ensure consistency across advanced order pages by updating the Add Item template as well. Make sure you update the underlying JSON code for Add Items before making changes to the grid on the Order Items page.

Here’s how Fatima customizes the Order Items grid for NTO store managers. Follow along in your own org.

1. From the App Launcher, open the Field Sales Execution app, and show the Advanced Orders tab.
   
2. Open order record O-00141.
   
3. Open the Standard order template template.
   
4. Scroll to the Custom JSON for Add Items section and click .
   
5. Locate the JSON entry for the Consumer Goods Product Code:
   

6. Replace the entire line with the following JSON code for External Product ID:
   

{"fieldApiName":"Consumer_Goods_External_Product_Id__c","order":"2","isFilter":true,"objectApiName":"Product2","sortable":true,"isColumn":true},

7. In the Custom JSON for Order Items section, find the JSON entry for Consumer Goods Product Code.
   

8. Replace the product name from Product__r.Consumer_Goods_Product_Code__c with the JSON for External Product ID:
   Product__r.Consumer_Goods_External_Product_Id__c
9. Save your work.
   
10. Open the O-00141 advanced order record, and refresh the page, and show the Add products page.
    
11. In the All Items tab, confirm that the Consumer Goods External Product ID column is present and the Product Code column is gone.
    

TIP: To see the column headers, you may need to hover over them with your mouse pointer or adjust reduce your screen magnification.

By replacing the Product Code column with the External Product ID column, Fatima aligned the grid with NTO’s ERP system, making it easier for store managers to identify and manage products.

You can also reorder the columns, mark some as mandatory, and make columns non-editable. For guidance, refer to the Resources section at the end of the unit.

Free Items Page

Offering free samples is a great way to engage customers and boost sales. By trying new products firsthand, customers are more inclined to buy. Plus, free samples can strengthen customer loyalty.

In CG Cloud, sales managers can define promotional strategies for specific products. One way is to present customers with free samples when their order is eligible.

If free items are configured, a Free Items button appears on the Order Items tab, which allows users to access the Free Items page. Please note, your Developer Edition org doesn’t have the Free Items button. Just know that you can set it up if needed.

Here’s a Free Items page that Fatima has configured.

Thanks to Online Order Extensibility, you can customize the Free Items page, including modifying the layout, as with other order pages.

Important: Penny Perfect Pricing and Tenant Pairing Configurations

• To calculate orders accurately and make any free items available, you have to Set Up Consumer Goods Cloud Processing Services in your org. Also, the pricing conditions associated with penny perfect pricing will work in your org only with these required configurations.
  

• These settings are not required for the JSON-based customizations discussed in this unit.
  

Fatima’s customizations across advanced order pages show the power of Online Order Extensibility in CG Cloud. By tailoring these pages, she streamlines workflows, enhances usability, and aligns the system with NTO’s specific needs. To boot, store managers welcome their refined control over the ordering process.

In this unit, you explored advanced order pages and customization options, from refining product searches to integrating free sample promotions.

Next up, go beyond JSON-based customizations to explore how business logic and Lightning Web Components (LWC) can make advanced order pages even better.

Resources

• Salesforce Help: Set Up Consumer Goods Cloud Processing Services