WooCommerce - ajax를 사용하여 체크아웃 페이지를 동적으로 로드하려면 어떻게 해야 합니까?

WooCommerce - ajax를 사용하여 체크아웃 페이지를 동적으로 로드하려면 어떻게 해야 합니까?

모든 매장 페이지에서 빠르게 접근할 수 있도록 라이트박스/모달 창에 체크아웃을 표시하고 싶습니다.어떻게 해야할지 조언해 주실 수 있나요?매장은 페이팔(익스프레스) 및 스트라이프 플러그인과 통합됩니다.

모드 창을 열 때 Ajax 호출을 통해 체크아웃 페이지 내용을 가져옵니다.

백엔드에서는 체크아웃 페이지 내용을 반환하려면 "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
});

편집:

제 경우에는 카트에 체크아웃 모드를 추가로 보여주고 있고 부트스타프 모드를 사용했습니다.

여기 제 코드가 있습니다.

    /* 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 callback이 작동하는지 확인하기 위해 checkout.min.js javascript를 포함해야 합니다.AJAX 로드된 체크아웃 페이지에 수동으로 내장할 수 있습니다.

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

도움이 되기를 바랍니다.

구글 검색을 잠깐 해봤어요.이 플러그인이 필요한 작업을 수행하는 것 같습니다. 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/ 말씀하시는 것과 정확히 일치하는 것은 아니지만 유사합니다.

사용자 지정 코드로 이를 구현하려면 복잡한 작업이 필요합니다.이에 대한 사용자 정의 코드를 실제로 작성하는 모든 사람에게 경의를 표합니다.

언급URL : https://stackoverflow.com/questions/32224595/woocommerce-how-can-i-dynamically-load-checkout-page-using-ajax