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 файл нашей темы, в нём будет находиться весь функционал работы наших стрелок.
// прибавляем 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 разметкой ноды:
Обновляем страницу и проверяем наши стрелки в действии!
Также, если вы используете модуль https://drupal.org/project/commerce_decimal_quantities, то вам может понадобиться шаг в десятичном виде (0.1, 0.2 и так далее). Для этого подкорректируем немного наш JS код:
$('.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()
// 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 в шапке сайта, спасибо :)
- 4605 просмотров
Разделы
Подписаться
Комменты
-
Olzhas 9 месяцев 1 неделя назадСпасибо. С Новым Годом! →
-
Den 10 месяцев 1 неделя назадВ первой функции, при создании переменной $li_previous нужно поменять '←' с NULL, в $li_next сделать тоже самое. →
-
Гость 10 месяцев 1 неделя назадЕсли все ровно так как было описано, то нет никаких сомнений что домен увел сам регистратор. Потому что вероятность того →
-
Валерий 11 месяцев 6 дней назадда можно делать импорт-экспорт только лишь в оболочке на входя на mysql сервер →
-
admin 11 месяцев 1 неделя назадВалерий, а зачем вам именно так делать экспорт? Если я не ошибаюсь, то там нет какой-либо команды чтобы сделать экспорт →
-
Валерий 11 месяцев 1 неделя назадзахожу на mysql через ssh по команде →
-
admin 11 месяцев 1 неделя назадДобрый вечер, какой у вас клиент? →
-
Валерий 11 месяцев 1 неделя назадЗдравстуйте, есть команда чтобы сделать экспорт базы внутри mysql клиента? →
-
Eduard 11 месяцев 3 недели назадВидать, домен хороший был. Заявление пробывали писать на мошенника? →
-
Stas 1 год 1 месяц назадОшибка в ключе квантификатора - replace(/будешь|пить/ig, "хлеб"); Указать -g для прохода по всем совпадениям! →
Комментарии (2)
Не могу понять, что не так - если товаров на странице много (на пример "Каталог товаров")и в каждом стоит форма добавления в корзину, то стрелки работают только для первого товара. Это если использовать выше предложенный код, без сторонних модулей.
Не пойму почему, спаны добавились в форму, а js код не работает. спан выглядит как просто текст Html.
Скрипт добавил дописав в файле info модуля: scripts[] = additions.js