Вход • Регистрация

Больше и меньше в фильтре

  •
  • 05 апреля 2018 г.
  • Может пригодится кому-нибудь

    shop.view.show_search - case 'multiple'

    Код

    echo '
    <div class="filter-block__title">'.$row["name"].'</div>';

    echo '<div class="filter-block__list">';
    foreach ($row["select_array"] as $key => $value)
    {
    echo '<div class="filter-block__item">';
    echo '
    <input class="checkbox__control" type="checkbox" id="shop_search_p'.$row["id"].'_'.$key.'" name="p'.$row["id"].'[]" value="'.$key.'"'.(in_array($key, $row["value"]) ? " checked" : '').'>
    <label class="checkbox__label" for="shop_search_p'.$row["id"].'_'.$key.'">'.$value.'</label>
    ';
    echo '</div>';
    }
    echo '</div>';


    Итоговыq вид в html для наглядности
    Код

    <div class="filter-block js_shop_search_param shop_search_param0" cat_ids="0">
    <div class="filter-block__title">Объем, мл.</div>
    <div class="filter-block__list">
    <div class="filter-block__item">
    <input class="checkbox__control" type="checkbox" id="shop_search_p0_0" name="p0[]" value="0">
    <label class="checkbox__label" for="shop_search_0_0">290</label>
    </div>
    <div class="filter-block__item">
    <input class="checkbox__control" type="checkbox" id="shop_search_p0_0" name="p0[]" value="0">
    <label class="checkbox__label" for="shop_search_p0_0">300</label>
    </div>
    </div>
    </div>


    Js - Если больше 6 значений, то скрываем остальные

    Код

    // More or Less
    $('.filter-block__list').each(function(){
    var filterAmount = $(this).find('.filter-block__item').length;

    if( filterAmount > 6){
    $('.filter-block__item', this).eq(5).nextAll().hide().addClass('filter-block__item--hidden');
    $(this).append('<div class="filter-block__more">Больше</div>');
    }
    });

    $('.filter-block__list').on('click','.filter-block__more', function(){
    if (
    $(this).hasClass('less') ){
    $(this).text('Больше').removeClass('less');
    }
    else {
    $(this).text('Меньше').addClass('less');
    }
    $(this).siblings('div.filter-block__item--hidden').slideToggle("fast");
    });


    • 05 апреля 2018 г.
    • Картинка для наглядности
      •
      • 05 апреля 2018 г. , редакция: 05 апреля 2018 г.
      • делал похожее, но мне удобнее делать расчеты в php-шной части и добавлять кнопку Больше и класс hidden, а в скрипте просто

        Код
        $(".btn_all_view").click(function(){
        $(this).parents(".param_list_multiply").find(".hidden").removeClass("hidden");
        });



        Конструкция такая

        Код
        <div class="param_list_multiply">
        <div class="param_name">Список?</div>
        <div class="param"><!--тут чекбокс и прочее--></div>
        <div class="param"><!--тут чекбокс и прочее--></div>
        <div class="param hidden"><!--тут чекбокс и прочее--></div>
        <div class="param hidden"><!--тут чекбокс и прочее--></div>

        <div class="btn_all_view">Больше</div>
        </div>
        •
        • 05 апреля 2018 г.
        • Тоже не плохо, некоторые вещи лучше в php делать.

          Как я понял у вас только раскрывает список и не позволяет его свернуть обратно?
          • 06 апреля 2018 г. , редакция: 06 апреля 2018 г.
          • ну можно доработать

            Если проставить классы

            Код
            .param_list_multiply .hidden {display:none;}
            .param_list_multiply.active .hidden {display:block}


            А в скрипте

            Код
            $(".btn_all_view").click(function(){
            if($(this) == "Больше") {
            $(this).parents(".param_list_multiply").addClass();
            $(this).text("Меньше");
            } else {
            $(this).parents(".param_list_multiply").removeClass();
            $(this).text("Больше");
            }

            });

Новости

  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • 24 апреля, среда
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
  • Новость. Сборка. Тарифы
  • 15 декабря 2023 г.
  • Подводим итоги 2023 года. Выпустили новую сборку DIAFAN.CMS 7.1.1, вводим новые тарифы на аренду сайта и коммерческую поддержку и автообновления с января 2024 г., строим планы на будущий год.
Все новости