Совместимость тем дизайна и карт в т.ч.ЯДоставка при выборе доставки

5

Возможно, некоторые уже обращали внимание, что карта в плагине ЯДоставки активизируется при выборе соответствующего метода доставки. И у этого метода есть устойчивый глюк: если покупатель не кликнет сначала на элемент label у input[type=radio][name=shipping_id], а сразу начнет выбирать пункт выдачи из выпадающего списка, то карта не будет показана. Кроме того js, который встраивает ЯДоставка предобразует штатный SELECT в структурированный набор -- такое преобразование тоже не будет выполнено.

Вот на изображении ниже, если кликнуть сразу на список, ни карты, ни улучшенного выбора не будет. Проблема в том, что активизация карты вешается на событие change у input[type=radio][name=shipping_id].

Я сначала подумал, что можно в js самого плагина поправить ситуацию и вешать обработчик на работу выпадающего списка, но, подумав, решил, что лучше вызывать событие change из обработчика темы оформления — тогда :input[name=shipping_id] может быть любым, а не обязательно [type=checkbox]. Это явно оставит больше пространства для маневра авторам тем оформления.

Сейчас в теме Default (и, соответственно, всех от нее производных :-) ) есть такой обработчик выпадающего списка:


$(".checkout-options").on('change', "select.shipping-rates", function (e, not_check) {
    var opt = $(this).children('option:selected');
    var li = $(this).closest('li');
    li.find('.price').html(opt.data('rate'));
    if (!not_check) {
        li.find('input:radio').attr('checked', 'checked');
    }
    li.find('.est_delivery').html(opt.data('est_delivery'));
    if (opt.data('est_delivery')) {
        li.find('.est_delivery').parent().show();
    } else {
        li.find('.est_delivery').parent().hide();
    }
    if (opt.data('comment')) {
        li.find('.comment').html('<br>' + opt.data('comment')).show();
    } else {
        li.find('.comment').empty().hide();
    }
});

Из кода видно, что если ближайший input:radio не отмечен, как checked ему присваивается соответствующий атрибут (не спрашивайте, почему тут не prop() -- не знаю). Но событие change() не вызывается.

Есть два варианта решения проблемы.

Первый — добавить вызов события change в вышепроцитированный обработчик. Минус в том, что показ карты и упорядочивание списка будет происходить __после__ того, как покупатель что-нибудь выберет :-(

$(".checkout-options").on('change', "select.shipping-rates", function (e, not_check) {

/* тут пропустил то, что к делу не относится */
if (!not_check) { li.find('input:radio').attr('checked', 'checked'); $(':input[name=shipping_id]', li).change(); } /* тут тоже удалил, не относящееся к делу */
}

Второй вариант — добавить вообще отдельный обработчик события **focus** на SELECT с выбором вариантов доставки. Карта и упорядочивание списка будут происходить сразу и покупателя это может озадачить :-)


$('.checkout-options').on('focus', 'select.shipping_rates', function() {
    var li = $(this).closest('li');
    var radio=$('input[type=radio][name=shipping_id]', li);
    if(!radio.is(':checked')) {
        radio.prop('checked', true).change();
    }
});

0 комментариев

    Добавить комментарий

    Чтобы добавить комментарий, зарегистрируйтесь или войдите