php - mostrar - El botón de agregar al carrito de AJAX no funciona en el producto de bucle de consulta personalizado woocommerce

mostrar carrito de compras woocommerce

Question

Estoy creando un sitio web de comercio electrónico personalizado utilizando woocommerce y tengo algunos problemas para corregir el botón "agregar al carrito". Cada vez que agrego las cantidades múltiples en el cuadro de entrada / cuadro de cantidad, solo se incrementa o agrega un artículo al carrito. Esto solo sucede cuando creo un bucle personalizado.

En la tienda y en la página de un solo producto, funciona bien. Si agrego 10 artículos y presiono el botón agregar al carrito. Se agrega exactamente 10 artículos al carrito.

Aquí está la plantilla que he estado trabajando.

<?php

/*
* Template Name: Home
*/

get_header(); ?>

<section class="full-width home-template">

    <div class="full-width shop-section">

        <div class="container">

            <?php
            $args = array(
                    ''post_type'' => ''product'',
                    ''meta_query'' => array(
                        array(
                            ''key'' => ''_stock_status'',
                            ''value'' => ''instock''
                        )
                    )
            );

            $crate_products = new WP_Query ( $args );
            if ( $crate_products->have_posts() ) : while ( $crate_products->have_posts() ) :
              $crate_products->the_post();

            ?>

            <div id="post-<?php the_ID() ?>" class="three columns product-post">

                <?php // wc_get_template_part(''content'', ''product''); ?>


                <figure class="featured-image">
                    <?php
                    //Display Product Thumbnail
                    $product_thumbnail =  woocommerce_get_product_thumbnail();

                    ?>

                    <a href="<?php  the_permalink()?>" ><?php echo $product_thumbnail ?></a>
                </figure>


                <h2 class="product-price"><a href="<?php the_permalink(); ?>"><?php wc_get_template( ''single-product/price.php'' ); ?></a></h2>
                <span class="product-name"><?php the_title(); ?></span>

                <?php // woocommerce_quantity_input(); ?>


                <div class="add-to-cart-btn">
                <?php woocommerce_template_loop_add_to_cart( $crate_products->post, $product ); ?>
                <?php // do_action( ''woocommerce_after_shop_loop_item'' ); ?>
                </div>


            </div>

            <?php wp_reset_postdata(); ?>

            <?php endwhile; else: ?>

            <?php endif; ?>

            <?php wp_reset_query(); ?>


        </div>

    </div>


</section>


<?php get_footer(); ?>

Lo que es confuso también es que la funcionalidad AJAX funciona en la plantilla de ventas adicionales (up-sells.php) que es una plantilla de woocommerce y funciona bien.

<?php
/**
 * Single Product Up-Sells
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/up-sells.php.
 *
 */

if ( ! defined( ''ABSPATH'' ) ) {
    exit; // Exit if accessed directly
}

global $product, $woocommerce_loop;

$upsells = $product->get_upsells();

if ( sizeof( $upsells ) === 0 ) {
    return;
}

$meta_query = WC()->query->get_meta_query();

$args = array(
    ''post_type''           => ''product'',
    ''ignore_sticky_posts'' => 1,
    ''no_found_rows''       => 1,
    ''posts_per_page''      => $posts_per_page,
    ''orderby''             => $orderby,
    ''post__in''            => $upsells,
    ''post__not_in''        => array( $product->id ),
    ''meta_query''          => $meta_query
);

$products = new WP_Query( $args );

$woocommerce_loop[''columns''] = $columns;

if ( $products->have_posts() ) : ?>

    <div class="upsells products">

        <div class="twelve columns">
            <h2><?php // _e( ''You may also like&hellip;'', ''woocommerce'' ) ?></h2>
      </div>

        <?php woocommerce_product_loop_start(); ?>

            <?php while ( $products->have_posts() ) : $products->the_post(); ?>

                <div id="post-<?php the_ID() ?>" class="three columns product-post">

                    <?php  wc_get_template_part(''content'', ''product''); ?>





                </div>

            <?php endwhile; // end of the loop. ?>

        <?php woocommerce_product_loop_end(); ?>

    </div>

<?php endif;

wp_reset_postdata();

Ya he intentado aplicar las soluciones de este desarrollador.

• https://gist.github.com/claudiosmweb/5114131

y también este

• https://gist.github.com/webaware/6260468

Pero todavía produce la misma salida. Realmente no sé por qué solo incrementa un artículo al carrito. He revisado la consola del navegador en busca de errores y también he comentado algunas partes del código para asegurar o informarle que he probado diferentes métodos u opciones para hacer que la funcionalidad funcione.

Answer 1

Aquí hay una versión actualizada.

<?php
/*
* Template Name: Home
*/
get_header(); ?>

<section class="full-width home-template">
    <div class="full-width shop-section">
        <div class="container">

            <?php

            global $product;

            $args = array(
                ''post_type'' => ''product'',
                ''meta_query'' => array(
                    array(
                        ''key'' => ''_stock_status'',
                        ''value'' => ''instock''
                    )
                )
            );            

            $posts = get_posts( $args );            
            foreach( $posts as $post ) :
                setup_postdata( $post );
                wc_setup_product_data( $post );
                $product = wc_get_product( $post->ID ); ?>

                <div id="post-<?php the_ID() ?>" class="three columns product-post">

                    <figure class="featured-image">
                        <a href="<?php  the_permalink()?>" ><?php echo woocommerce_get_product_thumbnail(); ?></a>
                    </figure>

                    <h2 class="product-price"><a href="<?php the_permalink(); ?>"><?php wc_get_template( ''single-product/price.php'' ); ?></a></h2>
                    <span class="product-name"><?php the_title(); ?></span>

                    <?php woocommerce_quantity_input(); ?>

                    <div class="add-to-cart-btn">
                        <?php woocommerce_template_loop_add_to_cart(); ?>                
                    </div>

                </div>

            <?php endforeach; ?>

            <script type="text/javascript">

                (function($){
                    $(document).ready(function(){
                        $(document).on( "keyup", "input.qty", function(){                       
                            $(this).parent().next().find("a").attr( "data-quantity", $(this).val() );
                        });
                    });
                })(jQuery);

            </script>

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

<?php get_footer(); ?>

Answer 2

Sigue estos pasos

1. woocommerce_quantity_input();
2. Compruebe en la consola del navegador, si hay errores en la consola o no. Si es así, por favor comparta sus errores aquí.
3. Si no hay errores entonces reemplace

woocommerce_template_loop_add_to_cart( $crate_products->post, $product );
con
print_r(woocommerce_template_loop_add_to_cart( $crate_products->post, $product ));

y comprobar si devuelve algún dato o no.

También intente descomentar do_action( ''woocommerce_after_shop_loop_item'' );

Answer 3

 <?php // woocommerce_quantity_input(); ?>

Debiera ser

 <?php woocommerce_quantity_input(); ?>