Enabling the Page Tree Component in the Commerce View

When it comes to building an interconnecting website that has both CMS and Commerce you end up with a lot of different pages and blocks. Within this setup you end up having pages that are PageData based and within the site tree as well as commerce nodes, product and variations that also act a pages.

If like us at Redweb designed your blocks and pages for maximum drag and drop support you may come across an issue when creating blocks with drag and drop support and link back to CMS pages when using within commerce. This is due to the fact the site tree is not shown in commerce.

In our case we also have our global configuration stored in the site tree ourside of the site context and needed to be able to drag these configurations in to blocks/pages expecting these types.

Our simplte solution was to re-enable the site view within the commerce context with the following

[Component]
    public class CustomPageTreeComponent : PageTreeComponent
    {
        public CustomPageTreeComponent()
        {
            PlugInAreas = new[]
            {
                "/episerver/cms/mainnavigation/defaultgroup",
                "/episerver/commerce/mainnavigation/defaultgroup"
            };
        }
    }

This will then add another tab to the commerce view for pages enabling full drag and drop support when in the context of commerce as below.

Simple but effective.