Question

我需要为转售产品制作转盘。为此，我使用slick-slider。

脚本连接：

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick.css"/>

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick-theme.css"/>

<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick.min.js"></script>

脚本初始化：

$(document).ready(function() {     

    $('.multiple-items').slick({
        infinite: true,
        autoplay: true,
        slidesToShow: 4,
        slidesToScroll: 4
    });
});

up-sells.php文件中的代码：

if ( $upsells ) : ?>

<section class="up-sells upsells products">

    <h2><?php esc_html_e( 'You may also like&hellip;', 'woocommerce' ); ?></h2>

    <?php woocommerce_product_loop_start(); ?>

        <?php foreach ( $upsells as $upsell ) : ?>

            <?php
                $post_object = get_post( $upsell->get_id() );

                setup_postdata( $GLOBALS['post'] =& $post_object );

                wc_get_template_part( 'content', 'product-carousel' );

        <?php endforeach; ?>

    <?php woocommerce_product_loop_end(); ?>

</section>

<?php endif;

wp_reset_postdata();

更新：文件content-product-carousel.php：

<div class="carousel"><div class="multiple-items">
    <div <?php post_class( $classes ); ?>>
        <?php
            do_action( 'woocommerce_before_shop_loop_item' );
            do_action( 'woocommerce_before_shop_loop_item_title' );
            do_action( 'woocommerce_shop_loop_item_title' );
            do_action( 'woocommerce_after_shop_loop_item_title' );
            do_action( 'woocommerce_after_shop_loop_item' );
        ?>
   </div>  
</div></div>

CSS：

.slick-slider {width: 100%; float: left;}
.slick-slide {cursor: pointer;}
.multiple-items .slick-slide {margin: 0 15px;}
.carousel {padding: 0 3%; float: left; width: 100%; box-sizing: border-box;}

很遗憾，我无法制作产品轮播。产品显示在一列中，并且滑块脚本不起作用。我需要你的帮助。如何使轮播产品追加销售？

Answer 1

我建议您创建content-product.php的副本并将其重命名为任意名称，例如在该文件中的content-product-carousel.php中，您将创建漂亮的滑块。但您需要在upsells.php中更改以下行

wc_get_template_part( 'content', 'product' );

到

wc_get_template_part( 'content', 'product-carousel' );

这是引用重复的文件。

WooCommerce中用于向上销售产品的平滑滑块

1 个答案: