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