Swiper JS - How to call and use

[perks98]

Not sure if anyone knows about Elementor swiper JS library but currently trying to create a plugin that extends the Elementor Pro products widgets so it adds a control to convert it so it is a carousel. Got to a certain point but on the frontend it says the following error:

Uncaught ReferenceError: Swiper is not defined
    at HTMLDocument.<anonymous> ((index):876:55)
    at e (jquery.min.js:2:1)
    at t (jquery.min.js:2:1)

Below is my plugin code so far if anyone can make heads or tails of this issue:

<?php
/*
Plugin Name: LE - Product Carousel
Description: This plugin extends the Elementor Products widget by adding a product carousel feature.
Version: 1.0
Author: LE
*/

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

function inject_products_control( $element, $args ) {

	$element->start_controls_section(
		'section_carousel',
		[
			'label' => __( 'Carousel', 'le-prod' ),
		]
	);

	$element->add_control(
		'is_carousel_enabled',
		[
			'label' => __( 'Enable Carousel', 'le-prod' ),
			'type' => \Elementor\Controls_Manager::SWITCHER,
			'label_on' => __( 'Yes', 'le-prod' ),
			'label_off' => __( 'No', 'le-prod' ),
			'return_value' => 'yes',
			'default' => 'no',
		]
	);

	$element->end_controls_section();

}
add_action( 'elementor/element/woocommerce-products/section_content/before_section_start', 'inject_products_control', 10, 2 );

function change_products_widget_content( $widget_content, $widget ) {

	if ( 'woocommerce-products' === $widget->get_name() ) {
		$settings = $widget->get_settings();

		if ( 'yes' == $settings['is_carousel_enabled']  ) {
            $dom = new DOMDocument();
            $dom->preserveWhiteSpace = false;
            $dom->loadHTML(mb_convert_encoding($widget_content, 'HTML-ENTITIES', 'UTF-8'));
            
            $divElements = $dom->getElementsByTagName('div');
            foreach ($divElements as $div) {
                if (strpos($div->getAttribute('class'), 'woocommerce') !== false) {
                    $classes = explode(' ', $div->getAttribute('class'));
                    $classes = array_diff($classes, ['columns-4']);
                    $classes[] = 'columns-1 swiper swiper-prod-parent';
                    $div->setAttribute('class', implode(' ', $classes));
            
                    $additionalHtml = '<div class="swiper-pagination"></div>
                                        <div class="swiper-button-next"></div>
                                        <div class="swiper-button-prev"></div>
                                        <script>
                                            jQuery(document).ready(function($) {
                                                var swiper = new Swiper(".swiper-prod-parent", {
                                                    slidesPerView: 4,
                                                    spaceBetween: 10,
                                                    loop: true,
                                                    navigation: {
                                                        nextEl: ".swiper-button-next",
                                                        prevEl: ".swiper-button-prev",
                                                    },
                                                    pagination: {
                                                        el: ".swiper-pagination",
                                                        clickable: true,
                                                    },
                                                });
                                            });
                                        </script>';
                    $fragment = $dom->createDocumentFragment();
                    $fragment->appendXML($additionalHtml);
                    $div->appendChild($fragment);
            
                    break;
                }
            }
            
            $ulElements = $dom->getElementsByTagName('ul');
            foreach ($ulElements as $ul) {
                if (strpos($ul->getAttribute('class'), 'products') !== false) {
                    $classes = explode(' ', $ul->getAttribute('class'));
                    $classes = array_diff($classes, ['elementor-grid', 'columns-4']);
                    $classes[] = 'swiper-wrapper swiper-prod-wrapper';
                    $ul->setAttribute('class', implode(' ', $classes));
                    break;
                }
            }
            
            $liElements = $dom->getElementsByTagName('li');
            foreach ($liElements as $li) {
                if (strpos($li->getAttribute('class'), 'product') !== false) {
                    $classes = explode(' ', $li->getAttribute('class'));
                    $classes[] = 'swiper-slide';
                    $li->setAttribute('class', implode(' ', $classes));
                }
            }
            
            $widget_content = $dom->saveHTML();
		}
	}

	return $widget_content;

}
add_filter( 'elementor/widget/render_content', 'change_products_widget_content', 10, 2 );

Custom CSS:

.swiper-prod-wrapper {
    display: flex !important;
}

---

It works OK in the page editor but just not on the frontend.

[m1ga]

you have to either load swiper.js before your code. I'm doing with:

    public function get_script_depends()
    {
        wp_register_script(
            "swiper",
            ELEMENTOR_ASSETS_URL . "/lib/swiper/swiper.min.js",
            ["jquery"],
            false,
            true
        );
        return ["swiper", "my_script"];
    }

in a custom widget. Or wait with the JS in your code until swiper is loaded

[adampatterson]

Was this a change? I had a widget that was working fine for a few years and then broke.

This did fix the issue.

[michaelbourne]

Ditto. Appreciate you posting this.

[adampatterson]

I think in my case another dependency had changed and that caused the whole enqueuing chain to fail which stopped the loading of swiper.

I'd much rather WordPress keep loading all assets and let me see an actual error instead of simply not loading anything.

[perks98]

@m1ga thanks for the help you are a star 👍. I've managed to get it to work in the preview panel by adding:

function elementor_preview_swiper() {
wp_register_script("swiper",ELEMENTOR_ASSETS_URL . "lib/swiper/v8/swiper.min.js",["jquery"],false,true);
    wp_enqueue_script('swiper');

}
add_action( 'elementor/preview/enqueue_styles', 'elementor_preview_swiper' );

and added the same register script before $dom = new DOMDocument(); section.

2023-06-19.21-40-18.mp4

---

I am finally a step closer to a product carousel that will use and render the theme woocommerce product loop item style. I use Astra theme for more eCommerce sites as it can be a great base, but you get a lot of carousel product plugins where the design can be inconsistent and sometimes does not honour Woocommerce settings.

[m1ga]

very nice 👍 Looking good