通过 Ajax (WooCommerce) 加载 single_product_content 时变体 Javascript 不起作用

Posted 2023-02-22

【中文标题】通过 Ajax (WooCommerce) 加载 single_product_content 时变体 Javascript 不起作用

【英文标题】：Variations Javascript not working when single_product_content is loaded via Ajax (WooCommerce)

【发布时间】：2016-03-20 00:54:48

【问题描述】：

在我的 WooCommerce 商店模板中，我使用 Ajax 在 archive-product.php 页面中动态加载单一产品内容。这部分正在工作。 但是缺少用于选择产品变体的 javascript，因此我尝试在成功的 ajax 请求后将脚本添加到 html。 我可以加载脚本，但我仍然无法选择产品变体。不会触发任何事件。好像我错过了什么......

我的 Javascript：

jQuery('.project-preview').on('click',function()
    var theId = $(this).attr('data-project-id');
    var div = $('#product-container');

    $.ajax(
        type: "POST",
        url: singleprojectajax.ajaxurl,
        data : action : 'load_single_product_content', post_id: theId ,
        success: function(data)
            div.html(data);
            loadVariationScript();
        ,
        error : function() 
        
    );
);

function loadVariationScript () 
    jQuery.getScript("../wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js");
    jQuery.getScript("../wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.js");

在functions.php中

add_action( 'wp_enqueue_scripts', 'child_add_scripts' );
function child_add_scripts()
    wp_register_script( 'pa_script', get_stylesheet_directory_uri() . '/main.js', array('jquery'), true );
    wp_localize_script( 'pa_script', 'singleprojectajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
    wp_enqueue_script('pa_script');


function load_single_product_content () 
     $post_id = intval(isset($_POST['post_id']) ? $_POST['post_id'] : 0); 

     if ($post_id > 0)  
         $the_query = new WP_query(array('p' => $post_id, 'post_type' => 'product'));
         if ($the_query->have_posts()) 
             while ($the_query->have_posts()) : $the_query->the_post();
             wc_get_template_part( 'content', 'single-product' );
         endwhile;
          else 
             echo "There were no products found";
         
       
     wp_die(); 


add_action('wp_ajax_load_single_product_content', 'load_single_product_content'); 
add_action('wp_ajax_nopriv_load_single_product_content', 'load_single_product_content'); 

WooCommerce 脚本“add-to-cart-variations.js”： https://searchcode.com/codesearch/view/95139130/

【参考方案1】：

你有没有尝试过：

jQuery(document).ready(function($) 
"use strict";

$('.project-preview').on('click',function()
    var theId = $(this).attr('data-project-id');
    var div = $('#product-container');

    $.ajax(
        type: "POST",
        url: singleprojectajax.ajaxurl,
        data : action : 'load_single_product_content', post_id: theId ,
        success: function(data)
            div.html(data);
        ,
        complete: function()
            loadVariationScript();
        ,
        error : function() 
        
    );
);

function loadVariationScript() 
    $.getScript("www.yoursitenamehere.com/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js");
    $.getScript("www.yoursitenamehere.com/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.js");

);

您在 AJAX 中使用了 $，因此可以安全地假设您已经处于文档就绪环境中。所以你不需要使用jQuery。

我将$.getScript() 放在complete ajax 方法中。另外，您需要在页面中包含整个 url。

【讨论】：

只是好奇为什么要加载 add-to-cart-variation.min.js 和 add-to-cart-variation.js？您似乎只想加载 add-to-cart-variation.min.js。我对此进行了测试，它对我很有用。

我只是从 OP 复制了代码，我可能会完全不同。