Почему не работает Magnific popup на сайте WooCommerce?

Помогите понять почему не работает модальное окно magnific popup на странице товара WooCommerce, посмотреть можно по ссылке

вот код подключения jquery и скриптов в functions.php

 wp_enqueue_style('magnific-popup', get_template_directory_uri() . '/assets/css/magnific-popup.css');

	wp_deregister_script('jquery');
	wp_enqueue_script('jquery',  get_template_directory_uri() . '/assets/js/jquery-3.6.3.min.js');
	wp_enqueue_script('jquery',  get_template_directory_uri() . '/assets/js/jquery.magnific-popup.js');

само окно с кнопкой

	<a href="#test-popup" class="single-product-btn open-popup-link">Купить в один клик</a>

	<div id="test-popup" class="white-popup mfp-hide">
	  <form action="#" id="popupOrder" class="order-form">
		<div class="order-form__half">
		  <p class="order-form__head">Купить в один клик</p>
		  <p class="order-form__text">Оставьте свои контакнтые данные и мы свяжемся с вами в ближайшее время для уточнения заказа
		  </p>
		  <div class="order-form__group">
			<label>Имя</label>
			<input type="text" name="name" class="order-form__input">
		  </div>
		  <div class="order-form__group">
			<label>Телефон</label>
			<input type="tel" name="tel" class="order-form__input">
		  </div>
		  <div class="order-form__btn">
			<input id="ordered" type="submit" data-submit value="Отправить" class="single-product-btn" />
		  </div>
		</div>
		<div class="order-info__half">
		  <p class="order-info__info">Информация о заказе</p>
		  <div class="order-info__result">
			<div class="order-info__block">
			  <a href="<?php the_permalink(); ?>" class="order-info__image">
				<?php echo get_the_post_thumbnail(get_the_ID(), 'thumbnail'); ?>
			  </a>
			  <div class="order-info__desc">
				<a href="<?php the_permalink(); ?>" class="order-info__title">
				  <?php echo get_the_title(); ?>
				</a>
				<div class="order-info__price">
				  <?php echo $product->get_price_html(); ?>
				</div>

				<a href="<?php echo wc_get_cart_url() ?>?add-to-cart=<?php echo get_the_ID(); ?>" class="single-product-btn">
				  Перейти в корзину
				</a>
			  </div>
			</div>
		  </div>
		</div>
	  </form>
	</div>

и скрипт на Jquery

	$('.open-popup-link').magnificPopup({
	  type: 'inline',
	  mainClass: 'my-mfp-zoom-in',
	  showCloseBtn: true,
	  closeBtnInside: true
	});

получаю ошибку в консоле:

TypeError: $('.open-popup-link').magnificPopup is not a function. (In '$('.open-popup-link').magnificPopup({
type: 'inline',
mainClass: 'my-mfp-zoom-in',
showCloseBtn: true,
closeBtnInside: true
})', '$('.open-popup-link').magnificPopup' is undefined)

Помогите найти причину!

0
id9027978
2.6 лет назад
  • 0
    el-lable 620 el-lable.ru
     wp_enqueue_style('magnific-popup', get_template_directory_uri() . '/assets/css/magnific-popup.css');
    
    	wp_deregister_script('jquery');
    	wp_enqueue_script('jquery',  get_template_directory_uri() . '/assets/js/jquery-3.6.3.min.js');
    	wp_enqueue_script('magnific-popup',  get_template_directory_uri() . '/assets/js/jquery.magnific-popup.js');
    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация