Slick Carousel not displaying properly

Viewed 70

I am trying to show product recommendations in a slick carousel. But the products are just showing in a list and not displaying in a carousel.

The carousel displays correctly on the cart page, but not on the product page. The only difference between the pages is the product page is cached using a caching plugin and the cart page is not.

Woocommerce version 4.8.0

No javascript errors, jquery migrate installed.

Please see code below

if (!defined('ABSPATH')) {
    exit;
}

if ( $deployment && $products ) : ?>

<section class="related products">
    <div class="container py-5 my-md-3">

        <?php if ( ! empty( $deployment->get_title() ) ): ?>
            <h3 class="text-center pb-4"><?php echo esc_html( $deployment->get_title() ); ?></h3>
        <?php endif; ?>

        <?php if ( ! empty( $deployment->get_description() ) ): ?>
            <div><?php echo $deployment->get_description( true ); ?></div>
        <?php endif; ?>
<?php
$dots= false;
$slidesToShow = 4;
$defaults = apply_filters( 'cartzilla_related_products_carousel_args', array(
    'carousel_args' => array(
        'slidesToShow' => apply_filters('cartzilla_related_products_slide_count', $slidesToShow),
        'slidesToScroll' => 1,
        'infinite' => false,
        'autoplay' => false,
        'arrows' => true,
        'dots' => apply_filters( 'cartzilla_related_products_dots', $dots ),
        'responsive' => array(
            array(
                'breakpoint'    => 0,
                'settings'      => array(
                    'slidesToShow'      => 1,
                    'slidesToScroll'    => 1
                )
            ),
            array(
                'breakpoint' => 576,
                'settings' => array(
                    'slidesToShow' => 1,
                    'slidesToScroll' => 1
               )
           ),
           array(
               'breakpoint' => 768,
               'settings' => array(
                   'slidesToShow' => 2,
                   'slidesToScroll' => 2
               )
           ),
           array(
               'breakpoint' => 992,
               'settings' => array(
                   'slidesToShow'      => 3,
                   'slidesToScroll'    => 3
               )
           ),
           array(
               'breakpoint' => 1200,
               'settings' => array(
                   'slidesToShow'      => 4,
                   'slidesToScroll'    => 4
               )
           )
       ),
    )
) );

$args = wp_parse_args( $args, $defaults );

if( is_rtl() ) {
    $args['carousel_args']['rtl'] = true;
    if( isset( $args['carousel_args']['prevArrow'] ) && isset( $args['carousel_args']['nextArrow'] ) ) {
        $carousel_args_temp_arrow = $args['carousel_args']['prevArrow'];
        $args['carousel_args']['prevArrow'] = $args['carousel_args']['nextArrow'];
        $args['carousel_args']['nextArrow'] = $carousel_args_temp_arrow;
    }
 }

?>
<div class="products-carousel-wrap related-product-carousel" data-ride="ct-slick-carousel" data-wrap=".products" data-slick="<?php echo esc_attr( json_encode( $args['carousel_args'] ), ENT_QUOTES, 'UTF-8' ); ?>">
    <?php woocommerce_product_loop_start(); ?>
    <?php foreach ( $products as $product ) : ?>
    <?php
        $post_object = get_post( $product );

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

        wc_get_template_part( 'content', 'product' );
    ?>
    <?php endforeach; ?>
    <?php woocommerce_product_loop_end(); ?>
</div>
</div>
</section>
<?php endif;

wp_reset_postdata();
0 Answers
Related