FacetWP + WooCommerce полезные примеры кода для двух популярных плагинов WordPress

Последнее обновление Сен 22, 2021

FacetWP + WooCommerce Вот несколько советов и указателей, которые могут оказаться полезными.

Чтобы настроить фильтр категорий товаров в виджете, сначала создайте свой фасет.

Не забудьте нажать кнопку переиндексации.

Чтобы отобразить фасет в интерфейсе, поместите его в виджет «Пользовательский HTML»:

Выше отображен пример реализации кнопки сброс фильтрации.

Дополнительный CSS для стилизации кнопки «Сбросить фильтры»:




body .facetwp-facet {<br>margin-bottom: 20px;<br>}

.facet-reset {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #555;
    background-color: #f7f7f7;
    box-shadow: 0 1px 0 #ccc;
    font-size: 13px;
    font-weight: normal;
    text-align: center;
    vertical-align: top;
}

.facet-reset:hover,
.facet-reset:focus {
    border-color: #999;
    color: #23282d;
    background-color: #fafafa;
}

Теперь вы можете заметить, что разбиение на страницы по умолчанию продолжает появляться, даже если в этом нет необходимости после нажатия на фильтр (категория продукта).

Чтобы исправить это, добавьте это в functions.php дочерней темы :




remove_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination' );

add_action( 'woocommerce_after_shop_loop', 'custom_woocommerce_pagination' );
/**
 * Add FacetWP's pagination on WooCommerce archives.
 */
function custom_woocommerce_pagination() {
    echo facetwp_display( 'pager' );
}

Если щелкнуть привязку нумерации страниц, поскольку FacetWP извлекает и отображает следующий набор продуктов с использованием Ajax, обновление страницы не будет. Это означает, что у пользователя высока вероятность того, что он увидит следующий набор продуктов, даже если он загружен вверху над окном просмотра. Чтобы решить эту проблему, мы можем использовать facetwp-loaded событие.

Создайте файл с именем say, wc.js в каталоге дочерней темы, js содержащий следующий код (спасибо Филипу Тигесену за то, что он поделился этим в Genesis Slack):

Замените .page-description на желаемый селектор, где щелчок должен прокрутить пользователя.

Загрузите вышеуказанный js-файл в архивы WooCommerce, добавив следующее в функцию, подключенную к wp_enqueue_scripts:


if ( is_shop() || is_product_taxonomy() ) {
    wp_enqueue_script( 'wc', get_stylesheet_directory_uri(). '/js/wc.js', array( 'jquery' ), CHILD_THEME_VERSION,     true );

}

Следующий шаг не является обязательным но он помогает вам оформить нумерацию страниц (которая теперь появляется только при необходимости), поэтому она выглядит как нумерация страниц Genesis.

Перед:

После:

( [Рабочая станция Pro][3] является активной темой в этом случае)

Вот как:



add_filter( 'facetwp_pager_html', 'custom_facetwp_pager', 10, 2 );

/**

* Style pagination to look like Genesis.

* @link https://halfelf.org/2017/facetwp-genesis-pagination/

* @param string $output The pager HTML.

* @param array $params Style pagination to look like Genesis.

*/

function custom_facetwp_pager( $output, $params ) {

$output = '</p>
<div class="archive-pagination pagination">
<ul>';

$page = (int) $params['page'];

$total_pages = (int) $params['total_pages'];
 // Only show pagination when > 1 page.

if ( 1 <a class="facetwp-page" data-page="' . ( $page - 1 ) . '">« Previous Page</a>

';

}

if ( 3 <a class="facetwp-page first-page" data-page="1">1</a>

';

$output .= ' <span class="dots">…</span> ';

}

for ( $i = 2; $i > 0; $i– ) {

if ( 0 <a class="facetwp-page" data-page="' . ($page - $i) . '">' . ($page – $i) . '</a>

';

}

}
 // Current page.

$output .= '</p>
<li class="active" aria-label="Current page"><a class="facetwp-page active" data-page="' . $page . '">' . $page . '</a></li>
<p>';
 for ( $i = 1; $i = ( $page + $i ) ) {

$output .= '</p>
<li><a class="facetwp-page" data-page="' . ($page + $i) . '">' . ($page + $i) . '</a></li>
<p>';

}

}

if ( $total_pages > ( $page + 2 ) ) {

$output .= ' <span class="dots">…</span> ';

$output .= '</p>
<li><a class="facetwp-page last-page" data-page="' . $total_pages . '">' . $total_pages . '</a></li>
<p>';

}

if ( $page <a class="facetwp-page" data-page="' . ( $page + 1 ) . '">Next Page »</a>

';

}

}
 $output .= '</p>
</ul>
</div>
<p>';
 return $output;

}

Источник записи: https://sridharkatakam.com