Browse Banners’ Animation Bug in Category Pages Phase 2

[juanmriosv]

Reported by: Chuck

Issue: All browse banners are displaying after a second and a half, with an animation sliding from left to right. We would like it to be almost instantaneous (or no animation)

Examples: https://www.c21stores.com/categories/women-coats https://www.c21stores.com/categories/men-coats-jackets

[juanmriosv]

This is second Phase of: https://github.com/Century21Stores/GLOBAL/issues/98

[juanmriosv]

There are 4 Types of Browse Banners:

Regular Banner: https://www.c21stores.com/categories/men-active GWP Banner: https://www.c21stores.com/categories/women-tights-socks Multiple CTA Banner (reg Size CTA): https://www.c21stores.com/categories/women-dresses Multiple CTA Banner (Large Size CTA): https://www.c21stores.com/categories/women-coats

Why this is happening?

This is not a bug but a consequence of the Multiple CTA for Browse Banners push. In order for the multiple CTA to work with the front end script, all banners were hidden until the script ends creating and positioning all the required CTA. Same Logic it is used in the Hero Content Block.

If this was not done, the script working on the CTA will be visible.

Solution: We decrease the speed the Banners has to wait till the CTA are created. Except in the Multiple CTA Banner (Large Size CTA) type. This is due to the number of characters of the CTA being larger than normal. Script has to wait a bit longer for this to happen

[juanmriosv]

For the Multiple CTA Banner (Large Size CTA) type Only

CSS Category level: .banner-content-block .content-block-content__action a{ max-width: 35%; } .banner-content-block .content-block-content{ display:none; width:57% !important; }

JS Category Level: setTimeout(function() { $('.banner-content-block .content-block-content').show(100); }, 100);