1

Помогите, пожалуйста, решить проблему с вариациями с popup окне, они не работают. Просто ничего не происходит при выборе вариаций. Я так понимаю, что ajax скрипт woocommerce не работает с вариациями в popup окне - product quick view, в которое подгружается контент через js fetch. Если я правильно понимаю, что скрипт (woocommerce/assets/js/frontend/add-to-cart-variation.js) загружается только один раз и не ловит динамические события, т.е. подгрузку товара в popup окне. Помогите исправить это.

Скринкаст с проблемой

Скрин

<input type="hidden" name="variation_id" class="variation_id" value="0">

value всегда = 0

Скрипт, который подгружает товар в popup:

 // Main-ajax.js
    document.addEventListener('DOMContentLoaded', function () {
    
    let qvBtn = document.querySelectorAll('a.quickview'); // кнопки 'В корзину'

    qvBtn.forEach(function (entry) {

        let prodIdToSend = entry.getAttribute('data-product_id'); // получаем ID товара


        const url = pmqv_ajax_data.url;
        let data = new FormData();
        data.append('prodIdToSend', prodIdToSend);
        data.append('action', 'pmqv_prod_in_popup');
        data.append('nonce', pmqv_ajax_data.nonce);
        const qv_popup = document.querySelector('.w-popup-box-content');

        // START FETCH ============================
        function product() {

            fetch(url, {
                method: "POST",
                credentials: 'same-origin',
                body: data,
            })
                .then(
                    function (response) {
                        response.text().then(function (data) {
                            qv_popup.innerHTML = '<div class="product-template-default postid-' + prodIdToSend + ' single single-product xt_atc_override_spinner xt_atc_hide_view_cart woocommerce woocommerce-page woocommerce-js us-woo-cart_compact"><main id="page-content" class="l-main pmqv-content">' + data + '</main></div>';
                         });
                    })
                .catch(function (err) {
                    console.log('Fetch Error :-S', err);
                });

        }

        // Отправляем данные на сервер, чтобы получить товар
        function OUR_submitListener(e) {
            e.preventDefault();
            qv_popup.innerHTML = '<p style="text-align:center;"> Загрузка... </p>';
            product(data);
        }
        //Ждём клик
        entry.addEventListener('click', OUR_submitListener, entry);  
        // END FETCH ============================

    })


}, false);

Код обработчика запроса:

// Аctivate the ajax handler 
add_action('wp_ajax_pmqv_prod_in_popup', 'pmqv_prod_in_popup');
add_action('wp_ajax_nopriv_pmqv_prod_in_popup', 'pmqv_prod_in_popup');


$pmqv_plugin_dir = plugin_dir_path(__FILE__);

function pmqv_prod_in_popup()
{

    if (!wp_verify_nonce($_POST['nonce'], 'pmqv-nonce')) {
        wp_die('');
    }
    global $product, $wpdb, $post, $woocommerce;
    if (!class_exists('woocommerce')) {
        return FALSE;
    }


    $product_id = !empty($_POST['prodIdToSend']) ? absint(esc_attr($_POST['prodIdToSend'])) : false;

    if ($product_id > 0) :

        wp('p=' . $product_id . '&post_type=product');

        ob_start();

        if (!$product || is_array($product) || $product->get_id() !== $product_id) {
            $product = wc_get_product($product_id);
            include($pmqv_plugin_dir . 'templates/quickview_template.php');
        }

        echo ob_get_clean();
    endif;
    wp_die();
}

Шаблон вывода товара:

<?php

global $product, $post;

while (have_posts()) : the_post(); ?>
    <div id="product-<?php the_ID(); ?>" <?php post_class('pmqv-product product'); ?>>


        <div class="product-thumb img-thumbnail">
            <?php echo get_the_post_thumbnail($product_id, 'shop_catalog'); ?>
        </div>


        <div class="product-content entry-summary">


            <div class="woocommerce-details">
                <div class="pmqv-title">
                    <h2><?php the_title(); ?></h2>
                </div>
                <div class="pmqv-excerpt">
                    <?php the_excerpt(); ?>
                </div>
                <div class="pmqv-price">
                    <?php echo $product->get_price(); ?>
                </div>

            </div>

            <div class="woocommerce-actions">
                <?php do_action( 'woocommerce_' . $product->get_type() . '_add_to_cart' ); ?>
                
            </div>


        </div>
    </div>

<?php
endwhile;

1 ответ 1

2

после того как вы отрисовали вариантивный товар в попапе вам нужно инициировать функционал вариаций. Это можно сделать вот так:

jQuery( qv_popup ).find('form.variations_form').wc_variation_form();
4
  • Спасибо большое. Это сработало, только еще надо было подгрузить скрипт add-to-cart-variation.js, чтобы ваш код заработал. В моей теме он не грузился на страницах не товара. add_action('wp_footer', 'pmqv_wc_atc_ajax'); function pmqv_wc_atc_ajax() { if(!is_singular('product')) { wp_enqueue_script('wc-add-to-cart-variation', '/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.js'); } } 26 окт 2021 в 18:45
  • Подскажите, пожалуйста, а как сделать, чтобы заработало ajax на кнопке "Добавить в корзину"? 26 окт 2021 в 19:06
  • При подключении add-to-cart-variation.js вам не нужно указывать путь к файлу, достаточно указать только handler скрипта, потому что он зарегистрирован. Вот так будет работать wp_enqueue_script('wc-add-to-cart-variation); для ajax добавления в корзину лучше написать свой скрипт, WooCommerce по умолчанию в каталоге разрешает добавлять только простые товары через ajax
    – Darth KYL
    27 окт 2021 в 5:51
  • Спасибо огромное. Вашу строчку добавил, скрипт для кнопки "в корзину" написал. Все работает. Спасибо) 27 окт 2021 в 11:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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