September 26, 2017 by Una Verhoeven

Sitecore Experience Accelerator (SXA) – Fix sxa-ce-exported class during an import

While working with Creative Exchange in SXA 1.4 (during the import of the zip package) we noticed while running the TDS Classic sync that all our pages had changes. This was surprising; a majority of them were not affected by our front-end developer. While comparing the Sitecore version to the project version we saw that all our pages, in particular Body CSS Class fields, were impacted. All fields had the same CSS class value: sxa-ce-exported

SXA ce exported class

While exporting the site, SXA attaches some system classes to the pages. The problem here is that some of those classes are not removed during the import.

If you were to decompile the processor, the one in charge for this is PageDecoration in the Creative Exchange pipeline. This class has a method called FilterSystemClasses which iterates through SystemClasses array and removes everything from the given array during the import. This implies that everything that should not be imported must be referenced in SystemClasses variable.

If you change the SystemClasses array to include the additional system CSS classes that are causing problems, this would solve the issue. In our case the array was expanded to include the constant value sxa-ce-exported.

The original definition of string array:

protected string[] SystemClasses = new string[7]
    {
      "on-page-editor",
      "preview",
      "default-device",
      "wireframe-images",
      "sc82",
      "sc81",
      "add-your-css-classes-here"
    };

 

Modified definition:

protected string[] SystemClasses = new string[8]
    {
      "on-page-editor",
      "preview",
      "default-device",
      "wireframe-images",
      "sc82",
      "sc81",
      "add-your-css-classes-here",
      Sitecore.XA.Feature.CreativeExchange.Constants.CreativeExchangeExportedClass
    };

 

The above code fixes the problem, but you need to incorporate it into your solution. There are a few options, such as, re-creating the functionality of the existing class with the updated array or inheriting from the existing class and injecting the changes you need into the array before the processor is called. Whichever option you may choose, you will need to modify the config

Sitecore.XA.Feature.CreativeExchange.config

In the ceImport.importPageProcessing node, find the

<processor type="Sitecore.XA.Feature.CreativeExchange.Pipelines.Import.PageProcessing.PageDecoration, Sitecore.XA.Feature.CreativeExchange" />

And replace/patch it with your changed processor. This way you will make sure not to get system CSS class imported again, but you will need to remove it on the affected page fields in Sitecore, preferably by SPE script in case you have many pages.

To learn more about how Hedgehog used SXA to create our entire site and augmented it to meet editor needs, check out our webinar. 

Keep in Touch and Stay Informed

Get updates, industry reports, white papers and more Hedgehog love.