Implementacija plus i minus buttona u Ubercart košaricu

Submitted by victor.bourgade on

Po završetku ovog tutoriala dobiti ćete košaricu nalik ovoj:

Cart with plus and minus button

Ovaj tutorial se bazira na pretpostavci da već koristite Bootstrap temu, no ukoliko niste, ikone možete promijeniti pomoću CSS-a.

Prvi korak je promjena form elementa kako bi se unos postavio u dva buttona. U template.php dodajte hook kako bi postavili unose u dva spans sa minus i plus Bootstrap glyphicon-ima.

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;
}

Nakon implementacije buttona potrebno je dodati opciju za povećanje vrijednosti, što ćemo učiniti putem jQuery-a. U ovakvim slučajevima preporučljivo je koristiti jQuery iz prilagođenog modula korištenjem drupal_add_js, no za ovaj tutorial opciju ćemo dodati globalno.

U THEMENAME.info učitajte novu js skriptu koju ćete nazvati custom.js i koja će biti postavljena u js datoteku.

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

scripts[] = js/custom.js

Nakon toga u custom.js dodajte:

(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));

Nakon dodavanja, klikom na plus ili minus vrijednost broja se mijenja. Dodavanje ovog jQuery-a sa drupal.behaviors omogućava ispravan rad čak i pri korištenju Ajax košarice, npr. u slučaju da koristite Ubercart Ajax košarica modul.

Da bi dobili očekivani rezultat, na kraju ćete vjerojatno trebati dodati CSS i to je to!

Oznake

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.