Moving layout for banners

If you want to use a banner announcement, you might notice that the published banner covers certain elements in your application. For example, you might have a navigation bar fixed to the top of the browser.

When an 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 the 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 for 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';
});