Fix Announcement Bar Functionality 📢

[anishdalvi]

Objective

• Enhancement

User Story

As a user, I want the announcement bar in our theme to function correctly, allowing me to easily navigate between announcements using the next and previous buttons. Additionally, I would appreciate it if the announcements could automatically slide after a certain interval, providing a smoother user experience.

Background/Context

Currently, the announcement bar functionality in our theme is incomplete, with the next and previous buttons not working as expected. Users are unable to navigate between announcements manually, diminishing the usability of this feature. To improve user interaction and engagement, we aim to fix the announcement bar functionality and introduce a slide feature that automatically transitions between announcements.

• Current announcement bar:

User Role

• Customer

Acceptance Criteria

1. The next and previous buttons in the announcement bar should be functional, allowing users to navigate between announcements one at a time.
2. When clicking the next button, the announcement text should smoothly transition to the next announcement, if available. Similarly, clicking the previous button should transition to the previous announcement.
3. If there are multiple announcements, users should be able to cycle through them continuously, with the announcement text looping back to the first announcement after reaching the last one.
4. An option should be provided in the theme settings to enable or disable the automatic slide feature for the announcement bar.
5. If the automatic slide feature is enabled, the announcement text should automatically transition to the next announcement after a specified interval, providing a seamless user experience.
6. The interval for automatic sliding should be customizable in the theme settings, allowing users to adjust the speed of the slide feature according to their preferences. (this option is already added)

Technical Details (If Known)

• JavaScript will be used to implement the functionality for navigating between announcements and controlling the automatic slide feature.
• CSS may be utilized to enhance the visual appearance and transition effects of the announcement bar.

Estimated Effort

• Medium to High

References

• Expected Output:

demo-announcement.bar.mp4

• Dawn Theme

• Dawn Theme's Announcement Bar Section

Additional Notes/Considerations

• The functionality of the announcement bar should be consistent across different devices and screen sizes to ensure a seamless user experience.
• Testing should be conducted to verify the proper functioning of the next and previous buttons, as well as the automatic slide feature, under various scenarios and conditions.

Issue Creator Details

Developer Intern
Experience Level with Project: Intermediate

[deardigital-evaluation]

Thanks for opening this issue @anishdalvi :)

[kmalap05]

/attempt

[deardigital-evaluation]

@kmalap05 has requested to attempt this issue #266. Here are their stats:

📇 Username	💯 XP	⭐RP	🥇 Badges
kmalap05	74	59	🧪[Beta Tester]

This message was generated automatically. Please check the contribution guidelines for more details.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days. If this issue is still relevant or you are working on it, please comment to keep it active. Your input is valuable, and we want to ensure it's addressed!

[deardigital-evaluation]

@kmalap05 has successfully contributed to this issue #266. Here are their updated stats:

📇 Username	💯 XP	⭐RP	🥇 Badges
kmalap05	80	65	🧪[Beta Tester]

This message was generated automatically. Please check the contribution guidelines for more details.