How to add a Notification bar in your store and admin panel in OpenCart 2.x
In this blog post we will demonstrate you how you can simply and quickly add a header notification to both your store-front and your administration panel in OpenCart 2.x.
In our previous tutorials we have suggested that modifying the core files is not advisable, which is why here we are going to concentrate only on the creation of an OCMOD file, which can be enabled and disabled at any time you want. Another cool thing about this simple modification is that you will be able to customize the notification depending on your own desire, need and imagination.
Create an OCMOD File
So let’s start with the creation of an empty text file using any text editor (the suggested options would be Notepad or Dreamweaver) and copying and pasting the following code:
<modification>
<name>Add Header Notification in the catalog and admin pages</name>
<version>1.0</version>
<link>https://isenselabs.com</link>
<author>iSenseLabs</author>
<code>isenselabs_header_notification</code>
<file path="admin/view/template/common/header.tpl">
<operation>
<search>
<![CDATA[<header id="header" class="navbar navbar-static-top">]]>
</search>
<add position="replace">
<![CDATA[
<div id="HeaderNotification" style=" background-color: #F54661; z-index:99999;font-size:22px; text-align:center; color:#fff; position:fixed;width:100%;height: 40px;line-height:40px;top:0px;">Header Notification in Your Admin Panel</div><header id="header" class="navbar navbar-static-top" style="margin-top:40px;">
]]>
</add>
</operation>
</file>
<file path="catalog/view/theme/*/template/common/header.tpl">
<operation>
<search>
<![CDATA[</head>]]>
</search>
<add position="after">
<![CDATA[
<div id="HeaderNotification" style=" background-color: #F54661; z-index:99999;font-size:22px; text-align:center; color:#fff; position:fixed;width:100%;height: 40px;line-height:40px;top:0px;">Header Notification in Your Store</div><header id="header" class="navbar navbar-static-top" style="margin-top:40px;">
]]>
</add>
</operation>
</file>
</modification>
After you have created the file, you will have to save it with the following name: namebyyourchoice.ocmod.xml. Please, keep in mind that the .ocmod.xml extension is compulsory if you want your file to be in the correct recognizable format.
Then, go to your OpenCart Store Administration Page => Extensions => Extension Installer and upload the file. After you get the Success Message go to Extensions => Modifications and click on the Refresh button in order to apply the new changes.
Customize your Notification
Now we are going to show you how you can customize the layout and the text in the notification. The code in the first snippet between the <file></file> tags applies the notification in the admin panel and the second one in the store-front. If you would like to put a notification bar only in either of the admin panel or the store-front, you can just delete the snippet than you do not need starting from the opening <file> tag and ending with the closing </file> tag. If we suppose that you would like to display a notification only in your store-front, your code should look like that:
<modification>
<name>Add Header Notification in the catalog and admin pages</name>
<version>1.0</version>
<link>https://isenselabs.com</link>
<author>iSenseLabs</author>
<code>isenselabs_header_notification</code>
<file path="catalog/view/theme/*/template/common/header.tpl">
<operation>
<search>
<![CDATA[</head>]]>
</search>
<add position="after">
<![CDATA[
<div id="HeaderNotification" style=" background-color: #F54661; z-index:99999;font-size:22px; text-align:center; color:#fff; position:fixed;width:100%;height: 40px;line-height:40px;top:0px;">Header Notification in Your Store</div><header id="header" class="navbar navbar-static-top" style="margin-top:40px;">
]]>
</add>
</operation>
</file>
</modification>
Now we are going to concentrate on the code itself and explain each statement in the following snippet:
<div id="HeaderNotification" style=" background-color: #F54661; z-index:99999;font-size:22px; text-align:center; color:#fff; position:fixed;width:100%;height:40px;line-height:40px;top:0px;">Header Notification in Your Store</div>
1. <div></div>: The <div> tags are the ones that are creating the container of the actual notification bar.
2. style=”” component applies the styles for this container:
- background-color : the background-color property sets the color of the notification bar, which is usually selected by either its hex color code (which is the case in our example #F54661) or its RGBA equivalent (which for our case would be rgba(245,70,97) ). There are plenty of websites with color codes in all formats which you can easily find in Google and use for reference, but I would suggest http://www.color-hex.com .For more information on background-color you can visit: http://www.w3schools.com/cssref/pr_background-color.asp
- z-index: specifies the stack order of the element. Elements with a greater z-index show on the top of elements with a smaller z-index. For more information check out http://www.w3schools.com/cssref/pr_pos_z-index.asp
- font-size: specifies the size of the letters that you are using in your notification. For further details you can check http://www.w3schools.com/cssref/pr_font_font-size.asp
- text-align: sets the alignment of the text within your container. The text can be either centered, justified, aligned to the left or to the right. For examples please refer to: http://www.w3schools.com/cssref/pr_text_text-align.asp
- color: the color property sets the color of the text in your notification bar. For more details you can refer to the background-color information.
- position: specifies the positioning of an element. In our case the ‘fixed’ is what keeps the notification bar always at the top of the window even when we scroll down. Further explanation for all of the positions you can find here: http://www.w3schools.com/cssref/pr_class_position.asp
- width & height: specify the width and the height of the notification bar. In our case the width is set to 100%, which allows the bar to stretch and be as wide as the screen. The height is set in pixels, which means that it will be the same regardless of the screen size. For more information check here: http://www.w3schools.com/css/css_dimension.asp
- line-height: specifies the line-height of the font. More information here: http://www.w3schools.com/cssref/pr_dim_line-height.asp
- top: the top property sets the top edge of an element. In our case it is set to 0 indicating that the notification bar will begin from the very top of the body. Here, you have to keep in mind that the position element is important with regard to how exactly the top property will be applied. For more information refer to: http://www.w3schools.com/cssref/pr_pos_top.asp
Some other properties that are not used in our example but can be implemented include font-family, font-weight, border, etc. For more details, examples and ideas, check out the following link: http://www.w3schools.com/cssref/
3. The last component in the div container is the text itself, in our case: Header Notification in Your Store, which you can easily replace with one by your choice.
Important: Note that in the admin panel, you have the following code: <header id="header" class="navbar navbar-static-top" style="margin-top:40px;"> . Here you have to set the margin-top equal to the height of the notification bar, because otherwise the notification bar might hide part of header in the admin panel screen.
The end result should be something similar to this one:
Please, keep in mind that most of the CSS properties are related to each other and some might affect others (as the previously mentioned case with position and top properties). If you happen to encounter anything like that or some unexpected behavior, please feel free to comment under the blog post.
We hope that you will find this tutorial helpful and that it will give you some insights and ideas on how create and customize your own notification bars.
