How to Manage Website Redesign in AEM: Part Two

Share article

Website in AEM

In the previous article, we started to take a look at the first part of our journey into how to manage website redesign in AEM and prepared a Java model to handle version pickup. We’ll continue by demonstrating how to change an existing template.

Supporting V2 for Page-Rendering Component

Let’s have a look at the current “common” template initial config:

initial/.content.xml

It uses the “site-com/components/structure/common-page” component. We’ll create a new version of this component.

All the versionable components will be moved to a separate folder “versionable” under site-com.

So the whole common-page will be moved to “/apps/site-com/components/versionable/structure/common-page/v1/common-page”

Then v2 can be created “/apps/site-com/components/versionable/structure/common-page/v2/common-page”.

v1 basically stays the same, while in v2 we can use clientlib libraries for the v2 site version.

And now, we have to include a version-switching mechanism for “site-com/components/structure/common-page” (it will serve as a proxy component that inherits the v1 mechanism):

./content.xml

Now it’s a supertype of our v1. And common-page.html:

And, since we described this mechanism for the page rendering component, we can support versioning for any other component.

Defining a New OSGI Configuration

In DelegatingComponentModel.Config, the default values are provided. If we want to have a separate config, we’ll go ahead and create it. /conf/site-global/content/site/v2/_sling_configs/com.wcm.site.models.DelegatingComponentModel$Config:

When we want to change it for a specific page or section, we can define it in jrc:content by setting sling:configRef pointing to a proper config folder: Config folder

Setting Default Sling Configuration

We also have to set a sling config reference to all the sites root: AddConfigRefScript.java

AEM Dispatcher Configuration

As we want to be able to use site_version parameter (to override the current version) for testing purposes without caching, we’ll need to ignore this url param on dispatcher:

View as Redesigned Support

To have a new option to see as redesigned, we’ll overlay “wcm/core/content/editor” /apps/wcm/core/content/editor/.content.xml:

 

And, a new clientlib:

.content.xml

actions.js:

How to Manage a Website Redesign Project

That’s pretty much it!

We’ve shown you a few simple steps for redesigning your website when you want to keep the old version and use and test the new one in advance.

Stay tuned for our next articles – and don’t be shy – let us know if there’s anything else you’d like us to cover! We are here to help!

Author: Iryna Ason