Compatibility Fixes

Notifications

For notifications, it is necessary to know the height of the header on both desktop and mobile. Since all tenants will not have the same class names to query for the height, we have set a direct pixel value in the configuration below header. The type is a number:

Parameter	Description	Data Type	Possible Values
`desktopHeight`	height of the header on desktop in `px`	`number`	e.g. `152`
`mobileHeight`	height of the header on mobile devices in `px`	`number`	e.g. `73`

We discourage using this method of setting the header offset due to issues with fixed headers and scrolling. Instead, it is advised to inject the header-element directly into the web component.

You can find an example of the header size properties in JSON format below:

"header": {
  "desktopHeight": 152,
  "mobileHeight": 73
},

Iframe Authentication

There are several scenarios where some extra logic needs to be added due to the fact the authentication is done with an iframe.

Make password reset notification visible

This event listener needs to be added in the storefront to enable scrolling to the top of the page on mobile to make sure the success notification is visible after a password reset.

window.addEventListener("message", (e) => {
  if (e.data.type === "scroll") {
    window.scrollTo(e.data.options);
  }
});

Scroll to top on "Create an account" button from Guest authentication

In order to make the scrollIntoView feature to work for the embedded iframe version of the authentication, the following event listener needs to be added.

  window.addEventListener("message", (event) => {
    if (event.data.type === 'scrollToElement') {
      const elementId = event.data.elementId;
      const behavior = event.data.behavior;
      const block = event.data.block;

      const element = document.getElementById(elementId);

      if (element) {
        element.scrollIntoView({ block, behavior });
      }
    }
   });

Add custom font-family within iframe-auth

In order to show custom font-family in iframe auth:

The font-family should be set within config.styles variable.
The font-family should be used via css rule/value where it's needed.
Within overwrites.css you need to provide the font-face for that custom font-family.
Due to iframe-scope inheritance limitations, the font-face’s url CAN’T BE a relative path.
Checkout should get whitelisted wherever the font-family is located to avoid CORS issues.