[ HOTFIX ] Announcement Bar Positioning on Cart Page - Loft v1.4.9 - v1.4.10.1

Applies to Theme versions: 1.4.9 - 1.4.10.1

Note: A new version of Loft has been published to the theme store (version 1.4.10.2) which resolves this issue. You can resolve this issue simply by updating your theme to the latest version from the theme store here.

Bug: 

When the Announcement bar is enabled and you navigate to the cart page while on mobile, the Announcement bar isn't aligned with the top of the page but instead is overlapping the header navigation.

Reason:

The Announcement bar has redundant position scripts that are firing off when they shouldn't be unless specific conditions are met. 

Fix:

To fix this issue, we'll be modifying those scripts to correct the conditions being met:

1. Under "Online Store", navigate to the "Themes" page. 
2. On your Live theme (or the backup theme having the issue), click "Actions" and then "Edit Code" as seen in the screenshot attached:
3. On this page, find the "Assets" folder in the left hand theme file directory. Inside this folder, open up "theme.js.liquid".
4. Once the file opens up, click inside the code window and open the search menu by hitting Ctrl + F. You should see the native search popup in the top right. Copy and paste this into that search popup and hit enter:

   function docSpacing()

   

5. Note: the screenshot attached in step 4 shows the function we are looking for on line 5801 (through 5957). That may not be 100% the same for your theme if any modifications have occurred and depending on which version you are using. So to ensure you have the right function, look for this comment that shows up on the next line:

    // Init header height script

   See step 4 screenshot as an example of what you are looking for

6. Copy that entire function and replace it with the code from this Gist:
   
   
   Your highlighted selection should look like this
   Note: In case you can't access the Gist, we've attached a file with the same code to this article. 
   
   
7. Next we need to remove the "load" text from the "resize" event listener.
   So this time, search for this near line 5026

    $(window).on('load resize', function() { 

   For context, the next line should contain the code:

   $('.promo-bar').find('.message-revealed').removeClass('message-revealed')

8. Remove the word 'load' from the listener. So now it should look like this:
   
9. Once your finished with these modifications, confirm that the Announcement bar is working correctly on your cart page.

If you have any questions or need help making these changes to your theme, submit a support ticket to us and we'll help get you situated!

Thank you for reading and being apart of the Loft community!