如何在Woocommerce中为特色产品修复自举机制 [英] How to fix bootstrap carousal for featured product in Woocommerce

问题描述

我尝试过为自己的woocommerce wordpress网站添加特色产品滑块功能的插件很少，但它们并未按我的预期工作，所以我尝试自行创建。除了显示根本不存在的其他帖子外，它几乎可以正常工作。它们甚至不作为产品存在。第一张图片显示了特色产品。第二张图片是根本不存在的额外内容。这种不必要的职位数等于特色产品总数的倍数。关于类似问题的建议几乎反映了我所做的一切，但是有问题。就我而言，我有5种特色产品，它显示25条不必要的帖子。目前，我尝试一次仅显示一个项目，解决此问题后，我一次将显示3个帖子，因此它循环播放两次，从而使6个帖子可以滑动。

I tried few plugins for having featured product slider carousal for my woocommerce wordpress site but they didn't work as i intended so i tried to create on my own. Its almost worked except that it is displaying additional posts that don't exist at all. They don't exist even as products. First picture shows the product that is featured. Second picture is extra content that don't exist at all. The number of such unnecessary posts is equal to the multiple of total number of featured products. Suggestion on similar question reflects almost what i have done but It have problems. In my case i have 5 featured products and it is displaying 25 unnecessary posts. Currently, i tried just to display one item at a time and after fixing this issue i will display 3 posts at a time so it loops twice giving 6 posts to slide.

<div id="featured" class="carousel slide ">
                            <div class="carousel-inner ">
                            <?php
                            $args = array( 'post_type' => 'product',
                                           'meta_key' => '_featured',
                                           'meta_value' => 'yes',
                                           'posts_per_page' => 8,
                                           'post_status'     => 'publish',
                                           'offset'          => 0,
                                           'numberposts'     => 6,
                                           //'orderby' =>'rand',
                                           'order' => 'DESC' 
                                           );
                            $featured_loop = new WP_Query( $args );
                            //echo "<pre>";
                            //print_r($featured_loop);
                            //echo "</pre>";

                            if ( $featured_loop->have_posts()){

                                $i = 1; $count;
                                for ($count=0; $count < 6;) { 

                                    foreach ( $featured_loop as $featured ) {
                                    $featured_loop->the_post();
                                    ?>
                                    <div class=
                                      <?php
                                        echo '"';
                                        echo 'item '; 
                                        if ($i == 1) {
                                          echo 'active';
                                        }

                                        echo '"';

                                        ?>>

                                        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 ">
                                                <div class="thumbnail">
                                                <i class="tag"></i>
                                                <a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                                <?php 

                                                    if (has_post_thumbnail( $featured->post->ID )){
                                                            echo get_the_post_thumbnail($featured->post->ID, 'shop_catalog');
                                                        }
                                                        else {
                                                        echo '<img width ="150" src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" class="img-responsive img-rounded" />';
                                                        }

                                                ?>
                                                </a>
                                                </div><!-- thumbnail -->
                                                <div class="panel-body text-center">
                                                        <h6><?php the_title(); ?> </h6>                         
                                                </div><!-- panel-body text-center -->

                                            </div><!-- col-xs-6 col-sm-4 col-md-4 col-lg-4 -->
                                        </div>
                                    <?php

                                    $i++;


                                    }
                                    $count++;

                                }

                            }


                            ?>








                                </div><!-- carousal item class ends -->


                            </div><!-- carousal inner ends -->
                            <a class="left carousel-control" href="#featured" data-slide="prev"><i class="fa fa-arrow-left"></i></a>
                            <a class="right carousel-control" href="#featured" data-slide="next"><i class="fa fa-arrow-right"></i></a>  

                            <?php wp_reset_postdata(); wp_reset_query(); ?>
                        </div><!-- carousel slide -->  

推荐答案

在@Sorin Gheata的帮助下进行解答。

Answering this with help from @Sorin Gheata. He forgot to make it work as bootstrap carousel.

<div id="featured" class="carousel slide ">
    <div class="carousel-inner ">
        <?php
        $args          = array(
            'post_type' => 'product',
        'meta_key' => '_featured',
        'meta_value' => 'yes',
        'numberposts'     => 6,
        'posts_per_page' => 6
        );
        $featured_loop = new WP_Query( $args );//global $product;
        if ( $featured_loop->have_posts() ):
            while ( $featured_loop->have_posts() ) : $featured_loop->the_post(); ?>
                                        <div class=
                                      <?php
                                        echo '"';
                                        echo 'item '; 
                                        if ($i == 1) {
                                          echo 'active';
                                        }

                                        echo '"';

                                        ?>>
                    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 ">
                        <div class="thumbnail">
                            <i class="tag"></i>
                            <a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                <?php echo woocommerce_get_product_thumbnail(); ?>
                            </a>
                        </div>
                        <div class="panel-body text-center">
                            <h6><?php the_title(); ?> </h6>
                        </div>
                    </div>
                </div>

            <?php  $i++; endwhile; ?>
            <a class="left carousel-control" href="#featured" data-slide="prev"><i class="fa fa-arrow-left"></i></a>
            <a class="right carousel-control" href="#featured" data-slide="next"><i class="fa fa-arrow-right"></i></a>
            <?php wp_reset_postdata(); endif; ?>
    </div>
</div>
<?php wp_reset_query(); ?>

这篇关于如何在Woocommerce中为特色产品修复自举机制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！