Creating a Sticky Actions Block in Opencart Admin: A How-To Guide

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 actions(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

 

Ketan Patel

As a backend and ecommerce developer, I have extensive experience in implementing robust and scalable solutions for ecommerce websites and applications. I have a deep understanding of server-side technologies and have worked with various programming languages. I have experience in integrating with payment gateways, and other third-party services.