Фильтр товаров без кнопки

[andriy_gritsyuk]

Всем привет!
Помогите пожалуйста решить проблему над которой бьюсь уже несколько дней. Суть в следующем: есть сайт на базе ocStore-3.0.3.7 со стандартным шаблоном. В нем нужно сделать фильтр товаров как здесь https://www.reviderm.pl/klient-indywidualny/produkty. Т.е. фильтрация должна происходить по введенном названии https://prnt.sc/T3eaPnOWAgjv, а также при нажатии на определенный пункт из внесенных фильтров https://prnt.sc/vvYqVeAOCT_M. Все это должно происходить сразу после ввода/нажатия на пункт без использования кнопки https://prnt.sc/NX2GusfIMRDC и перезагрузки страницы. При этом выбранные значения фильтров должны показываться как здесь https://prnt.sc/x8VtwsvUk4JU, а количество товаров должно автоматически менятся здесь https://prnt.sc/cIC4xm7S42Nv.

 

Пробовал сделать вывод результатов фильтра по названию с помощью javascript, но он почему-то не работает. Вот код файла filter.twig:

 

<div class="panel panel-default">
  <input type="text" id="filter-name">
  <div>{{ results }}</div>
  <div class="list-group"> {% for filter_group in filter_groups %} <a class="list-group-item">{{ filter_group.name }}</a>
    <div class="list-group-item">
      <div id="filter-group{{ filter_group.filter_group_id }}">{% for filter in filter_group.filter %}
        <div class="checkbox">
          <label>{% if filter.filter_id in filter_category %}
            <input type="checkbox" name="filter[]" value="{{ filter.filter_id }}" checked="checked" />
            {{ filter.name }}
            {% else %}
            <input type="checkbox" name="filter[]" value="{{ filter.filter_id }}" />
            {{ filter.name }}
            {% endif %}</label>
        </div>
        {% endfor %}</div>
    </div>
    {% endfor %}</div>
  <div class="panel-footer text-right">
    <button type="button" id="button-filter" class="btn btn-primary">{{ button_filter }}</button>
  </div>
</div>
<script type="text/javascript">
let filter = function () {
	let input = document.getElementById(elementid: 'filter-name');
	input.addEventListener(type: 'keyup', listener: function (){
		let filter = input.value.toLowerCase(),
			filterElements = document.querySelectorAll(selectors: '.product-title');
		filterElements.forEach (callbackfn: item =>{
			if(item.innerHTML.toLowerCase().indexOf(filter) > -1) {
				item.style.display = '';
			} else {
				item.style.display = 'none';
			}
		})	
	})
}
</script>

 

Файл category.twig:
 

{{ header }}
<div id="product-category" class="container">
  <div class="row">{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
      {% if thumb or description %}
      <div class="row"> {% if thumb %}
        <div class="col-sm-2"><img src="{{ thumb }}" alt="{{ heading_title }}" title="{{ heading_title }}" class="img-thumbnail" /></div>
        {% endif %}
        {% if description %}
        <div class="col-sm-10">{{ description }}</div>
        {% endif %}</div>
      <hr>
      {% endif %}
      {% if categories %}
      <h3>{{ text_refine }}</h3>
      {% if categories|length <= 5 %}
      <div class="row">
        <div class="col-sm-3">
          <ul>
            {% for category in categories %}
            <li><a href="{{ category.href }}">{{ category.name }}</a></li>
            {% endfor %}
          </ul>
        </div>
      </div>
      {% else %}
      <div class="row">{% for category in categories|batch((categories|length / 4)|round(1, 'ceil')) %}
        <div class="col-sm-3">
          <ul>
            {% for child in category %}
            <li><a href="{{ child.href }}">{{ child.name }}</a></li>
            {% endfor %}
          </ul>
        </div>
        {% endfor %}</div>
      <br />
      {% endif %}
      {% endif %}
      {% if products %}
      
	<div class="row"> {% for product in products %}
		<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
			<div class="product-thumb transition">
					<div class="image">
						<a href="{{ product.href }}">
							<img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" />
						</a>
					</div>
				<div class="caption"></div>
				<div class="new-prod-desc">
					<a class="product-title" href="{{ product.href }}">{{ product.name }}</a>
					<a class="cat-prod" href="#">Zobacz Produkt</a>
					{% if product.price %}
						<p class="price"> 
							{% if not product.special %}
								{{ product.price }}
							{% else %} 
								<p class="price">{{ product.special }}</p> 
							{% endif %} 
						</p>
					{% endif %} 
				</div>
			</div>
		</div>
	{% endfor %} </div>
      <div class="row">
        <div class="col-sm-6 text-left">{{ pagination }}</div>
      </div>
      {% endif %}
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>
{{ footer }} 

 

Может кто помочь разобраться с этим?

[spectre]

28.03.2023 в 16:59, andriy_gritsyuk сказал:

разобраться с этим?

 

Разобраться с чем именно? Сделать за вас аякс-фильтр?)

[andriy_gritsyuk]

К сожалению я не силен в javascript и сам точно не справлюсь. Поэтому буду очень благодарен за любую помощь в создании такого фильтра. Я пробовал разные модули, но единственное что удалось сделать фильтр на аяксе  с кнопкой. Но такой вариант мне не подходит

[spectre]

28.03.2023 в 18:24, andriy_gritsyuk сказал:

и сам точно не справлюсь

 

вам в отдел услуг но приготовьтесь к тому что это будет недешево

[andriy_gritsyuk]

28.03.2023 в 18:38, spectre сказал:

 

вам в отдел услуг но приготовьтесь к тому что это будет недешево

А можете хотя бы подсказать как избавиться от кнопки? Сейчас установлено "Ajax стандартный фильтр", который убрал перезагрузку страницы и часть проблемы вроде как убирает.  И почему не происходит фильтрация по названию? Если тестировать на простой html-странице, то все работает

[buslikdrev]

28.03.2023 в 18:45, andriy_gritsyuk сказал:

А можете хотя бы подсказать как избавиться от кнопки?

установить стиль на кнопку
button#button-filter {

display: none;

}

[andriy_gritsyuk]

28.03.2023 в 19:25, buslikdrev сказал:

установить стиль на кнопку
button#button-filter {

display: none;

}

Как ее отключить в стилях или шаблоне я знаю. Мне нужно сделать так чтобы фильтрация происходила без нее. Т.е. кликнул на пункт фильтра и тебе показались нужные товары

[buslikdrev]

28.03.2023 в 19:49, andriy_gritsyuk сказал:

Как ее отключить в стилях или шаблоне я знаю.

В разделе услуг знают.