Implement plus minus button in ubercart cart

Submitted by victor.bourgade on

At the end of this tutorial you will get a cart like this :

Cart with plus and minus button

This tutorial assume that you are using a bootstrap theme but you can just change the icons with some css.

First of all, we need to alter our form element to wrap the input into two buttons. In your template.php add this hook to wrap the inputs into two spans with minus and plus glyphicons from bootstrap.

function THEMENAME_form_element($variables) {
    $elm = $variables['element'];
    $output = theme_form_element($variables);

    if ($elm['#type'] === 'uc_quantity') {
        if ($elm['#title'] === 'Quantity') {
            foreach ($elm as $key => $value) {
                $output = '<span class="input-group-btn">
                <button type="button" class="btn btn-danger btn-number"  data-type="minus" data-field="'. $elm['#name'] .'">
                <span class="glyphicon glyphicon-minus"></span>
                </button></span>'. theme_form_element($variables) . '<span class="input-group-btn">
                <button type="button" class="btn btn-success btn-number" data-type="plus" data-field="'. $elm['#name'] .'">
                <span class="glyphicon glyphicon-plus"></span>
                </button></span>';
            }
        }
    }

    return $output;
}

Now we have our buttons implemented we need to add some jquery to perform the incrementation. In my case, I have loaded the jquery from a custom module with drupal_add_js but for this tutorial we will add it globally. 

In your THEMENAME.info add a new js script which will be called custom.js and put in a js folder.

;;;;;;;;;;;;;;;;;;;;;
;; Scripts
;;;;;;;;;;;;;;;;;;;;;

scripts[] = js/custom.js

Then in your custom.js file add :

(function ($) {
  Drupal.behaviors.add_remove = {
    attach: function (context, settings) {
      //  Incrementation for plus-minus buttons.
      $('.btn-number').once().click(function(e){
          e.preventDefault();

          var fieldName = $(this).attr('data-field'),
          type      = $(this).attr('data-type'),
          input = $("input[name='"+fieldName+"']"),
          currentVal = parseInt(input.val());

          if (!isNaN(currentVal)) {
              if(type == 'minus') {
                if(currentVal > 0) {
                  input.val(currentVal - 1).change();
                }
              } else if(type == 'plus') {
                input.val(currentVal + 1).change();
              }
          } else {
              input.val(0);
          }
      });
    }
  };
}(jQuery));

The buttons should now increment the item quantity on click. Adding this jQuery with drupal.behaviors allow us to get it working even on an ajax cart, for example if you are using Ubercart AJAX Cart module.

You'll probably need to add some css to get the expected result but globally, that's it !

Tags

Drupal 7 Bootstrap 3 Ubercart

About the writer

victor.bourgade

Victor is a web developer passionnated in drupal and bootstrap technologies. He likes challenges and beautiful designs.

When not behind his computer you'll find him drinking beers with friends or in the middle of nowhere hiking with his dog.