Woocommerce自定义产品滑块简码

问题描述

我正在研究类似于快照的woocommerce定制产品滑块简短代码，但是我不知道如何在woocommerce中使用滑块。 （https://www.buywholefoodsonline.co.uk/）

我的想法是使用简码从数据库中调用此最畅销的产品滑块。 我已经使用了这段代码（How can I list best selling products in woocommerce），但是没有得到相似的布局。

我想在某种滑块中找到适合此代码的方法。猫头鹰轮播（https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html）

我将owl.carousel的样式和脚本加入到functions.PHP中。

function loadup_scripts()
{
    wp_register_script('jquery','https://code.jquery.com/jquery-1.11.0.min.js',NULL,'1.11.0',false);

    wp_enqueue_script( 'jquery-migrate','http://code.jquery.com/jquery-migrate-1.2.1.min.js',array( 'jquery' ),'',true );
    wp_enqueue_script( 'slick-min-js','https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js',true );

    wp_enqueue_style( 'slick-css','https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css' );
}

add_action( 'wp_enqueue_scripts','loadup_scripts' );


function livewellnutritionuk_action() { ?>
    <script>
         jQuery(document).ready(function(){

         jQuery('.slider').slick({
          infinite: false,speed: 100,slidesToShow: 4,slidesToScroll: 4,autoplay: true,prevArrow: '<span class="priv_arrow">&lt;</span>',nextArrow: '<span class="priv_arrow">&gt;</span>',responsive: [
                {
                  breakpoint: 1024,settings: {
                    slidesToShow: 3,slidesToScroll: 3,infinite: true,dots: true
                  }
                },{
                  breakpoint: 600,settings: {
                    slidesToShow: 2,slidesToScroll: 2
                  }
                },{
                  breakpoint: 480,settings: {
                    slidesToShow: 1,slidesToScroll: 1
                  }
                }
             ]
            });
    });
    </script>
    <?PHP
}
add_action('wp_footer','livewellnutritionuk_action'); 

但是此代码中最畅销的产品需要安装猫头鹰旋转木马。

<?PHP
$args = array(
    'post_type' => 'product','Meta_key' => 'total_sales','orderby' => 'Meta_value_num','posts_per_page' => 1,);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); 
global $product; ?>
<div>
<a href="<?PHP the_permalink(); ?>" id="id-<?PHP the_id(); ?>" title="<?PHP the_title(); ?>">

<?PHP if (has_post_thumbnail( $loop->post->ID )) 
        echo get_the_post_thumbnail($loop->post->ID,'shop_catalog'); 
        else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="product placeholder Image" width="65px" height="115px" />'; ?>

<h3><?PHP the_title(); ?></h3>
</a>
</div>
<?PHP endwhile; ?>
<?PHP wp_reset_query(); ?>

解决方法

我一直在努力解决这个问题，现在我找到了解决方法。

function.php

function child_enqueue_styles() {

    wp_enqueue_style( 'astra-child-theme-css',get_stylesheet_directory_uri() . '/style.css',array('astra-theme-css'),CHILD_THEME_ASTRA_CHILD_VERSION,'all' );
  wp_enqueue_style('owl-carousel','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.carousel.min.css','','all');
   wp_enqueue_style('owl-carousel-2.1.6','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.theme.default.css','all');

   
   wp_enqueue_script('owl-js','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2//2.0.0-beta.2.4/owl.carousel.min.js',array('jquery'),'1.12.4',false);

}

add_action( 'wp_enqueue_scripts','child_enqueue_styles',15 );


function livewellnutritionuk_action() { ?>
    <script>
         jQuery(document).ready(function(){

         jQuery('.slider').slick({
          infinite: false,speed: 100,slidesToShow: 4,slidesToScroll: 4,autoplay: true,prevArrow: '<span class="priv_arrow">&lt;</span>',nextArrow: '<span class="priv_arrow">&gt;</span>',responsive: [
                {
                  breakpoint: 1024,settings: {
                    slidesToShow: 3,slidesToScroll: 3,infinite: true,dots: true
                  }
                },{
                  breakpoint: 600,settings: {
                    slidesToShow: 2,slidesToScroll: 2
                  }
                },{
                  breakpoint: 480,settings: {
                    slidesToShow: 1,slidesToScroll: 1
                  }
                }
             ]
            });
    });
    </script>
    <?php
}
add_action('wp_footer','livewellnutritionuk_action'); 

function slider_test(){
    ob_start();
      get_template_part('best_product');
    return ob_get_clean();
}
add_shortcode('best_seller','slider_test');

best_product.php

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<?php
$args = array(
    'post_type' => 'product','meta_key' => 'total_sales','orderby' => 'meta_value_num',);
$loop = new WP_Query( $args );
echo '<div class="owl-carousel">';
while ( $loop->have_posts() ) : $loop->the_post(); 
global $product; ?>
<div>
<a href="<?php the_permalink(); ?>" id="id-<?php the_id(); ?>" title="<?php the_title(); ?>">

<?php if (has_post_thumbnail( $loop->post->ID )) 
        echo get_the_post_thumbnail($loop->post->ID,'shop_catalog'); 
        else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="product placeholder Image" width="65px" height="115px" />'; ?>
<h3 class="woocommerce-loop-product__title"><?php the_title();?></h3>
</a>
<h4><?php echo woocommerce_price($product->get_price());?></h4>
<div class="best_seller_button">
<a href="<?php echo home_url(); ?>?add-to-cart=<?php echo get_the_ID() ?>" class="yellow-but">Add to Basket</a>
</div>
<div class="stock_status">
    <div class="status_in_stock"> <?php echo $product->get_stock_status();?></div>
     
    <div class="star-rating"> <?php echo $product->get_average_rating();?></div>'

    </div>
    
</div>
<?php endwhile; 
echo '</div>';
?>
<?php wp_reset_query(); ?>
<style>
      .owl-item > div:after {
        font-family: sans-serif;
        font-size: 24px;
        font-weight: bold;
      }
      
.owl-theme .owl-controls .owl-nav [class*='owl-']{
    background: #8bc34a;
    padding: 0px 8px;
}
  </style>
    <script>
     jQuery(document).ready(function () {
      var owl = jQuery('.owl-carousel');
owl.owlCarousel({
    loop:true,nav:true,arrows: true,margin:10,navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],responsive:{
        0:{
            items:1
        },600:{
            items:3
        },960:{
            items:4
        },1200:{
            items:4
        }
    }

});
owl.on('mousewheel','.owl-stage',function (e) {
    if (e.deltaY>0) {
        owl.trigger('next.owl');
    } else {
        owl.trigger('prev.owl');
    }
    e.preventDefault();
});
     });
    </script>