«
»
FacetWPWoocommerceWordPressПлагины

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

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

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

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

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

Copy to clipboard

<button value="Reset" onclick="FWP.reset()" class="facet-reset" ></button>Reset Filters</button>

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

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

Copy to clipboard

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; }

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

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

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

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

Copy to clipboard

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):

jQuery(function($){ $(document).on('facetwp-loaded', function() { if (FWP.loaded ) { if (FWP.settings.pager.page > 1) { $('html, body').animate({ scrollTop: $('.page-description').offset().top }, 500); } } }); });

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

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

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

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

Перед:

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

После:

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

( [Рабочая станция 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

Связанные записи
PageSpeed InsightsWordPressПанели управления

Как повысить производительность WordPress - советы от Plesk

LinuxWEBWordPressПанели управления

Как уменьшить нагрузку на сервер и повысить скорость WordPress с помощью Memcached | Форум Plesk

WordPress

WordPress 5.5 - 20 новых функций и много улучшений. Что нового в WP.

WordPressПлагины

Плагин Pinterest Automatic Pin Wordpress от ValvePress (авто постинг в Pinterest на автомате)