Magento 2 Notification Bar

Magento 2 Notification Bar extension enables an attractive bar to notify the visitors about deals, promotional offers, announcements, news, etc. without annoying them.

 

Table of Content

  1. Extension Installation
  2. Configuration
  3. Manage Notification Bars
  4. Notification Bars in Frontend

 

  1. Extension Installation
  • For Magento Marketplace Customers
  • Find the Composer name and version of the extension in the extension’s composer.json file.
    • Login to your SSH and run:
      • composer require meetanshi/magento-2-notification-bar
    • Enter your authentication keys. Your public key is your username; your private key is your password.
    • Wait for Composer to finish updating your project dependencies and make sure there aren’t any errors.
    • To verify that the extension installed properly, run the command:
      • php bin/magento module:status Meetanshi_PromotionBar
    • By default, the extension is probably disabled.
    • Enable the extension and clear static view files:
      • php bin/magento module:enable Meetanshi_PromotionBar --clear-static-content
      • php bin/magento setup:upgrade
      • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
      • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
      • php bin/magento cache:flush

 

  • For Meetanshi Customers
    • Extract the zip folder and upload our extension to the root of your Magento 2 directory via FTP.
    • Login to your SSH and run below commands step by step:
      • php bin/magento setup:upgrade
      • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
      • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
      • php bin/magento cache:flush

 

  1. Configuration
    To configure the extension, login to Magento backend, move to Stores à Configuration à Meetanshi à Notification Bar where you can find various settings to configure the extension.
  • Notification Bar: Enable the Notification Bar extension from here.
  • Show Notification Bar Close Button: Enable the close button to allow users close the notification bar.
  • Enable Multiple Notification Bars: Set YES to enable and display multiple notification bars in the frontend.
  • Display Type: Select one of the display types for the multiple notification bars.
    • Separate: Shows each notification bar separately.
    • Slider: Shows each notification bar one by one in the slider.
      • Enable Slide Control:  Select YES to enable next-previous navigation buttons in the slider.
      • Enable Slider Navigation Bullets: Set YES to show navigation bullets in the slider.
      • Slide Duration (in seconds): Enter seconds for which every notification will keep showing before switching to the next notification.
      • Autoclose Slider After (in seconds): Enter seconds after which you want to close the slider automatically. Enter 0 to disable slider auto close.

 

  1. Manage Notification Bars
    After the extension is configured, move to Marketing > Manage Notification Bars. All the already created and saved notification bars are listed here with the details like name, status, content, priority, start date, end date, store views to which the notification bar is assigned, customer groups for which the notification bar is displayed and edit action. The admin can filter the notification bar and export the notification bar details in CSV or XML format. Also, the admin can perform mass actions like enable, disable or delete after multi selecting the notification bars. The admin clicks “Create New Notification Bar” to create new one.

  • On click of “Create New Notification Bar” button, the admin can see various general settings to configure.
    • Enable: Enable the notification bar from here.
    • Name: Enter the name of the notification bar.
    • Store Views: Select the store views for which you want to enable the notification bar.
    • Customer Groups: Select the customer groups to which you want to display the notification bar.
    • Start Date: Set the start date from which you want to start displaying the notification bar.
    • End Date: Enter the end date until which you want to display the notification bar.
    • Priority: Set the priority of the notification bar for the display preference in case of multiple notification bars are enabled.

 

  • After configuring the general settings, click on “Display Setting” tab to configure the notification bar display settings.
    • Select Pages: Select pages on which you want to display the notification bar.
    • Exclude Categories: Enter category IDs on page of which you want to exclude from showing the notification bar.
    • Exclude Products: Enter the product IDs on page of which you want to exclude from showing the notification bar.
    • Position of Notification Bar: Set the notification bar position on the frontend pages.
      • Top of Page: Shows notification bar on top of the page.
      • Above Menu: Shows notification bar above the menu.
      • Under Menu: Shows notification bar below the menu.
      • Above Page Content: Shows notification bar above the page content.
      • Under Page Content: Shows notification bar below the page content.




 

  • After configuring the display settings, click on “Content and Design” tab to configure the notification bar content and design related settings.
    • Content: Add the content along with the design to show in the notification bar.
    • Background Color: Set the background color of the notification bar.
    • Height (in pixels): Enter the height of the notification bar in pixels.
    • Preview Template: Shows the preview of the notification bar automatically.

 

After all the settings are configured, click on “Save Notification Bar” to save the notification bar.

 

  1. Notification Bars in Frontend
    After the extension is configured and notification bar is enabled, they are shown in the frontend with the various places as set from the backend.