5

I am working on a site that uses the Commerce module for a web store. The design specifies that the user's cart overview page should allow them to increase and decrease the quantity of a particular item using plus/minus buttons. However, as far as I can see the only option for a quantity field is a bare text field (in commerce/config/line-items/product/fields). I've searched for solutions online, but apart from the Commerce Extra module (which is in alpha, and does not allow for vertically-stacked buttons as per the design) I'm coming up blank.

Is there an 'accepted' way to add these buttons to the quantity field, or am I missing something in my configuration?

  • To be honest, that image just looks like a styled select box to me. Have you got confirmation that it needs to be a +/- box? – Chapabu Apr 24 '13 at 9:33
  • Unfortunately, yes; I checked with the designer. They thought it was trivial to do. – SteakTartaar Apr 24 '13 at 9:36
13

Commerce Kickstart has that.

We use the jquery_ui_spinner library, extracted in our libraries folder.

We declare the library in a hook_library implementation:

/**
 * Implements hook_library().
 */
function commerce_kickstart_product_ui_library() {
  $libraries['jquery_ui_spinner'] = array(
    'title' => 'jQuery Spinner',
    'website' => 'http://github.com/btburnett3/jquery.ui.spinner/',
    'version' => '1.8',
    'js' => array(
      libraries_get_path('jquery_ui_spinner') . '/ui.spinner.min.js' => array(),
    ),
    'css' => array(
      libraries_get_path('jquery_ui_spinner') . '/ui.spinner.css' => array(),
    ),
    'dependencies' => array(
      array('system', 'ui.widget'),
    ),
  );
  return $libraries;
}

Then in our hook form alter we attach the library:

function commerce_kickstart_product_ui_form_alter(&$form, &$form_state, $form_id) {
  if (strstr($form_id, 'commerce_cart_add_to_cart_form')) {
    $form['#attached']['library'][] = array('commerce_kickstart_product_ui', 'jquery_ui_spinner');
  }
}

and finally in our JS file we do:

(function ($) {

  // Add a spinner on quantity widget.
  Drupal.behaviors.quantityWidgetSpinner = {
    attach: function ( context, settings ) {
      $('.form-item-quantity input').spinner({
        min: 1,
        max: 9999,
        increment: 'fast'
      });
    }
  }
})(jQuery);
  • Your method isn't working for me. Spinner is not applying to my quantity input, though all libraries connected well. – Alexander Kim Mar 1 '14 at 19:25
1

This functionality is also provided by the Commerce Extra module, it works just right.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.