Recommendations: Integration Inside a Popup

Sometimes integrating our recommendation widgets inside of a popup can cause an issue, for example when the popup is animated and by default set to display: none and on a click set to display: block.

We could solve this like shown in the following example below:

@keyframes popup-tracking {
  from{
    opacity: 1;
  }
  to{
    opacity: 1;
  }
}

// popup status changes from not-active to active
div[pupup-status="active"]{
  animation: popup-tracking .1s linear;
}

/**
 * @module layouts/Recommendation/Slider
 */
import React from 'react';
// some more imports

// add this event listener
document.addEventListener('animationend', (e) => {
  if(e && e.animationName === 'popup-tracking') window.dispatchEvent(new Event('resize'));
});

// ... some code

export default compose(
  // some code
)(view);