Moving layout for banners

When you want to use banner announcements, you might notice the published banner is over certain elements in your application. For example, you may have a navigation bar, which is fixed to the top side of the browser.

When the announcement is displayed, we try to move all elements down, but that is not easy to do with fixed elements (position: fixed). To fix this issue, you can use our JS API.

Use JS API

The fix is pretty straightforward. You must know all of the elements you want to move (typically in the top navbar). Then listen to the banner-spacing event. You will receive a number that you should use to move those elements.

Check the API overview first, before you start using our JS API.

New announcements

productFruits.api.announcementsV2.listen('banner-spacing', (spacingInfo) => {
	/*
		The spacingInfo variable contains two props:
		* desiredMargin - a number of pixels
		* place - will be "top" or "bottom" depending on the banner announcement display type
	*/
});

Legacy announcements

productFruits.api.announcements.listen('banner-spacing', (spacingInfo) => {
	// You will get the spacingInfo which holds the marginTop property
	// Move the fixed element(s) by marginTop
	
	const el = document.getElementById('navbar');
	el.style.top = spacingInfo.marginTop + 'px';
});