Якорные ссылки в виджете категорий WooCommerce

Question

Я использую код, который отображает товары в каждой категории на странице архива / магазина:

Категория 1

продукт 1 продукт 2 продукт 3

Категория 2

product 1 product 2 product 3

Вот мой код:

<?php
foreach( get_terms( array( 'taxonomy' => 'product_cat' ) ) as $category ) :
    $products_loop = new WP_Query( array(
        'post_type' => 'product',

        'showposts' => -1,

        'tax_query' => array_merge( array(
            'relation'  => 'AND',
            array(
                'taxonomy' => 'product_cat',
                'terms'    => array( $category->term_id ),
                'field'   => 'term_id'
            )
        ), WC()->query->get_tax_query() ),

        'meta_query' => array_merge( array(

            // You can optionally add extra meta queries here

        ), WC()->query->get_meta_query() )
    ) );

?>
    <h2 class="category-title"><?php echo $category->name; ?></h2>

    <?php
    while ( $products_loop->have_posts() ) {
        $products_loop->the_post();
        /**
         * woocommerce_shop_loop hook.
         *
         * @hooked WC_Structured_Data::generate_product_data() - 10
         */
        do_action( 'woocommerce_shop_loop' );
        wc_get_template_part( 'content', 'product' );
    }
    wp_reset_postdata(); ?>
<?php endforeach; ?>

Я также использую стандартный виджет для отображения категорий WooCommerce. Насколько я понимаю, за это отвечает файл - woocommerce / includes / widget / class-w c -widget-product-Categories. php.

Как я могу изменить этот файл (код для функции. php) добавить якорные ссылки? Например, в меню категорий я выбираю категорию 2, и страница переходит к категории 2 с ее продуктами.

Я просто не могу найти готовое решение, поэтому я прошу вас о помощи. Надеюсь, этот код будет полезен другим пользователям.

Answer 1

Вам нужно добавить немного javascript и добавить атрибут «data-link» с href для термина категории в вашем коде

<h2 class="category-title" data-link="<?php echo get_term_link( (int) $category->term_id, 'product_cat' ); ?>"><?php echo $category->name; ?></h2>

Я создал фрагмент, чтобы продемонстрировать:

$('.product-categories .cat-item > a').on('click', function(e) {
  e.preventDefault();
  var href = $(this).attr('href');
  $('html, body').animate({
    scrollTop: $("[data-link='" + href + "']").offset().top
  }, 1000);
});

.left {
  float: left;
  width: 50%;
}
.right {
  float: right;
  width: 50%;
}

.category-wrapper {
  height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left">
  <ul class="product-categories">
    <li class="cat-item">
      <a href="http://category1">Category 1</a>
    </li>
    <li class="cat-item">
      <a href="http://category2">Category 2</a>
    </li>
  </ul>
</div>
<div class="right">
  <div class="category-wrapper">
    <h2 class="category-title" data-link="http://category1">Category 1</h2>
  </div>

  <div class="category-wrapper">
    <h2 class="category-title" data-link="http://category2">Category 2</h2>
  </div>
</div>