WooCommerce - 如何使用 ajax 动态加载结帐页面？

Posted 2023-02-22

【中文标题】WooCommerce - 如何使用 ajax 动态加载结帐页面？

【英文标题】：WooCommerce - how can I dynamically load checkout page using ajax?

【发布时间】：2015-11-20 08:57:22

【问题描述】：

我想在灯箱/模态窗口中显示结帐，以便可以从每个商店页面快速访问。任何想法如何做到这一点？该商店将与贝宝（可能是快递）和 Stripe 插件集成。

【问题讨论】：

您是否尝试过解决这个问题？如果有，请编辑您的问题以包含您的代码和研究，以显示对您不起作用的内容。如果你还没有，你应该先尝试自己解决它，然后在这里发布代码和研究。它也让其他人更容易回答您的问题！

也在找这个。在单个产品页面上，我希望“添加到购物车”按钮打开一个包含结帐页面内容的灯箱。

【参考方案1】：

在打开模式窗口时执行 Ajax 调用以获取结帐页面内容；

在后端使用 do“ echo do_shortcode('[woocommerce_checkout]'); ”返回结帐页面内容。

/* php Code on functions.php */
add_action( 'wp_ajax_getCheckoutPageContent', 'getCheckoutPageContentCallBack' );
add_action( 'wp_ajax_nopriv_getCheckoutPageContent', 'getCheckoutPageContentCallBack' );

function getCheckoutPageContentCallBack() 
    echo do_shortcode('[woocommerce_checkout]');
    die();


/* JS Code to be called on modal open callback*/
var wp_ajax_url="http://yourwebsite/wp-admin/admin-ajax.php";
var data = 
    action: 'getCheckoutPageContent'
;

jQuery.post( wp_ajax_url, data, function(content) 
    // show content on modal
);

编辑：

在我的情况下，我在添加购物车上显示结帐模式，并且我使用了 bootstarp 模式。

这是我的代码。

    /* PHP Code on functions.php */
    add_action( 'wp_ajax_getCheckoutPageContent', 'getCheckoutPageContentCallBack' );
    add_action( 'wp_ajax_nopriv_getCheckoutPageContent', 'getCheckoutPageContentCallBack' );

    function getCheckoutPageContentCallBack() 


        $product_id        = absint( $_POST['product_id'] );
        $quantity          = absint( $_POST['quantity'] );
        $product_status    = get_post_status( $product_id );
        $passed_validation = apply_filters( 'woocommerce_add_to_cart_validation', true, $product_id, $quantity );

        if ( $passed_validation && WC()->cart->add_to_cart( $product_id, $quantity ) && 'publish' === $product_status ) 

            do_action( 'woocommerce_ajax_added_to_cart', $product_id );
            global $woocommerce;
            $items = $woocommerce->cart->get_cart();

            wc_setcookie( 'woocommerce_items_in_cart', count( $items ) );
            wc_setcookie( 'woocommerce_cart_hash', md5( json_encode( $items ) ) );
            do_action( 'woocommerce_set_cart_cookies', true );

            define( 'WOOCOMMERCE_CHECKOUT', true );
            echo do_shortcode('[woocommerce_checkout]');


         else 

            echo "Something went wrong, please try again later.";
        

        die();
    

    /* woocommerce shop page*/

    <?php 
    /*
        Template Name:costom shop
    */

    get_header();
    ?>
    <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>/bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="<?php echo get_template_directory_uri();?>/bootstrap/js/bootstrap.min.js"></script>

    <?php  
      $args = array(
            'post_type' => 'product',
            'posts_per_page' => -1,
            'orderby' => 'rand'
        );

        $the_query = new WP_Query( $args );

        if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

        <div class="row">
            <div class="col-md-12">
                <h2><?php the_title() ?></h2>
                <div>
                    <div class="row">
                        <div class="col-md-6">
                            <?php the_post_thumbnail(); ?>
                        </div>
                        <div class="col-md-6">
                            <a href="#!" data-productid="<?php echo $post->ID; ?>" class="btn btn-primary" onclick="customCheckout(event)">Add to Cart</a>
                        </div>
                    </div>
                    <strong>Description</strong>
                    <div><?php the_excerpt(); ?></div>
                </div>
            </div>
        </div>

        <?php endwhile; else : ?>

        <p>There in no product :( </p>

    <?php endif;
    wp_reset_postdata(); ?>


    <!-- Checkout Modal -->
    <div class="modal fade" id="checkoutModal" tabindex="-1" role="dialog" aria-labelledby="checkoutModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="checkoutModalLabel">Checkout</h4>
          </div>
          <div class="modal-body">
            <div id="checkOutPageContent">

            </div>
          </div>      
        </div>
      </div>
    </div>

    <script type="text/javascript">

        function customCheckout(event)
            var wp_ajax_url="<?php echo site_url();?>/wp-admin/admin-ajax.php";
            var data = 
                action: 'getCheckoutPageContent',
                product_id: jQuery(event.target).data('productid'),
                quantity: 1
            ;

            jQuery.post( wp_ajax_url, data, function(content) 
                jQuery("#checkOutPageContent").html(content);
                jQuery("#checkoutModal").modal('show');

            );
        

    </script>
    <?php
    get_footer();
    ?>

【讨论】：

谢谢！您的代码有效，但是在执行 Ajax 调用后我只得到 ，没有别的。在这种情况下， do_shortcode('[woocommerce_checkout]') 只返回这个。知道为什么吗？

您必须在调用 do_shortcode('[woocommerce_checkout]') 之前将产品添加到购物车中，请确保您的购物车中有产品

@drake035 我已经更新了我的代码；这应该有效；我添加了define('WOOCOMMERCE_CHECKOUT', true);在 do_shortcode('[woocommerce_checkout]');请检查一次。

@drake035 我使用 paypal 和 COD 进行测试，它工作正常，没有尝试条纹，如果有任何错误会尝试修复。

@drake035 感谢您指出这个问题。看来我需要进一步挖掘。

【参考方案2】：

您需要包含 checkout.min.js javascript 以确保 AJAX 回调在结帐页面上正常工作。您可以手动将其嵌入到加载 AJAX 的结帐页面中；

<?php echo plugins_url(); ?>/woocommerce/assets/js/frontend/checkout.min.js

希望有帮助

【参考方案3】：

我做了一个快速的谷歌搜索。看起来这个插件可以满足您的需求：https://wordimpress.com/plugins/woocommerce-quick-checkout/。它似乎得到了 WooCommerce 作者的认可，因为它也在他们的网站上：http://www.woothemes.com/products/quick-checkout/

我还看到了这个 WooCommerce 扩展：http://www.woothemes.com/products/woocommerce-one-page-checkout/ 它并没有完全按照你的意思做，但类似。

如果您想使用自定义代码来实现这一点，这是一项复杂的任务。尊重实际为此编写自定义代码的任何人。

【讨论】：

我发现这是一个常见的谬误。编写等效的健壮代码比购买插件花费更多的开发时间

对不起，链接插件是最糟糕的答案。

@DarkNeuron 那么你的精彩答案在哪里？

我也可以问你。