Błąd rozwijanej listy przy odświeżaniu (nawigacja fasetowa)

[lakinotris]

Cześć, zwykle udaje mi się rozwiązać problemy jakie mam ale coś mi nie idzie na razie. W każdym razie chciałem wprowadzić parę zmian w nawigacji fasetowej. Zależy mi na tym by używać checkboxów ale schowanych na liście rozwijanej. O ile przypięcie nawigacji do topu nie jest problemem to problem pojawia się przy rozwijaniu listy. W momencie gdy zaznaczę checkbox ,skrypt odświeża listę produktów tak jak jest to wbudowane. Jednak po tym odświeżeniu fragmentu nie da się już tej listy z jakiegoś powodu rozwinąć. Trzeba by odświeżyć całą stronę. Myślałem by zamiast nadawania klasy active wykorzystać skrypt funkcji open znajdujący się już w preście natomiast on działa tak, że po kliknięciu zamyka listy, a chcę osiągnąć dynamiczny efekt tak jak jest to teraz. Użytkownik może dowolnie rozwijać wybrane listy. Chciałem też by po tym odświeżeniu listy produktów nie zamykał tych list znowu i było to w pełni zależne od użytkownika.  Link do strony tutaj
Podaję poniżej przerobiony fragment z nawigacji fasetowej oraz skrypt js, który steruje rozwijaną listą. Zainstalowania presta to wersja 1.7.6.7

  {if $facet.widgetType !== 'dropdown'}

            {block name='facet_item_other'}

			<div class="col-sm-12 col-xs-12 col-md-12 facet-dropdown dropdown sekcjafiltrowanieroot">
			
			
<button class="sekcjafiltrowanie"
   
<p class="h6 facet-title">{$facet.label}</p>
<i class="material-icons float-xs-right">&#xE5C5;</i>
</button>
					  
<div class="sekcjafiltrowanie_content">
			
              <ul id="facet_{$_expand_id}" class="dropdown_content_filter collapse{if !$_collapse} in{/if}">
                {foreach from=$facet.filters key=filter_key item="filter"}
                {if !$filter.displayed}
                  {continue}
                {/if}
                    <li>
                      <label class="facet-label{if $filter.active} active {/if}" for="facet_input_{$_expand_id}_{$filter_key}">
                        {if $facet.multipleSelectionAllowed}
                          <span class="custom-checkbox">
                            <input
                              id="facet_input_{$_expand_id}_{$filter_key}"
                              data-search-url="{$filter.nextEncodedFacetsURL}"
                              type="checkbox"
                              {if $filter.active } checked {/if}
                            >
                            {if isset($filter.properties.color)}
                              <span class="color" style="background-color:{$filter.properties.color}"></span>
                              {elseif isset($filter.properties.texture)}
                                <span class="color texture" style="background-image:url({$filter.properties.texture})"></span>
                              {else}
                              <span {if !$js_enabled} class="ps-shown-by-js" {/if}><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
                            {/if}
                          </span>
                        {else}
                          <span class="custom-radio">
                            <input
                              id="facet_input_{$_expand_id}_{$filter_key}"
                              data-search-url="{$filter.nextEncodedFacetsURL}"
                              type="radio"
                              name="filter {$facet.label}"
                              {if $filter.active } checked {/if}
                            >
                            <span {if !$js_enabled} class="ps-shown-by-js" {/if}></span>
                          </span>
                        {/if}


                        <a
                          href="{$filter.nextEncodedFacetsURL}"
                          class="_gray-darker search-link js-search-link"
                          rel="nofollow"
                        >
                          {$filter.label}
                          {if $filter.magnitude}
                            <span class="magnitude">({$filter.magnitude})</span>
                          {/if}
                        </a>
                      </label>
                    </li>
                {/foreach}
              </ul>
			  </div></div>
			  
			  
            {/block}

$(document).ready(function() {
var coll = document.getElementsByClassName("sekcjafiltrowanie");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
};})

 

Edited September 9, 2020 by lakinotris (see edit history)