Последние темы


tagManager2 + разметка по БЭМ

  • Здравствуйте. Не так давно был вопрос о инпатах и баттонах - редактировании количества позиций, при разметке по БЭМ(http://forum.modx-shopkeeper.ru/topic/1099/кнопки-у-shk-count). Проблему так и не решил, пришлось просто убрать возможность изменения количества товаров при заказе.
    Подскажите, можно ли как-то заставить tagManager2 работать вот с такой разметкой для фильтра:
    Стандартный шаблон для row:

    <div class="filter_row">
        <input type="checkbox" id="[[+name]]__[[+idx]]" name="[[+flt_name]]" value="[[+value]]" />
        <label for="[[+name]]__[[+idx]]">[[+value_name]]</label>
    </div>
    

    Необходимый шаблон для row

    <div class="filter__row">
       <label class="checkbox checkbox--size-l" >
           
           <span class="checkbox__box">
               <input class="checkbox__control" type="checkbox" id="[[+name]]__[[+idx]]" name="[[+flt_name]]" value="[[+value]]">
           </span>
           
          <span class="checkbox__text" role="presentation" for="[[+name]]__[[+idx]]">[[+value_name]]</span>
       </label>
    </div>
    

    Вроде бы для каждого из возможных фильтров есть шаблон, для тонкой настройки, но вот настроить корректную работу все же не выходит.
    При такой разметке не выводятся численная информация по каждому значению фильтра – циферка в теге <sup>, возможно, потому что такой вывод закрепляется не за конкретным селектором или классом в разметке, а по тегу возле родителя (прошу прощения, javascript знаю поверхностно). Возможно можно переписать кусочек кода, отвечающий за это? То есть что бы разметка на это вообще не влияла, а нужно лишь было прописать нужные классы или айди.

    Также, при такой разметке фильтр срабатывает, происходит выборка, но если чекбокс отключить, то ничего не произойдет – урл не поменяется, выборка останется прежней, то есть чекбокс работает только на включение, отключение никак не меняет выборку.
    При отключении чекбокса, в консоли вот такая ошибка:

    Uncaught TypeError: t.removeAttr is not a function
    

    При стандартной разметке, проблем в работе не наблюдается
    Возможно, в следующих версиях компонента, можно будет учесть такие моменты и сделать компонент еще более гибким в разметке? Если это конечно возможно

  • В конфигурации filters.js есть такой параметр

    filters_cont: '#filters',//Селектор оберточного элемента блоков с фильтрами
    

    Может вы убрали этот ID, надо вернуть или указать другой селектор.

  • Эта запись удалена!
  • @andchir Нет, там прописан другой селектор, с этим все в порядке, да и работает со стандартным шаблоном tm2_filterTpl, а этот селектор выше находится:
    0_1522083463096_2aca007f-20b9-4b6d-a320-7b3a4b2cf29d-image.png
    0_1522083490303_eace3a09-4caf-4222-95c2-c73d7ee5c194-image.png
    Различие именно в самой разметке tm2_filterTpl - со стандартным работает, со своим, работает только на включение

  • Если дадите ссылку, посмотрю.

  • @andchir Прошу прощения, была ошибка у меня в скрипте, теперь чекбокс работает как нужно. За исключением одного момента. При обновлении страницы мои классы для активного чекбокса, которые проставляет jq, слетают, что и понятно. Но у вас, при стандартном шаблоне, активные чек боксы запоминаются. Вы не подскажете, как можно получить список активных чекбоксов, после обновления страницы? Что бы я смог снова пройтись по ним скриптом и расставить классы, которые отвечают за стиль активных чекбоксов? Пробую вот так, но не работает:

    $(document).ready(function(){
        $('.checkbox__control').each(function(){
    
            if($(this).prop("checked")){
                console.log($(this));
            }
    
        });
    });
    

    То есть при обновлении страницы, мне нужно сохранить класс родителю активного чекбокса
    0_1522146000440_f30682a0-16bf-4bd7-93e4-b313836ff180-image.png

  • Вы не подскажете, как можно получить список активных чекбоксов

    Ну если есть активные чекбоксы, берите эти чекбоксы и ставьте классы где нужно. Возможно, нужно использовать событие не $(document).ready, а $(window).load.

  • @andchir стилизация чекбокса, активного и неактивного происходит через родителя. То есть, я нажал на чекбокс, родитель получил класс .checkbox--checked и визуально стал активным. Когда я обновляю страницу, класс .checkbox--checked пропадает, он ведь нигде не запоминается и его нужно проставить заново, что бы визуально чекбокс был активным. Просто у вас, при стандартном шаблоне, при обновлении страницы все активные чекбокса остаться активными, то есть это где-то запоминается, так вот можно ли как то получать список тех чекбоксов, которые активны?
    Я отправлю ссылку в личное сообщение, что бы было понятно, что я имею ввиду

  • Вы хотя бы как-нибудь пытались получить список активных чекбоксов? Например так:

    $(':checkbox:checked', tmFilters.config.filters_cont).each(...
    
  • Участник @andchir написал в tagManager2 + разметка по БЭМ:

    $(window).load

    Получилось получить чекбоксы, в JQ новых версий события по другому нужно отслеживать, прошу прощения, вот так работает:

    $(window).on('load', function(){
    
        $('input[type=checkbox]').each(function(){
    
            if($(this).prop("checked")){
                console.log("1");
            }
    
        });
    });
    
  • @andchir спасибо за помощь и терпение.
    Вот так вроде бы полностью работает, возможно кому-то пригодится:

    $(window).on('load', function(){
    
        $('.checkbox__control').each(function(){
    
            if($(this).prop("checked")){
                $(this).closest(".checkbox").addClass('checkbox--checked');
            }
    
        });
    });
    
  • Для вывода цифры по каждому фильтру в своем теге использовал вот такую разметку:

     <div class="filter__row">
        <label class="checkbox checkbox--size-l">
            
            <span class="checkbox__box">
                <input type="checkbox" id="[[+name]]__[[+idx]]" name="[[+flt_name]]" value="[[+value]]" class="checkbox__control" />
            </span>
            
        <span class="checkbox__text" for="[[+name]]__[[+idx]]"  role="presentation">[[+value_name]]</span>
        <span class="checkbox__count"></span>
        </label>
        
    </div>
    
    

    Значение записывается в тэг с классом checkbox__count
    Немного переписал filter.js

    /**
         * updateMarkerCount
         *
         */
        updateMarkerCount: function(elem, count){
            
            // var elem_parent = elem.parent();
            var elem_parent = elem.closest(".checkbox");        
            
            if ( tmFilters.config['filters_type'] != 'only_block' ) {
    	    
                if ( elem.is('input:checked') ) {
                    
                    $('.checkbox__count',elem_parent).text("");
                    
                }else{                
    		
    		$('.checkbox__count',elem_parent).text(count);		
    		
                }
            }
            
            if (count == 0) {
                
                elem_parent.addClass('checkbox--disabled');
                if ( tmFilters.config['filters_type'] != 'only_block' ){
                    $('.checkbox__count',elem_parent).text("");
                }
                $('input:checkbox,select',elem_parent).prop('disabled','disabled');
                
            }else{
                
                elem_parent.removeClass('checkbox--disabled');
                $('input:checkbox,select',elem_parent).prop('disabled', false);
                
            }
            
        },
    
    

    Может кому-то будет полезно

 

Последние комментарии

  • Z

    Спасибо, действительно проще создать отдельно.

    Читать далее
  • Но проблема в том, что эта старая цена "дублируется" в плесхолдер "Дополнительных услуг" - [[+addit_data]].

    Можно не использовать [[+addit_data]], а выводить параметры по-отдельности.

    Цитата из документации:

    [[+shk_любой доп.параметр]] - любой доп. параметр, выбранный при добавлении товара в корзину (из [[+addit_data]]), например [[+shk_param1]].
    Если параметры сделаны в виде чекбоксов, то чтобы вывести отдельно каждый из них, нужно добавлять индекс (номер от нуля) для параметров следующих за первым.
    Пример: [[+shk_param1]], [[+shk_param1_1]], [[+shk_param1_2]] ...
    [[+shk_любой доп.параметр_price]] - цена доп.параметра. Пример: [[+shk_param1_price]].

    Читать далее
  • Z

    Доброго времени суток. Не могу разобраться, как передать данные migx-поля в корзину в плейсхолдер без "дублирования" в [[+addit_data]]
    Суть в чем: У меня есть 2 цены у товара (со скидкой и без скидки) Форма для отправки в корзину:

    <form action="[[~[[*resource_id]]? &scheme=`abs`]][[*alias]].html" method="post"> <input type="hidden" name="shk-id" value="[[*id]]" /> <input type="hidden" name="shk-name" value="[[*pagetitle]]" /> <input type="hidden" name="price_old__[[*id]]__add" value="[[*price_old]]" /> <input type="hidden" name="shk-count" value="1" /> <div class="product-price"> Цена: <span class="shk-price">[[!*price:shk_curr_rate:num_format]]</span> Старая цена - <span class="shk-price-old">[[+price_old]]</span> [[!+shk_currency]] </div> <div class="padding-lr-30"> <h5>Дополнительные услуги</h5> [[*param1]] </div> <div class="product-price"> <button class="btn btn-lg btn-primary" type="submit" class="shk-but">В корзину</button> </div> </form>

    Данные со "старой ценой" в корзину попадают нормально и выводится в нужном месте в плейсхолдере:
    [[+shk_price_old]]
    Но проблема в том, что эта старая цена "дублируется" в плесхолдер "Дополнительных услуг" - [[+addit_data]]. Как сделать чтобы старая цена не выводилась в [[+addit_data]]? Или может я как то не правильно передаю MIGX-параметр в корзину ? Заранее спасибо.

    Читать далее
  • Фотографии, как я понял, это второй вопрос. Я по нему пока ничего не отвечал и не просил информации. Это не отменяет того, что в вашем конфиге есть ошибка, о которой я писал выше. Не нужно задавать разные вопросы в одной теме, чтобы не было путаницы.
    http://forum.modx-shopkeeper.ru/topic/15/рекомендации-по-оформлению-темы-с-вопросом

    Читать далее