Как красиво переделать дефолтные фильтры woocommerce?

Question

[trenton]

Для красивых фильтров надо плагины ставить? Чтоб диапазон цены был рэйндж-ползунком, а трибут цвет выводился с кружочком или квадратиком этого цвета. Или есть код, как перепаять внешний вид дефолтных вукоммерсовских фильтров? Мне не к спеху, мне наоборот перековырять все и понять, длинные статьи изучать не лень, только подскажите хороший подробный материал, если знаете, можно и англоязычный. Не мой это путь - "быстро поставить плагин и не париться". Я даже плагин перековыряю вдоль и поперек.
Но мне же не космическое что-то добавлять. Диапазон цены и так дефолтно есть в вукоммерсовских фильтрах, всего-то html ему поменять на range.

Comments

[Артем Золин]

Вы можете посмотреть как сделан этот фильтр в дефолтноей теме storefront. На сколько я помню диапазон цен там задан именно рэйндж-ползунком

В качестве альтернативы можете посмотреть любые популярные фри-темы с поддержкой woocoomerce - найдете в каждой первой

[trenton]

как обычно - проблема оказалась совсем не там, где я думал. и как раз помогла фри-тема. у меня он был НЕВИДИМЫМ! из-за отключенных стилей вукоммерса....

Answer 1

[Семен Кузнецов]

У вас довольно неконкретный вопрос. Вы как бы спрашиваете, как починить машину, а вам нужно спросить более детально. Например: Как заменить поршневые кольца у двигателя такого то автомобиля.

То есть ответить на ваш вопрос можно примерно так: Нужно изучить php, js, wordpress и woocommerce. Но я так полагаю такой ответ вас не устроит.

Постараюсь ответить хотя бы как действовать без конкретных примеров)

Вам необходимо найти в своей теме шаблон, где выводятся фильтры, найти вывод фильтра range (ползунок). Далее подключаете этот прекрасный плагин - ionden.com/a/plugins/ion.rangeSlider и согласно его документации интегрируете в вашу тему.

Извиняюсь конечно, но если у вас будет более конкретный вопрос, постараюсь помочь, а пока только так)

Comments

[trenton]

Понимаю, какой вопрос - такой ответ, если я не знаю с чего начать. Попробую хоть с чего-то. Буду благодарен, если хоть направление подскажете(отличимое от того, которое просится на ум первым).
Тема самописная, на локалке и пока что для себя, так что мои эксперименты никому не навредят. Значит, что эти фильтры лежат в самом вукоммерсе. Судя по всему, это он - \themename\wp-content\plugins\woocommerce\includes\widgets\class-wc-widget-price-filter.php

И я теперь думаю, что это у меня что-то не так с отображением. По описанию он и должен быть range( * Generates a range slider to filter products by price), по разметке это должен быть ui-slider,значит и выглядеть должен вот так, как мне надо https://jqueryui.com/slider/#range

А у меня отображается минимальная и максимальная цена двумя текстовыми полями, при чем скрытыми, что не ввести самому значения, если не изменить стили. Стили поменять легко, но должно ли так быть, или это у меня что-то перебивает? У Вас этот виджет по умолчанию range или нет?

[Семен Кузнецов]

Я уже давно не работал с Wordpress и Woocommerce в частности. А так все правильно. Обычный фильтр range это и есть два текстовых поля. Числа min и max.

Внимательно посмотрите ссылку ionden.com/a/plugins/ion.rangeSlider или вашу https://jqueryui.com/slider/#range.

Вам по идее просто надо скрыть эти поля с числами и подключить range указав значения из этих полей. Как то так:

<div class="js-range-slider"></div>
<input name="min" id="min" style="display:none">
<input name="max" id="max" style="display:none">

$(".js-range-slider").ionRangeSlider({
        type: "double", // Двойной ползунок
        min: $("#min").val(), // Минимальное значение
        max: $("#max").val(),  // Максимальное значение
});

Пишу на память, поэтому не принимайте на веру проверьте доки. Там есть раздел get started где куча примеров