FacetWP + WooCommerce trong Genesis

Bạn đang tìm cách triển khai FacetWP trên các kho lưu trữ WooCommerce như trang Shop chính trong Genesis?

Dưới đây là một số mẹo và gợi ý mà bạn có thể thấy hữu ích.

Để thiết lập bộ lọc Danh mục sản phẩm trong một tiện ích, trước tiên hãy tạo khía cạnh của bạn.

Đừng quên nhấn nút Re-index.

Để hiển thị khía cạnh trên giao diện người dùng, hãy đặt nó trong tiện ích HTML tùy chỉnh:

[facetwp facet="product_categories"]

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

CSS tùy chọn để tạo kiểu cho nút Đặt lại bộ lọc:

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

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

Bây giờ bạn có thể nhận thấy rằng phân trang mặc định tiếp tục xuất hiện ngay cả khi không cần thiết sau khi bạn đã nhấp vào một bộ lọc (danh mục sản phẩm).

Để khắc phục, hãy thêm điều này vào functions.php của chủ đề con :

// Remove default WooCommerce pagination.
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' );
}

Khi một liên kết phân trang được nhấp vào, vì FacetWP tìm nạp và hiển thị bộ sản phẩm tiếp theo bằng Ajax, nên sẽ không có làm mới trang. Điều này có nghĩa là có nhiều khả năng người dùng chờ xem bộ sản phẩm tiếp theo ngay cả khi họ đã tải lên ở trên cùng, phía trên chế độ xem. Để giải quyết vấn đề này, chúng ta có thể sử dụng sự kiện.facetwp-loaded

Tạo một tệp có tên say, wc.js trong js thư mục của chủ đề con có mã sau (cảm ơn Philip Thygesen đã chia sẻ tệp này trong 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);
            }
        }
    });

});

Thay thế bằng bộ chọn mong muốn của bạn nơi nhấp chuột sẽ cuộn người dùng đến..page-description

Tải tệp js ở trên vào kho lưu trữ WooCommerce bằng cách thêm phần sau vào một hàm được nối với 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 );
}

Bước tiếp theo là tùy chọn và giúp bạn tạo kiểu phân trang (giờ chỉ xuất hiện khi cần thiết) để nó trông giống như phân trang Genesis.

(Workstation Pro là chủ đề hoạt động trong trường hợp này)

Đây là cách thực hiện:

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 = '<div class="archive-pagination pagination"><ul>';
    $page = (int) $params['page'];
    $total_pages = (int) $params['total_pages'];

    // Only show pagination when > 1 page.
    if ( 1 < $total_pages ) {

        if ( 1 < $page ) {
            $output .= '<li><a class="facetwp-page" data-page="' . ( $page - 1 ) . '">« Previous Page</a></li>';
        }
        if ( 3 < $page ) {
            $output .= '<li><a class="facetwp-page first-page" data-page="1">1</a></li>';
            $output .= ' <span class="dots">…</span> ';
        }
        for ( $i = 2; $i > 0; $i-- ) {
            if ( 0 < ( $page - $i ) ) {
                $output .= '<li><a class="facetwp-page" data-page="' . ($page - $i) . '">' . ($page - $i) . '</a></li>';
            }
        }

        // Current page.
        $output .= '<li class="active" aria-label="Current page"><a class="facetwp-page active" data-page="' . $page . '">' . $page . '</a></li>';

        for ( $i = 1; $i <= 2; $i++ ) {
            if ( $total_pages >= ( $page + $i ) ) {
                $output .= '<li><a class="facetwp-page" data-page="' . ($page + $i) . '">' . ($page + $i) . '</a></li>';
            }
        }
        if ( $total_pages > ( $page + 2 ) ) {
            $output .= ' <span class="dots">…</span> ';
            $output .= '<li><a class="facetwp-page last-page" data-page="' . $total_pages . '">' . $total_pages . '</a></li>';
        }
        if ( $page < $total_pages ) {
            $output .= '<li><a class="facetwp-page" data-page="' . ( $page + 1 ) . '">Next Page »</a></li>';
        }
    }

    $output .= '</ul></div>';

    return $output;
}