Loading...
Area: Episerver B2B Commerce

Add additional instructional text to checkout address page in Classic

Recommended reading 

Summary

With most widgets, you can add additional content zones to allow for CMS users to add content. One place that could benefit from additional content is the Checkout Address page. The walk-through below will add an additional content zone to the Checkout Address page using a custom widget template. This task requires the following customizations:

  • Create a custom CheckoutAddressView widget template and add a content zone
  • Configure the custom CheckoutAddressView widget template as the default template
  • Add content to the new zone using the CMS

Preconditions

  • Visual Studio and SDK installed
  • One or more products and categories configured (this is only required if you want to view the workflow on the Storefront)

Create a Custom CheckoutAddressView Widget Template

  1. In Visual Studio, find your theme project.
  2. In the ~\Views\Widgets\CheckoutAddressView directory, make a copy of the Standard.cshtml file and name it Custom.cshtml.
  3. Open Custom.cshtml.
  4. Find the <form id="addressForm"> tag.
  5. Right above that tag, insert a new content zone using the zone B2B DotLiquid tag. Give the zone the name "Instructional Text". B2B Cloud ships
     with several DotLiquid tags you can use in the template.
    [% zone 'Instructional Text' %] <form id="addressForm" name="addressForm" ng-show="vm.countries"> ... </form>

Right now, this custom widget template won't display anywhere on the Storefront. First, you need to set it as the default template for the CheckoutAddressView widget.

Configure the Custom CheckoutAddressView Widget Template as the Default Template

  1. In your theme project, find the theme.json configuration file.
  2. In the Widgets property, add a property named "CheckoutAddressView" and set the value to "Custom". This will register your custom CheckoutAddressView widget template as the default template anywhere the CheckoutAddressView widget is used on the Storefront.
    "Widgets": {
        // override the default template used for a widget. Standard will be used unless one is specified here.
        // This will make a view that lives at ~/Themes/MyTheme/Views/Widgets/HeaderView/MyCustomView.cshtml be set as the default
        "CheckoutAddressView": "Custom"
    }
  3. Build your solution.

Now your content zone should be displaying on the Checkout Address page. You can add content to the zone using the CMS.

Add Content to the New Zone Using the CMS

The Checkout Address page is located at Home > Cart > Addresses in the CMS Content Tree. You can log into the CMS and add content to the widget. Once you have added content, you can run through the checkout process until you reach the Checkout Address page. There, you will see your new content. Below is an example of what you might add for content on the page.

 

Do you find this information helpful? Please log in to provide feedback.

Last updated: Dec 11, 2020

Recommended reading