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:

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

json

Copy

"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.

javascript

Copy

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.

javascript

Copy

  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:

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