Feb 19, 2016

Ketan Patel

Opencart Tutorial: Make the Actions Block Sticky in Admin Section

opencart sticky action block


This is a very basic Opencart tutorial for beginners explaining one current issue in admin section and its simple solution. Even though its very easy and basic tutorial but it will help you to save time and improve admin user interaction while performing various actions. So lets see what is the actual issue and what could be the better solution for that.



Current Problem


In admin section, the action block(add/save/delete) at top right corner is not sticky so after filling the form values or selecting the check boxes in the records listing page you have to manually scroll to top in order to perform the action(save/edit/delete) which is normal behavior and fine if we have small amount of records on the page or the height of the form being editing is small.



Possible Solutions


There can be two solution to overcome this behavior, and there are as below:

  1. We can add the "scroll to top" functionality by adding the separate js for the same which will add one arrow button at the bottom right corner, by pressing this button the page will auto scroll to top. At certain level this option is ok, but if we think in better way then its not a recommended solution as we have to add extra files (css, javascript, images) in order to add this functionality.
  2. We can make some changes in the style classes to make the action bar sticky so even if we are at the bottom of the page, we have the action bar sticked at its place!! ohh, nice and easy solution. don't you like it?






So obviously we would prefer easy and better option. To make the action block sticky we need to add some css class. Simply follow the instruction given in the below section.

Open this file: root/admin/view/stylesheet/stylesheet.css and add the below class at the end of file.

/*css for sticky action buttons in admin area START*/
.buttons, .page-header .pull-right{
    background: #FFF;
    border: 1px solid #DDD;
    border-radius: 7px;
    box-shadow: 0 3px 6px #999;
    margin: -1px 0 0 !important;
    padding: 6px;
    position: fixed;
    right: 30px;
    z-index: 9999;
}
/*css for sticky action buttons in admin area END*/


That's it!! You're done. Go to the admin section and open any of the listing/editing page and Clear the cache (press Ctrl+F5) and see the result. Now scroll down the page, edit the form or insert new record the action block always there for you sticked!! :)




This changes are tested in Opencart Versions: 2.0.1.1 , 2.0.3.1 


If you find this tutorial helpful then please do share in your social network and dont forget to provide your reply in the below comment box.

Ketan Patel

About Ketan Patel -

I have developed a wide range of websites using CorePHP, Opencart, CakePHP and CodeIgniter including sites for startup companies and small businesses. Apart from my blogging life, I like to read Novels, Listening music and Net surfing.

Subscribe to this Blog via Email :