Responsive tables for Commerce Cart & Checkout

Making responsives table using ngResponsiveTable jquery script for Drupal Commerce cart & checkout pages.

1. We got next nice Bootstrap themed cart or checkout table:

 

2. In mobile we'll got next image:

Not so bad (table was wrapped by table-responsive class), but not so useful, since I need swipe left-right by finger for viewing other details, instead of continuously swiping down.

3. So we remake our tables to responsive tables by next steps:

3.1. Download ngResponsiveTables and extract to YOURTHEME_folder/js/ngtables/

3.2. Add next code to your template.php (or add inner code to if exists in hook_preprocess_page function):

/**
 * Override or insert variables into the page templates.
 */
function YOURTHEME_preprocess_page(&$vars, $hook) {
  $arg = arg();
  // ...
  if (($arg[0] == 'cart') || ($arg[0] == 'checkout')) {
    drupal_add_js(drupal_get_path('theme', 'YOURTHEME') . '/js/ngtables/ng_responsive_tables.js');
    // if you want to use own custom script (if one exists), change next to yours:
    drupal_add_js(drupal_get_path('theme', 'YOURTHEME') . '/js/script.js');
    drupal_add_css(drupal_get_path('theme', 'YOURTHEME') . '/js/ngtables/ng_responsive_tables.css');
  }
  // ...
}

 

3.3. Add script.js to YOURTHEME_folder/js (or use own js file) next code:

(function ($, Drupal, window, document, undefined) {

Drupal.behaviors.my_custom_behavior = {
  attach: function(context, settings) {
    if (jQuery().ngResponsiveTables) {
      $('table').once("ngtable", function() {
        $('table').ngResponsiveTables({
          smallPaddingCharNo: 13,
          mediumPaddingCharNo: 18,
          largePaddingCharNo: 30
        });
      });
    }
  }
};

})(jQuery, Drupal, this, this.document);

3.4. Some styles (depend on theme that you will use):
 

@media (max-width: 768px) {
  .commerce-order-handler-area-order-total .commerce-price-formatted-components {
     width: 100%;
  }

  table.checkout-review .pane-title td,
  .field-name-commerce-order-total .component-title,
  .checkout_review td {
    &:before {
      display: none;
    }
  }
}

4. Refresh drupal and browser caches, and we got next:

p.s. Using StackTable isn't recommend, since it duplicate tables to real table and hidden responsive table, so for our cart or checkout forms it willn't applicable and got count of bugs.

p.p.s I don't like using CSS solutions, since want to make responsive for all tables, not only one customized.

Comments

ll

lkln

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.