customizing orders_list with colors

Scott Godin · #1 09-30-2015, 09:55 AM

so I've added two customizations to the admin orders_list page using the following:

skins/custom_skin/admin/en/header/body.tpl

PHP Code:


		
			
{* vim: set ts=2 sw=2 sts=2 et: *}



{**

 * Page head

 *

 * @author    Qualiteam software Ltd <info@x-cart.com>

 * @copyright Copyright (c) 2011-2015 Qualiteam software Ltd <info@x-cart.com>. All rights reserved

 * @license   http://www.x-cart.com/license-agreement.html X-Cart 5 License Agreement

 * @link      http://www.x-cart.com/

 *}



<head>

  <list name="head" />

  <style IF="getTarget()=#order_list#" type="text/css">

    .items-list-table table.list tbody.lines tr.line 

        { background-color: inherit; }

    .items-list-table table.list tbody.lines tr.line td 

        { background-color: transparent; }

    .items-list-table table.list tbody.lines tr.line td.cell.shippingStatus 

        { background-color: white; }

  </style>

</head>

and skins/custom_skin/admin/en/body/footer.tpl

PHP Code:


		
			
{* vim: set ts=2 sw=2 sts=2 et: *}



{**

 * Main template

 *

 * @author    Qualiteam software Ltd <info@x-cart.com>

 * @copyright Copyright (c) 2011-2015 Qualiteam software Ltd <info@x-cart.com>. All rights reserved

 * @license   http://www.x-cart.com/license-agreement.html X-Cart 5 License Agreement

 * @link      http://www.x-cart.com/

 *}



<div id="footer">

  <div class="footer-cell left">

    <widget class="\XLite\View\PoweredBy" />

    <list name="admin.main.page.footer.left" />

  </div>

  <div class="footer-cell right">

    <list name="admin.main.page.footer.right" />

  </div>

</div>

  <script IF="getTarget()=#order_list#" type="text/javascript">

    jQuery.noConflict();



// this function from http://james.padolsey.com/javascript/monitoring-dom-properties/ 

    jQuery.fn.watch = function( id, fn ) {



      return this.each(function(){



          var self = this;



          var oldVal = self[id];

          jQuery(self).data(

              'watch_timer',

              setInterval(function(){

                if (self[id] !== oldVal) {

                fn.call(self, id, oldVal, self[id]);

                oldVal = self[id];

                }

                }, 100)

              );



          });



      return self;

    };



    jQuery.fn.unwatch = function( id ) {



      return this.each(function(){

          clearInterval( $(this).data('watch_timer') );

          });



    };



    jQuery(function ($) {



        /* ps - Payment Status */

        var psc = {

            1: ["ps-new", "#f2be1c"],

            2: ["ps-authorized", "#a163ba"],

            3: ["ps-partialpay", "#f8ea81"],

            4: ["ps-paid", "#0ba891"],

            5: ["ps-declined", "#bf1420"],

            6: ["ps-canceled", "#f2822f"],

            7: ["ps-refunded", "#e7717c"]

        };

        /* ss - Shipping Status */

        var ssc = {

            1: ["ss-new", "#7d16af"],

            2: ["ss-processing", "#7ecf8e"],

            3: ["ss-shipped", "#0ba891"],

            4: ["ss-delivered", "#1853b4"],

            5: ["ss-will-not-deliver", "#e7717c"],

            6: ["ss-returned", "#bf1420"],

            7: ["ss-hold", "#f2be1c"]

        };



        var $ps = $("table.list tbody td.cell.paymentStatus");

        var $ss = $("table.list tbody td.cell.shippingStatus");



        function colorize_status() {

          $ps.each(

              function () {

              var statuscode = $(this).find("select").val();

              //console.log(statuscode, psc[statuscode][0], psc[statuscode][1] );

              //console.log($(this).closest("tr") );

              $(this).closest("tr").addClass( psc[statuscode][0] ).css({ "background-color" : psc[statuscode][1] });

          });

          $ss.each(

              function () {

              var statuscode = $(this).find("select").val();

              //console.log(statuscode, ssc[statuscode][0], ssc[statuscode][1] );

              //console.log( $(this) );

              $(this).addClass( ssc[statuscode][0] ).css({ "background-color" : ssc[statuscode][1] });

          });

        };



        colorize_status();



        // this does not work. is this content not being reloaded via ajax? 

        //$(document).bind('ajaxComplete', function () { colorize_status(); } );



        // this works only when an individual dropdown is changed, and somehow does

        // not work when the 'reload the whole table' event fires on pagination or search. wat

        $('table.list').watch('innerHTML', function(propName, oldVal, newVal){

            colorize_status(); 

        });



    });

  </script>

I cannot for the life of me seem to be able to figure out how to get the colorizer to re-fire off after the reload once the user chooses a pagination option, or initiates a search

anyone know how I would be able to do so?

qualiteam · #2 10-01-2015, 05:21 AM

Hello Scott,

First of all, you should not inject CSS and JS code into HTML templates. You should use getCSSFiles() and getJSFiles() methods of widgets which require your code:
- http://kb.x-cart.com/display/XDD/Adding+CSS+and+JS+files
- http://kb.x-cart.com/display/XDD/Working+with+footer

As for making your JavaScript code being executed after a pager reload - there are two main ways of doing this:
- implementing your controller object extending the AController object (search for "AController" for examples that should look like "extend(ListsController, AController);")
- using "microhandlers" (search for "core.microhandlers.add" for examples).

Scott Godin · #3 10-01-2015, 08:19 AM

Quote:

First of all, you should not inject CSS and JS code into HTML templates. You should use getCSSFiles() and getJSFiles() methods of widgets which require your code:
- http://kb.x-cart.com/display/XDD/Add...S+and+JS+files
- http://kb.x-cart.com/display/XDD/Working+with+footer

As for making your JavaScript code being executed after a pager reload - there are two main ways of doing this:
- implementing your controller object extending the AController object (search for "AController" for examples that should look like "extend(ListsController, AController);")
- using "microhandlers" (search for "core.microhandlers.add" for examples).

Firstly, http://kb.x-cart.com/display/XDD/Working+with+footer is irrelevant -- I am not trying to change the footer. I had used the footer template in which to place my javascript solely because currently your system seems to load all the js files immediately after <body>, not either in immdiately before </body> as conventional wisdom suggests, nor immediately before the end of </head> so in order to get my script to run, I had to place it somewhere AFTER jquery loaded.

and it was done this way because when i inquired previously about adding code specifically and solely to orders_list page, I was told

Quote:

you can copy the default template "skins/admin/en/header/body.tpl" to "skins/custom_skin/admin/en/header/body.tpl", and add your custom code
<script IF="getTarget()=#order_list#">

</script>

...i.e. BEFORE jquery loads, the way you currently do things. oops.

jump back one list in the page to http://kb.x-cart.com/display/XDD/Adding+custom+JavaScript+code+to+the+page and you can see why I added js where and why I did.

regarding the rest of your message:
it looks as though skins/admin/en/items_list/model/table/controller.js is the one that handles the reload of the content on orders_list but that ALSO doesn't look specific to orders_list exclusively. I do not wish to affect any other tables within the system.

I was not thinking in terms of implementing additional MVC code in a module to extend this functionality when I could merely do this in the templating with an additional loop, or even more simply with a smattering of js to 'paint' the surfaces after the page content loads.

Except, you don't appear to be using AJAX to reload the page content on click of search or pagination, as I am not catching any ajaxComplete events.

I don't mind trying to do this as a module (though TBH it feels like overkill), but I would need to know more about what to attach to.

Since all I need to know is how to trigger it for pagination and search events, wouldn't that be the simpler answer, even if this is not currently the *best overall solution*, it's faster to implement for the client, no ? Seeing as I already have this partially working and we're already there, and all.

ITVV · #4 10-01-2015, 11:14 AM

A bit of an angry post it seems?

I'm *assuming*, from the way you write that you are are from the UK?

Perhaps the odd Please or Thanks could help the answers come in?

It's just that abruptness, anger and bad manners are my pet hates I'm afraid.

Sorry I cannot contribute a solution.

Kind regards

ITVV (From the UK)

Scott Godin · #5 10-01-2015, 11:56 AM

No not at all and you are reading way more emotion into my response than was there;

no anger at all, Simple matter-of-factness along with a touch of "this has already been going on behind the forum scenes in x-cart support (wherein one day passes between post and reply each time) and the answer I received here is in apparent contradiction to information I received both there and explicitly one page back from the knowledgebase article in the reply, so huh?" confusion.

please, let's keep to the facts here, and thank you for your time

Scott Godin · #6 10-02-2015, 08:01 AM

I was able to figure things out eventually, and it appears that jquery ajaxStop() fires at the appropriate time for me to add a call to recolorize the rows

Code:

        // recolorize table rows after an AJAX initiated content reload (pagination button was clicked, or search was initiated)
        $(document).ajaxStop( function () {
            colorize_status();
        });

But I had to move the following two variable declarations inside the function, so that they properly reflect the current state of the table at the time of the call

Code:

        function colorize_status() {
        var $ps = $("table.list tbody td.cell.paymentStatus");
        var $ss = $("table.list tbody td.cell.shippingStatus");

now I can factor out the lines that add a css-background-color and just leave the classes, and then spend some time customizing the CSS so that we can have useful foreground colors that don't clash visually with the respective backgrounds, for the rest of the table elements on the row

qualiteam · #7 10-05-2015, 05:54 AM

Hello Scott,

It is up to you how you implement the changes, however what I suggest is the proper way of coding changes that gives you the maximum compatibility with future versions of X-Cart 5.

The recommended way of adding your JavaScript files is creating a module and decorating the getJSFiles() method in the widget class that renders the block that your code will work with. I believe for orders it is the \XLite\View\ItemsList\Model\Order class.

As for making your code triggered after the page load and/or after an Ajax update of the widget: you should either write your own JS object "extended" from AController object, or use the "decorate()" function to extend functions of an existing JS object extended from AController, or use microhandlers. If the logic is simple, I would look into using microhandlers.

Using jQuery events may work (and will likely work), but there is no guarantee that it won't conflict with other modules (and with future versions of X-Cart 5).

Scott Godin · #8 10-05-2015, 08:22 AM

Quote:

Originally Posted by qualiteam

Hello Scott,

It is up to you how you implement the changes, however what I suggest is the proper way of coding changes that gives you the maximum compatibility with future versions of X-Cart 5.

The recommended way of adding your JavaScript files is creating a module and decorating the getJSFiles() method in the widget class that renders the block that your code will work with. I believe for orders it is the \XLite\View\ItemsList\Model\Order class.

It is not for orders in general; it is instead HIGHLY specific to the admin-side orders_list page exclusively. I suppose it could also be added to the dashboard so that the list of orders shown there can share the color scheme used at orders_list, and I would probably add that in when I get to the point that I'm ready for a module for this.

Quote:

As for making your code triggered after the page load and/or after an Ajax update of the widget: you should either {A} write your own JS object "extended" from AController object, or {B} use the "decorate()" function to extend functions of an existing JS object extended from AController, or {C} use microhandlers. If the logic is simple, I would look into using microhandlers.

If there were more extensive tutorials out there with regards to specifically these things, that went into greater detail for those of us who, while not familiar with these practices, can figure it out given enough detail...

That having been said, I do plan at some point down the road to make this into a module, that will allow the setting of colors for the rows, on the admin side, and will at that point use getJSFiles() and getCSSFiles() in the code therein. However it would take me twice as long to figure out how to do that at THIS point in time where I am still learning the internals, and that's not conducive to rapid prototyping this so as to resolve the client issue so we can move forward with the many other things that are part of a large work-order specification for modifications to the system that will be performed by the x-cart team.

Quote:

Using jQuery events may work (and will likely work), but there is no guarantee that it won't conflict with other modules (and with future versions of X-Cart 5).

The only thing the code I have written does, is wait til x-cart has done everything else it needs to and is _finished_, and then I go traipse thru the table and add classes based on the values of the two dropdowns.

The only potential conflict I can see here is if you rename the classes that the selectors in the script are based on, which will only necessitate my re-examining your code and determining a new selector. And if it 'breaks', the only thing that will occur is that the rows won't get colorized.

All THAT having been said, I am very interested in learning more about all three methods {A, B, C} that you mention above... where can I find out more about these in much greater detail? tutorials, walkthroughs, and the like? Don't think I don't appreciate your suggestions...I do. It's just that other aspects of this project have already gone on too long, and there's not enough time right now for me to learn how to do a new thing (or several new things) while the rest of the ongoing work holds up and waits for me to finish.

qualiteam · #9 10-05-2015, 10:29 PM

Quote:

Originally Posted by Scott Godin

It is not for orders in general; it is instead HIGHLY specific to the admin-side orders_list page exclusively. I suppose it could also be added to the dashboard so that the list of orders shown there can share the color scheme used at orders_list, and I would probably add that in when I get to the point that I'm ready for a module for this.

Will the \XLite\View\ItemsList\Model\Order\Admin\AAdmin class work?

Quote:

Originally Posted by Scott Godin

If there were more extensive tutorials out there with regards to specifically these things, that went into greater detail for those of us who, while not familiar with these practices, can figure it out given enough detail...
...
All THAT having been said, I am very interested in learning more about all three methods {A, B, C} that you mention above... where can I find out more about these in much greater detail? tutorials, walkthroughs, and the like? Don't think I don't appreciate your suggestions...I do. It's just that other aspects of this project have already gone on too long, and there's not enough time right now for me to learn how to do a new thing (or several new things) while the rest of the ongoing work holds up and waits for me to finish.

Unfortunately, there is no detailed documentation on the JavaScript part of the source code. You have to look through the existing code and use it as the example.

Quote:

Originally Posted by Scott Godin

The only thing the code I have written does, is wait til x-cart has done everything else it needs to and is _finished_, and then I go traipse thru the table and add classes based on the values of the two dropdowns.

I would look into using "microhandlers". Just make your JavaScript file loaded with getJSFiles() and put the logic into a function added as follows:

Code:

core.microhandlers.add(
  'YOUR-UNIQUE-MICROHANDLER-NAME',
  'jQUERY SELECTOR FOR THE ELEMENT THAT WILL TRIGGER THE FUNCTION',
  function () {
    // YOUR CODE GOES THERE
  }
);

For more complex cases you can use the AController object:

Code:

function YourControllerName(base) {
    this.callSupermethod('constructor', arguments);
    if (this.base && this.base.length) {
        // Your code to run when the controller object is initialized.
        // The "base" variable is the element that has triggered the initialization.
    }
}

// Extend it from the base AController object
extend(YourControllerName, AController);

YourControllerName.prototype.name = 'YourControllerName';
YourControllerName.prototype.findPattern = 'jQUERY SELECTOR TO TRIGGER THE CONTROLLER';

// other properties and methods that you can run from the constructor or somewhere else

// Add your object to the list of controllers that will be triggered after every page load / ajax refresh
core.autoload(YourControllerName);

If you need to replace a method of an existing controller object, you can use this:

Code:

decorate(
    'ParentControllerName',
    'controllerMethodBeingReplaced',
    function (argument1, argument2, ...)
    {
        // Do your custom logic...

        // Execute the original method from the parent object
        var result = arguments.callee.previousMethod.apply(this, arguments);

        // Do your custom logic...

        // Return the result
        return result;
    }
);

Scott Godin · #10 10-14-2015, 10:51 AM

Quote:

Originally Posted by qualiteam

As for making your JavaScript code being executed after a pager reload - there are two main ways of doing this:
- implementing your controller object extending the AController object (search for "AController" for examples that should look like "extend(ListsController, AController);")
- using "microhandlers" (search for "core.microhandlers.add" for examples).

interestingly, when I search for "core.microhandlers.add" the _only_ thing that comes up on google is this post.

searching the code will only get one so far, without more comprehensive explanatory documentation around the web.