时间戳

首页 > 解决方案 > WooCommerce 中用于追加销售产品的光滑滑块

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

问题描述

我需要为向上销售的产品制作一个轮播。为此，我使用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();

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

不幸的是，我无法制作产品轮播。产品显示在一列中，滑块脚本不想工作。我需要你的帮助。如何使轮播产品向上销售？

标签： wordpresswoocommerceslick.js

解决方案

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

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>

推荐阅读