用于在 WooCommerce 中追加销售产品的光滑滑块

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
    });
});

文件中的代码-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();

更新： 文件内容-产品-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

我建议您创建内容的副本-product.php 并根据需要重命名，例如content-product-carousel.php 在该文件中，您将创建光滑的滑块。但您需要在 up-sells.php

中更改以下行

wc_get_template_part( 'content', 'product' );

至

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

这是为了引用重复的文件。

Answer 2

您将代码放在错误的位置，slack 被多次初始化。你应该把“carousel”和“multiple-items”div放在循环外面，否则它会为每个元素初始化。正确的代码如下：

content-product.php - 默认，无需任何自定义

up-sells.php

    <section class="up-sells upsells products">
    <?php
    $heading = apply_filters( 'woocommerce_product_upsells_products_heading', __( 'You may also like&hellip;', 'woocommerce' ) );

    if ( $heading ) :
        ?>
        <h2><?php echo esc_html( $heading ); ?></h2>
    <?php endif; ?>
    <?php woocommerce_product_loop_start(); ?>
    <div class="carousel">
        <div class="multiple-items">
        <?php foreach ( $upsells as $upsell ) : ?>

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

            setup_postdata( $GLOBALS['post'] =& $post_object ); // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited, Squiz.PHP.DisallowMultipleAssignments.Found

            wc_get_template_part( 'content', 'product' );
            ?>

        <?php endforeach; ?>
        </div>
    </div>
    <?php woocommerce_product_loop_end(); ?>


</section>

用于在 WooCommerce 中追加销售产品的光滑滑块

Slick slider for up-sells products in WooCommerce

wordpress

woocommerce

slick.js