WooCommerce: ¿cómo puedo cargar dinámicamente la página de pago usando ajax?

6 minutos de lectura

avatar de usuario
usuario2929594

Me gustaría mostrar el pago en la caja de luz/ventana modal, para que sea rápidamente accesible desde cada página de la tienda. ¿Alguna idea de como hacer esto? La tienda se integrará con paypal (quizás express) y el complemento Stripe.

  • ¿Has intentado solucionar este problema? Si es así, edite su pregunta para incluir su código e investigue para mostrar lo que no funcionó para usted. Si no lo ha hecho, primero debe intentar resolverlo usted mismo y luego publicar el código e investigar aquí. ¡Hace que su pregunta sea más fácil de responder para otros también!

    – SuperBiasedMan

    26 de agosto de 2015 a las 10:53

  • Buscando esto también. En la página de un solo producto, quiero que el botón “agregar al carrito” abra un cuadro de luz con el contenido de la página de pago.

    – drake035

    9 dic 2015 a las 18:14


avatar de usuario
Pablo Swarnendu

Al abrir la ventana modal, haga una llamada Ajax para obtener el contenido de la página de pago;

En el back-end use hacer ” echo do_shortcode(‘[woocommerce_checkout]’); ” para devolver el contenido de la página de pago.

/* 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
});

Editar:

En mi caso, estoy mostrando el modal de pago en agregar al carrito y he usado el modal de arranque.

aquí está mi código.

    /* 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="https://stackoverflow.com/questions/32224595/<?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();
    ?>

  • ¡Gracias! Su código funciona, sin embargo, después de ejecutar la llamada Ajax, solo obtengo

    , nada más. En este caso, do_shortcode(‘[woocommerce_checkout]’) no devuelve nada más que esto. ¿Alguna idea de por qué?

    – drake035

    12 de diciembre de 2015 a las 15:57

  • Debes agregar el producto al carrito antes de llamar a do_shortcode(‘[woocommerce_checkout]’), asegúrese de que su carrito tenga algún producto.

    – Paul Swarnendu

    13 de diciembre de 2015 a las 5:56

  • @drake035 He actualizado mi código; Esto debería funcionar; He agregado define (‘WOOCOMMERCE_CHECKOUT’, true); antes de do_shortcode(‘[woocommerce_checkout]’); Por favor verifique una vez.

    – Paul Swarnendu

    15 de diciembre de 2015 a las 16:44


  • @drake035 Uso paypal y COD para probar, funcionó, no probé stripe, intentaré solucionarlo si tengo algún error.

    – Paul Swarnendu

    16 de diciembre de 2015 a las 5:04

  • @ drake035 Gracias por señalar este problema. Parece que necesito cavar más.

    – Paul Swarnendu

    16 dic 2015 a las 20:41

Deberá incluir el javascript checkout.min.js para asegurarse de que la devolución de llamada de AJAX funcione en la página de pago. Puede incrustarlo manualmente dentro de su página de pago cargada con AJAX;

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

Espero que ayude

Hice un rápido google alrededor. Parece que este plugin hace lo que necesitas: https://wordimpress.com/plugins/woocommerce-quick-checkout/. Parece estar aprobado por los autores de WooCommerce ya que también está en su sitio: http://www.woothemes.com/products/quick-checkout/

También vi esta extensión de WooCommerce: http://www.woothemes.com/products/woocommerce-one-page-checkout/ No hace exactamente lo que dices, pero es similar.

Si desea implementar esto con código personalizado, es una tarea compleja. Respeto a cualquiera que realmente escriba un código personalizado para esto.

  • Me parece que es una falacia común. Le costaría más tiempo al desarrollador escribir el código robusto equivalente que simplemente comprar el complemento

    –James Jones

    13 de diciembre de 2015 a las 0:04

  • Lo siento, pero vincular un complemento es la peor respuesta que se puede dar.

    – Neurona Oscura

    2 de diciembre de 2016 a las 11:54

  • @DarkNeuron, ¿dónde está tu brillante respuesta entonces?

    –James Jones

    2 de diciembre de 2016 a las 12:04

  • Yo podría preguntarte lo mismo.

    – Neurona Oscura

    2 de diciembre de 2016 a las 12:19

¿Ha sido útil esta solución?