WordPress как на ладони

Почему не работает 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
год назад
  • 0
    el-lable620 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');
    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация