Mapping Sitecore StoreFront to Habitat

As I’ve mentioned in a previous post, my team and I are working on Sitecore Commerce StoreFront migration to Sitecore Habitat.

Before we actually moved to code itself, we dug into codebases of both projects to review their “as-is” implementation and we decided to come up with a plan on how to go to map functionality to Habitat so that it would comply with the principles it suggests. And here is what we found out and came up with. Continue reading “Mapping Sitecore StoreFront to Habitat”

Mapping Sitecore StoreFront to Habitat

Why FXM should wait for your page to load

Context

Working with FXM, I faced a very interesting sporadic issue: every 10-15 times some of the components were not loading on a page. A response object was identical all the time, no errors in console, no changes in a site code since the last deployments. I think you get the situation.

However, this issue was able to cause a lot of troubles for a client as FXM was used on many legacy sites. So I continued digging…

Continue reading “Why FXM should wait for your page to load”

Why FXM should wait for your page to load

$(document).ready() for Sitecore FXM

CONTEXT

Federated Experience Manager (FXM) is a marketing tool from Sitecore, that allows you to use components defined in your WCM on other site and application. This is very useful if you ned to update multiple legacy applications or try some part of a new design on an existing site.

As most of other similar tools, Sitecore provides you with a JavaScript beacon that has to be included in a target site. It would call Sitecore and do all magic on the page related to an inclusion of HTML snippets into a page. Sounds easy, but what if you have really rich UI components or using front-end frameworks like jQuery or Angular. In this case, you need to make sure that you reinitialize embedded javascript correctly after FXM delivered all HTML to your page.

There should be something similar to $(document).ready()

Continue reading “$(document).ready() for Sitecore FXM”

$(document).ready() for Sitecore FXM

Require JS and CSS for a Sitecore components

Context

According to HTML best practices and guidelines we need to put styles in head (so that they would be applied to html immediately after rendering) and scripts in the end of body (so that they will not block your browser from downloading other content). On the other hand for Sitecore you need to create component, which could require some styles on specific scripts, and put them in a placeholder in the middle of the page.

This results in two common solutions: small scripts and style section spread all over the page, added in each component, or huge styles and scripts files containing all required content and added according to guidelines.

There should be a better way, lets see how it looks.

Continue reading “Require JS and CSS for a Sitecore components”

Require JS and CSS for a Sitecore components

Render wrapper around components in Experience Editor (aka Page Editor)

Context

When you working in Experience Editor (previously Page Editor) it is quite difficult to understand hierarchy of controls and their relation one to each other, moreover it is not always clear where your control ends and placeholder starts.
Why not to add some wrappers around controls? Lets see how we can do this.

Continue reading “Render wrapper around components in Experience Editor (aka Page Editor)”

Render wrapper around components in Experience Editor (aka Page Editor)