Вед-дев, Сео, Манимейкинг

Drupal Commerce добавляем стрелки для quantity widget без сторонних модулей и библиотек

В прошлой статье, я писал о том, как подключить стрелки для quantity widget при помощи модуля commerce_extra. Сегодня мы рассмотрим способ подключения стрелок для увеличения/уменьшения количества товаров без сторонних модулей и библиотек.

Для начала создадим свой модуль или template.php (если не был еще создан в вашей теме). Затем при помощи hook_form_alter() и $form['html_markup'] мы добавим 2 span, которые будут выступать в роли самих стрелок, при нажатии на которые, будет увеличиваться/уменьшаться количество товаров в ноде.

/*
 * hook_form_alter()
 */


function MYMODULE_form_alter(&$form, $form_state, $form_id) {
  // Add to cart form overrides
  if(substr($form_id, 0, 30) == 'commerce_cart_add_to_cart_form' && arg(0) == 'node') {
    $form['html_markup'] = array('#markup' => '<span class="minus"></span><span class="plus"></span>');  
  }
}

Далее, создаем JS файл и подключим его через info файл нашей темы, в нём будет находиться весь функционал работы наших стрелок.

(function($) {
// прибавляем 1 при нажатии на плюс
$('.plus').on('click',function(){
  var $qty = $(this).closest('div').find('#edit-quantity');
  var currentVal = parseFloat($qty.val());
  if (!isNaN(currentVal)) {
    $qty.val(currentVal + 1);
  }
});

// отнимаем 1 при нажатии на минус
$('.minus').on('click',function(){
  var $qty = $(this).closest('div').find('#edit-quantity');
  var currentVal = parseFloat($qty.val());
  if (!isNaN(currentVal) && currentVal > 0) {
    $qty.val(currentVal - 1);
  }
});

})(jQuery);

Данный JS код будет работать со стандартной HTML разметкой ноды:

Drupal Commerce добавляем стрелки для quantity widget без сторонних модулей и библиотек

Обновляем страницу и проверяем наши стрелки в действии!

Также, если вы используете модуль https://drupal.org/project/commerce_decimal_quantities, то вам может понадобиться шаг в десятичном виде (0.1, 0.2 и так далее). Для этого подкорректируем немного наш JS код:

// прибавляем 0.1 при нажатии на плюс
$('.plus').on('click',function(){
  var $qty = $(this).closest('div').find('#edit-quantity');
  var currentVal = parseFloat($qty.val());
  if (!isNaN(currentVal)) {
    $qty.val(parseFloat(currentVal + 0.1).toFixed(1));
  }
});

// отнимаем 0.1 при нажатии на минус
$('.minus').on('click',function(){
  var $qty = $(this).closest('div').find('#edit-quantity');
  var currentVal = parseFloat($qty.val());
  if (!isNaN(currentVal) && currentVal > 0) {
    $qty.val(parseFloat(currentVal - 0.1).toFixed(1));
  }
});

При помощи toFixed() мы округляем наши числа до десятичных, иначе они будут выглядеть, как 0.200000002, так как, JS не является точным языком программирования.

При использования модуля commerce_decimal_quantities может возникнуть вопрос: "А что если наши товары продаются не только в десятичных количествах (0.1), а еще и в целых?". Ответ прост, нужно в вашем товаре (product) добавить текстовое поле (список) и добавить 2 значения - КГ. и ШТ. Если мы выбираем КГ., то показывать десятичный виджет количества, а если ШТ., то соответственно, показывать в целых значениях. Для этого отредактируем наш hook_form_alter()

function MYMODULE_form_alter(&$form, $form_state, $form_id) {
  // Add to cart form overrides
  if(substr($form_id, 0, 30) == 'commerce_cart_add_to_cart_form' && arg(0) == 'node'){
    // loading node object
    $node = node_load(arg(1));
    $pid = $node->field_YOURFIELDNAME['und'][0]['product_id'];

    // loading product object
    $product = commerce_product_load($pid);
   
    // if you have selected not KG, then make it integer
    if ($product->field_YOURFIELDKGORITEM['und'][0]['value'] == 'item') {
      $form['quantity']['#datatype'] = 'integer';
      $form['quantity']['#decimals'] = false;
    }

    $form['html_markup'] = array('#markup' => '<span class="minus"></span><span class="plus"></span>');
  }
}

То есть, мы теперь загружаем обьект ноды и продукта, а затем фильтруем по нашему полю товара - КГ. или ШТ., если ШТ., то показываем целые числа, если КГ., то десятичные.

Также, не забудьте прописать условия в JS, при помощи jQuery метода text() выдёргиваем значение нашего поля (КГ, ШТ) и в зависимости от выбранной величины меняем шаг прибавления/отнятия в виджете количества товаров.

***************
Если вам помогла эта статья, то нажмите на кнопку Google Plus в шапке сайта, спасибо :)



Комментарии (2)

Не могу понять, что не так - если товаров на странице много (на пример "Каталог товаров")и в каждом стоит форма добавления в корзину, то стрелки работают только для первого товара. Это если использовать выше предложенный код, без сторонних модулей.

Не пойму почему, спаны добавились в форму, а js код не работает. спан выглядит как просто текст Html.
Скрипт добавил дописав в файле info модуля: scripts[] = additions.js

Разделы

Подписаться

Подписка на RSS-лента последние записи из Блога

Комменты

  • Olzhas 9 месяцев 3 недели назад
    Спасибо. С Новым Годом! 
  • Den 10 месяцев 2 недели назад
    В первой функции, при создании переменной $li_previous нужно поменять '←' с NULL, в $li_next сделать тоже самое. 
  • Гость 10 месяцев 3 недели назад
    Если все ровно так как было описано, то нет никаких сомнений что домен увел сам регистратор. Потому что вероятность того 
  • Валерий 11 месяцев 2 недели назад
    да можно делать импорт-экспорт только лишь в оболочке на входя на mysql сервер 
  • admin 11 месяцев 2 недели назад
    Валерий, а зачем вам именно так делать экспорт? Если я не ошибаюсь, то там нет какой-либо команды чтобы сделать экспорт 
  • Валерий 11 месяцев 3 недели назад
    захожу на mysql через ssh по команде  
  • admin 11 месяцев 3 недели назад
    Добрый вечер, какой у вас клиент? 
  • Валерий 11 месяцев 3 недели назад
    Здравстуйте, есть команда чтобы сделать экспорт базы внутри mysql клиента? 
  • Eduard 1 год 1 день назад
    Видать, домен хороший был. Заявление пробывали писать на мошенника? 
  • Stas 1 год 1 месяц назад
    Ошибка в ключе квантификатора - replace(/будешь|пить/ig, "хлеб"); Указать -g для прохода по всем совпадениям!