0

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

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

2 ответа 2

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

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

2
  • Спасибо большое за совет, но к сожалению по прежнему ведает ошибку TypeError: $ is not a function. (In '$(document)', '$' is undefined)
    – Лена
    Commented 20 мар. 2023 в 16:45
  • Так теперь у вас другая ошибка - у вас символ $ от jQuery не определен. Потому что скрипт вы неправильно пишете. В WP недоступен символ $, потому что jQuery подключается в noConflict mode. Смотрите, как надо оформлять использование jQuery в своем скрипте wpmudev.com/blog/… Commented 21 мар. 2023 в 8:30
0

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

$(document).ready(function() 

на это

jQuery(document).ready(function($) 

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

1
  • У вас "все заработало" только полсе того, как вы устранили ошибку с handles, на которую я указал в своем ответе, а уж потом вы исправили подключение вашего скрипта - это уже вторая ошибка в вопросе. Commented 21 мар. 2023 в 8:32

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.