css Woocommerce产品类别作为选项卡

lstz6jyr 于 2022-12-24 发布在其他

关注(0)|答案(2)|浏览(151)

我写了一个函数，它显示我的woocommerce产品类别作为标签和相关产品作为标签内容。

`<?php
$product = wc_get_product( $post->ID );
if ( has_post_thumbnail( $product->id ) ) {
    $attachment_ids[0] = get_post_thumbnail_id( $product->id );
        $attachment = wp_get_attachment_image_src($attachment_ids[0], 'full' );
}
$categories = get_terms( array(
    'taxonomy' => 'product_cat',
    'hide_empty' => false,
) );

echo '<div class="tabs-container">';
echo '<ul class="tabs">';
foreach ( $categories as $category ) {
    echo '<li class="tab"><a href="#' . $category->slug . '">' . $category->name . '</a></li>';
}
echo '</ul>';

foreach ( $categories as $category ) {
    $args = array(
        'post_type' => 'product',
        'tax_query' => array(
            array(
                'taxonomy' => 'product_cat',
                'field' => 'slug',
                'terms' => $category->slug,
            ),
        ),
    );
    $query = new WP_Query( $args );

    echo '<div id="' . $category->slug . '" class="tab-content car">';
    while ( $query->have_posts() ) {
        $query->the_post(); 
        echo '<div class="post-cont">';
        if ( has_post_thumbnail( $product->id ) ) {
            $attachment_ids[0] = get_post_thumbnail_id( $product->id );
                $attachment = wp_get_attachment_image_src($attachment_ids[0], 'full' ); ?>
        <img src="<?php echo $attachment[0] ; ?>" class="card-image"  />
        <?php } ?> <br>
        <div class="post-details">
                    <div class="post-title">
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                        
                    </div>
                    <div class="shop-button-cont">
                        <div class="shop-button"><?php echo '<a href="'.get_permalink( $post->ID ).' ">Shop Now</a>'; ?></div>
                        <div class="sale-prise">
                          <?php echo $price = get_post_meta( get_the_ID(), '_sale_price', true);?>
                        </div>
                    <div class="reg-prise">
                        <?php echo $sale = get_post_meta( get_the_ID(), '_regular_price', true); ?>
                    </div>
                    </div>
                    
                </div><?php
        echo '</div>';
        
    }
    echo '</div>';
}
echo '</div>';
wp_reset_postdata();
?>

<script>document.addEventListener("DOMContentLoaded", function() {
var tabs = document.querySelectorAll(".tabs li");
var tabContents = document.querySelectorAll(".tab-content");

tabs.forEach(function(tab) {
tab.addEventListener("click", function() {
var tabId = this.querySelector("a").getAttribute("href");
tabContents.forEach(function(content) {
content.style.display = "none";
});
document.querySelector(tabId).style.display = "flex";
tabs.forEach(function(tab) {
tab.classList.remove("active");
});
this.classList.add("active");
});
});
});</script>

'
但当我们加载页面所有的选项卡都关闭，但我想添加一个选项卡，显示所有的产品，并在默认情况下是活动的，当页面加载.有什么办法来实现这一点？如果你想改变整个功能与一个更好的功能比它也是受欢迎的

css

来源：https://stackoverflow.com/questions/74906327/woocommerce-product-categories-as-tabs

2条答案

按热度按时间

dohp0rv51#

您可以在PHP中的一个li标签上添加'active'类。

echo '<div class="tabs-container">';
echo '<ul class="tabs">';
foreach ( $categories as $category ) {
    $active_class = ( $category->slug === 'first-category' ) ? 'active' : '';
    echo '<li class="tab ' . $active_class . '"><a href="#' . $category->slug . '">' . $category->name . '</a></li>';
}
echo '</ul>';

或者可以在加载页面之后使用JavaScript添加活动类。

// Get the list of tabs
var tabsList = document.querySelector('.tabs');

// Get the first tab
var firstTab = tabsList.firstElementChild;

// Add the "active" class to the first tab
firstTab.classList.add('active');

赞(0）回复(0）举报 2022-12-24

kgsdhlau2#

要在加载页面时默认激活标签，可以将类“active”添加到相应的<li>元素中，下面是一个示例：

echo '<div class="tabs-container">';
echo '<ul class="tabs">';
echo '<li class="tab active"><a href="#all">All</a></li>';
foreach ( $categories as $category ) {
    echo '<li class="tab"><a href="#' . $category->slug . '">' . $category->name . '</a></li>';
}
echo '</ul>';

echo '<div id="all" class="tab-content car">';
// Query and display all products here
echo '</div>';

foreach ( $categories as $category ) {
    $args = array(
        'post_type' => 'product',
        'tax_query' => array(
            array(
                'taxonomy' => 'product_cat',
                'field' => 'slug',
                'terms' => $category->slug,
            ),
        ),
    );
    $query = new WP_Query( $args );

    echo '<div id="' . $category->slug . '" class="tab-content car">';
    while ( $query->have_posts() ) {
        $query->the_post(); 
        // Display products for this category here
    }
    echo '</div>';
}
echo '</div>';
wp_reset_postdata();

这将在选项卡列表的开头添加一个新的选项卡，标签为“All”，ID为“all”，对应的选项卡内容将显示所有产品，默认情况下“active”类将添加到“All”选项卡中，因此在页面加载时将突出显示为active选项卡。
您还需要修改JavaScript代码来处理“All”选项卡。您可以通过在单击“All”选项卡时将tabId变量更改为#all来完成此操作：

tabs.forEach(function(tab) {
tab.addEventListener("click", function() {
var tabId = this.querySelector("a").getAttribute("href");
if (tabId === "#all") {
    tabContents.forEach(function(content) {
        content.style.display = "none";
    });
} else {
    tabContents.forEach(function(content) {
        content.style.display = "none";
    });
    document.querySelector(tabId).style.display = "flex";
}
tabs.forEach(function(tab) {
tab.classList.remove("active");
});
this.classList.add("active");
});
});

这将确保“All”选项卡正确突出显示，并且在单击“All”选项卡时隐藏所有选项卡内容。

赞(0）回复(0）举报 2022-12-24

我来回答

css Woocommerce产品类别作为选项卡

2条答案

相关问题

热门标签

最新问答