Фильтр горизонтальный spolier

Правила раздела: faq.php?mode=okay
Модератор: Модераторы

siteapp M
siteapp M
Возраст: 32
Репутация: 7
Сообщения: 118
Зарегистрирован: 12.01.2016
С нами: 8 лет 2 месяца

Сообщение #1 siteapp » 28.09.2018, 11:24

Не закидывайте камнями, решил скинуть решение просто, может кому пригодиться.

Закрытый вид:

Изображение

Открытие 1 характеристика:

Изображение
Решение просто со стандартным кодом немного CSS и JS

Сам фильтр вывод куда хотите:

Код: Выделить всё

     <div class="col-lg-12 bg-filter">
         
{if $features}
    {foreach $features as $key=>$f}
        <div class="filter-test">
            <a href="" class="spoiler-trigger">
                <span class="padding-left" data-feature="{$f->id}">{$f->name}</span>
            </a>
           
            <div class="spoiler-block">
           
                <div class="filter-text-test">
                    <div class="bx_filter_head">
                  {foreach $f->options as $o}
                        <div class="bs-filter-left">
                         <input onchange="window.location.href='{furl params=[$f->url=>$o->translit, page=>null]}'" type="checkbox"{if $smarty.get.{$f@key} && in_array($o->translit,$smarty.get.{$f@key})} checked{/if}/>
                         <span class="c-indicator"></span>
                         {$o->value|escape}
                     </div>
                   {/foreach}
                   </div>
               </div>
            </div>
         
        </div>
    {/foreach}
{/if}

    </div>


На главную страницу вставляйте:

Код: Выделить всё

<script>
        $(document).on('click', '.spoiler-trigger', function(e) {
            e.preventDefault();
  if ($(this).hasClass('active')){
            $('.spoiler-trigger.active').parent().find('.spoiler-block').first().slideToggle(300);
            $('.spoiler-trigger.active').removeClass('active');
  }
  else{
            $('.spoiler-trigger.active').parent().find('.spoiler-block').first().slideToggle(300);
            $('.spoiler-trigger.active').removeClass('active');
            $(this).addClass('active');
            $(this).parent().find('.spoiler-block').first().slideToggle(300);  }
        })
    </script>

Ну и сам вид его, накидал обычно:

Код: Выделить всё

.spoiler-trigger {
    color: #830707;
    text-decoration: none;
    padding-left: 15px;
}

.spoiler-trigger.active {
    background: #830707;
    color: #fff;
    padding: 10px;
}

.spoiler-trigger {
    background: #243541;
    color: #fff;
    padding: 5px;
}

.spoiler-trigger:hover>span {}

.spoiler-block {
    height: 230px;
    display: none;
    position:absolute;
    z-index: 999;
    left:0;
    width: 100%;
        background: #830707;
    color: #fff;
}

.spoiler-block ul {
    display: -webkit-box;
}

.spoiler-block ul li {
    list-style-type: none;
    padding: 5px;
    background: #243541;
    color: #fff;
}

.filter-test {
    padding: 1px;
    float: left;
}

.padding-left {   
    padding: 10px 10px;
   
}
.filter-text-test{
    padding: 15px;
   
    font-size: 15px;
    top: 10px;
    position: relative
}
.clear{clear:both;}
.bg-filter{
    height: 85px;
    background-color: #f8f8f8;
    padding: 15px;
}
.bs-filter-left{
        float: left;
    width: 25%;
}



Если надо вывести так же БРЕНД:

Код: Выделить всё

{if $category->brands}
   
        <div class="filter-test">
            <a href="" class="spoiler-trigger">
                <span class="padding-left" data-language="{$translate_id['features_manufacturer']}">{$lang->features_manufacturer}</span>
            </a>
           
            <div class="spoiler-block">
           
                <div class="filter-text-test">
                    <div class="bx_filter_head">
                  {foreach $category->brands as $b}
                        <div class="bs-filter-left">
                         <input onchange="window.location.href='{furl params=[brand=>$b->url, page=>null]}'" type="checkbox"{if $brand->id == $b->id || $smarty.get.b && in_array($b->id,$smarty.get.b)} checked{/if}/>
                         <span class="c-indicator"></span>
                         {$b->name|escape}
                     </div>
                   {/foreach}
                   </div>
               </div>
            </div>
         
        </div>
   
{/if}


Есть один нюанс, если много свойств, то вылазят за рамку, думаю решится через CSS!!
:eh:

Casser
Casser
Репутация: 0
Сообщения: 56
Зарегистрирован: 07.01.2020
С нами: 4 года 2 месяца

Сообщение #2 Casser » 13.05.2020, 08:04

А этот код будет работать на версии 2.3.5 lite?


Название раздела: Полезные решения для OkayCMS
Правила раздела: faq.php?mode=okay

Быстрый ответ


Введите код в точности так, как вы его видите. Регистр символов не имеет значения.
Код подтверждения

   

Вернуться в «Полезные решения для OkayCMS»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 6 гостей