Hướng dẫn làm Responsive cho Commerce Checkout Tables trong Drupal 7

Hướng dẫn làm Responsive cho Commerce Checkout Tables trong Drupal 7

Providing a responsive checkout is an important feature of any eCommerce site. Drupal Commerce if themed correctly handles this fairly sweet; except for one element, tables.

Here is a quick solution which leverages stacktable.js. Automatically applying it to each views table instance during the checkout process. Simply add more form_id's to extend this functionality to other pages.

/**
 * @file
 * stacktable.module
 */

/**
 * Implements hook_form_alter().
 */
function stacktable_form_alter(&$form, $form_state, $form_id) {
  switch ($form_id) {
    case 'commerce_checkout_form_checkout':
    case 'commerce_checkout_form_review':
      $form['#attached']['library'][] = array('stacktable', 'stacktable.js');
      $form['#attached']['js'][] = drupal_get_path('module', 'stacktable') . '/js/stacktable.module.js';

      // We don't know if other view tables exist.
      $form['#attached']['js'][] = array(
        'data' => array('hivqld' => array(
          'table' => '.' . drupal_html_class($form_id) . ' .views-table'),
        ),
        'type' => 'setting',
      );
    break;
  }
}

/**
 * Implements hook_library().
 */
function stacktable_library() {
  $library = libraries_get_path('stacktable.js');

  $libraries['stacktable.js'] = array(
    'title' => 'Stacktable.js',
    'website' => 'http://johnpolacek.github.io/stacktable.js',
    'download url' => 'https://github.com/johnpolacek/stacktable.js/zipball/master',
    'version' => array(),
    'js' => array(
      $library . '/stacktable.js' => array(
        'scope' => 'header',
      ),
    ),
    'css' => array(
      $library . '/stacktable.css' => array(
        'type' => 'file',
        'media' => 'screen',
      ),
    ),
  );

  return $libraries;
}

 & the JavaScript which takes our form_id; applying to all child view tables.

/**
 * @file
 * stacktable.module.js
 */

(function($) {

  Drupal.behaviors.stacktable = {
    attach: function(context, settings) {
      var table = settings.hivqld.table;

      $(table).once("stacktable", function() {
        $(table, context).stacktable();
      });
    }
  };

}(jQuery));

Make sure you have the stacktable.js library located at, sites/all/libraries/stacktable.js/stacktable.js - yes the folder is called stacktable.js xD.

  • sites/all/libraries/stacktable.js/stacktable.js
  • sites/all/libraries/stacktable.js/stacktable.css

Finally here is an example of the above code in use. For me it really was a case of plug & play, stacktable.js is a fantastic library.

Hướng dẫn làm Responsive cho Commerce Checkout Tables trong Drupal 7

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Tommy Tran

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy

Tìm kiếm bất động sản

 

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Cách sử dụng trình biên soạn Vim

Cách sử dụng trình biên soạn Vim

Vim là một trong những trình biên soạn dòng lệnh mạnh và phổ biến nhất. Nó chỉ sẵn có trên nền của Linux và Unix, những sau đó nó cũng xuất hiện cả trên Windows.

Đưa Android Market lên Kindle Fire

Đưa Android Market lên Kindle Fire

Amazon chỉ cho phép chủ nhân Kindle Fire tải về và cài đặt các ứng dụng từ Amazon Appstore.

Nguyễn Bành Đức trúng tuyển 15 đại học ở Mỹ

Nguyễn Bành Đức, 18 tuổi 7.5 IELTS, SAT là 1.460/1.600 trúng tuyển 15 đại học ở Mỹ

Nguyễn Bành Đức, 18 tuổi, được 15 đại học ở Mỹ cấp học bổng trị giá từ 650 triệu đồng đến gần 5 tỷ đồng cho khóa trọn gói 4 năm.

Công ty diệt chuột T&C

 

Diet con trung