带有AJAX和快捷码的WooCommerce存款表单不会更新，但会添加到以前的输出中

时间：2020-10-21 作者：Eliott

我正在尝试创建一个产品页面，在该页面中，选择一个字段定义一个产品，这将触发一个AJAX调用，以显示woocommerce存款表单和与相关产品id相对应的添加到购物车提交按钮。

包含存款选择字段和提交按钮的表单通过使用默认产品页面加载时调用的快捷码来显示。

然后，单击与要更改的产品对应的字段，我使用AJAX请求再次执行该短代码。然后，我尝试用Javascript中的innerhtml替换旧表单，但是由于某些原因，新表单总是在旧表单之后添加。我似乎无法替换innerhtml内容。代码如下：

该页面包含以下内容：

//div to be filled with product deposit and add to cart form
<div id="adddepositsection">[add_product id="17364"]</div>

//AJAX call on field click to execute the shortcode and replace the innerhtml
jQuery(\'#product2\').on(\'click\', function(){
document.getElementById("product1").className = "unselectedbox";
document.getElementById("product2").className = "selectedbox";
document.getElementById("product3").className = "unselectedbox";

jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: \'addfunctionshortcode\',
            // add your parameters here
            productid: "17372"
        },
        success: function (output) {
document.getElementById("adddepositsection").innerHTML = output; 
}
        });


});
显示存款和添加到购物车按钮的快捷码函数，以及通过AJAX在函数中执行该快捷码的函数。php：

 //Display deposit choice and add to cart shortcode
    function add_product_display( $atts ) {
      $atts = shortcode_atts( array(
            \'id\' => null,
        ), $atts, \'bartag\' );
    
        
            if( intval( $atts[\'id\'] ) > 0 && function_exists( \'wc_get_product\' ) ){
             $product = wc_get_product( $atts[\'id\'] );
        ?>
    
        <form class="cart" action="<?php echo esc_url( apply_filters( \'woocommerce_add_to_cart_form_action\', $product->get_permalink() ) ); ?>" method="post" enctype=\'multipart/form-data\'>
            
            <div class="wc-deposits-wrapper <?php echo WC_Deposits_Product_Manager::deposits_forced( $product->get_id() ) ? \'wc-deposits-forced\' : \'wc-deposits-optional\'; ?>">
        <?php if ( ! WC_Deposits_Product_Manager::deposits_forced( $product->get_id() ) ) : ?>
            <ul class="wc-deposits-option">
                <li>
                    <input type="radio" name="wc_deposit_option" value="yes" id="wc-option-pay-deposit" <?php checked( $default_selected_type, \'deposit\' ); ?> />
                    <label for="wc-option-pay-deposit">
                        <?php esc_html_e( \'Pay Deposit\', \'woocommerce-deposits\' ); ?>
                    </label>
                </li>
                <li>
                    <input type="radio" name="wc_deposit_option" value="no" id="wc-option-pay-full" <?php checked( $default_selected_type, \'full\' ); ?> />
                    <label for="wc-option-pay-full">
                        <?php esc_html_e( \'Pay in Full\', \'woocommerce-deposits\' ); ?>
                    </label>
                </li>
            </ul>
        <?php endif; ?>
    </div>
            <div class="addcartcontainer">
                
    <?php if ( $product->is_in_stock() ) {  
             if (pll_current_language() == "en"   ) { ?>
                    <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="addtocartsubmit">BUY NOW</button> <?php
                     }
                    elseif (pll_current_language() == "fr"){ ?>
                        <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="addtocartsubmit">ACHETER MAINTENANT</button> <?php
                    }
                    elseif (pll_current_language() == "it"){ ?>
                        <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="addtocartsubmit">ACQUISTA ORA</button> <?php
                    }
             }
                else { 
     if (pll_current_language() == "en"   ) { ?>
                    <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="addtocartsubmit">SOLD OUT</button> <?php
                     }
                    elseif (pll_current_language() == "fr"){ ?>
                        <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="addtocartsubmit">EPUISE</button> <?php
                    }
                    elseif (pll_current_language() == "it"){ ?>
                        <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="addtocartsubmit">SOLD OUT</button> <?php
                    }
                 } ?>
            </div>
    
        </form>
    
    
    <?php
    
    }
    }
    add_shortcode( \'add_product\', \'add_product_display\' );

//Function called by AJAX to execute shortcode
// register the ajax action for authenticated users
add_action(\'wp_ajax_addfunctionshortcode\', \'addfunctionshortcode\');

// register the ajax action for unauthenticated users
add_action(\'wp_ajax_nopriv_addfunctionshortcode\', \'addfunctionshortcode\');

// handle the ajax request
function addfunctionshortcode() {
    $atts[\'id\'] = $_REQUEST[\'productid\'];
            echo  add_product_display( $atts );
die();
}

1 个回复
SO网友:Eliott

实际上，这是因为我在主函数中打印数据的方式。我没有简单地输出它，而是使用ob\\u start和ob\\u get\\u clean将它放在一个变量中。一切都已修复，代码现在变成：

//Display deposit choice and add to cart shortcode
function add_product_display( $atts ) {
  $atts = shortcode_atts( array(
        \'id\' => null,
    ), $atts, \'bartag\' );

    
        if( intval( $atts[\'id\'] ) > 0 && function_exists( \'wc_get_product\' ) ){
         $product = wc_get_product( $atts[\'id\'] );
    ob_start(); ?>

<form class="cart" action="<?php echo esc_url( apply_filters( \'woocommerce_add_to_cart_form_action\', $product->get_permalink() ) ); ?>" method="post" enctype=\'multipart/form-data\'>
        
        <div class="wc-deposits-wrapper <?php echo WC_Deposits_Product_Manager::deposits_forced( $product->get_id() ) ? \'wc-deposits-forced\' : \'wc-deposits-optional\'; ?>">
    <?php if ( ! WC_Deposits_Product_Manager::deposits_forced( $product->get_id() ) ) : ?>
        <ul class="wc-deposits-option">
            <li>
                <input type="radio" name="wc_deposit_option" value="yes" id="wc-option-pay-deposit" <?php checked( $default_selected_type, \'deposit\' ); ?> />
                <label for="wc-option-pay-deposit">
                    <?php esc_html_e( \'Pay Deposit\', \'woocommerce-deposits\' ); ?>
                </label>
            </li>
            <li>
                <input type="radio" name="wc_deposit_option" value="no" id="wc-option-pay-full" <?php checked( $default_selected_type, \'full\' ); ?> />
                <label for="wc-option-pay-full">
                    <?php esc_html_e( \'Pay in Full\', \'woocommerce-deposits\' ); ?>
                </label>
            </li>
        </ul>
    <?php endif; ?>
</div>
        <div class="addcartcontainer">
            
<?php if ( $product->is_in_stock() ) {  
         if (pll_current_language() == "en"   ) { ?>
                <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="addtocartsubmit">BUY NOW</button> <?php
                 }
                elseif (pll_current_language() == "fr"){ ?>
                    <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="addtocartsubmit">ACHETER MAINTENANT</button> <?php
                }
                elseif (pll_current_language() == "it"){ ?>
                    <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="addtocartsubmit">ACQUISTA ORA</button> <?php
                }
         }
            else { 
 if (pll_current_language() == "en"   ) { ?>
                <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="addtocartsubmit">SOLD OUT</button> <?php
                 }
                elseif (pll_current_language() == "fr"){ ?>
                    <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="addtocartsubmit">EPUISE</button> <?php
                }
                elseif (pll_current_language() == "it"){ ?>
                    <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="addtocartsubmit">SOLD OUT</button> <?php
                }
             } ?>
        </div>

    </form>


<?php
$html = ob_get_clean();
            return $html;
}
}
add_shortcode( \'add_product\', \'add_product_display\' );

标签： woocommerce-offtopic   ajax   javascript   小码农  

相关推荐

Getting user data via ajax

我正在尝试在前端列出具有“成员”角色的注册用户。我有很多高级自定义字段供用户使用，但我不知道如何获取这些字段。我安装了“AFC到rest”插件，该插件为我提供了一个端点，该端点具有用户的所有高级自定义字段，但没有名字、姓氏等标准字段。因此，我不知道是否最好忘记ACF to rest插件并以不同的方式进行操作，或者使用该插件但以某种方式获取标准用户字段。目前我正在创建自己的路线：add_action( \'rest_api_init\', \'rest_members_endpoint\' ); f