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

Рейтинг: 0Ответов: 2Опубликовано: 20.03.2023

Помогите понять, почему не работает модальное окно 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');

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

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

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

jquery wordpress woocommerce magnific-popup
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Потому что нельзя запускать скрипт magnific popup с handle jquery. Этот handle уже есть, и wp_enqueue_script не добавляет его в массив скриптов. Надо понимать, что wp_enqueue_script ничего реально не запускает, он готовит массив с данными скриптов. Запускаются они несколько позже, по событию wp_enqueue_scripts.

В общем, надо так:

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',
    [ 'jquery' ]
);

То, что handle magnific-popup одинаковый для стиля и скрипта - это нормально.

Кроме того, обратите внимание, что я добавил зависимость от jquery для magnific popup. Это важно.

Я не знаю, какая у вас версия WordPress. Но в последней версии jquery и так 3.6.3 и строки

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

просто не нужны.

▲ 0

Проблема решена, поменяла

$(document).ready(function()

на это

jQuery(document).ready(function($)

и все заработало!