在 Woocommerce 中的产品自定义循环上启用 Ajax 添加到购物车按钮

Posted 2023-02-24

【中文标题】在 Woocommerce 中的产品自定义循环上启用 Ajax 添加到购物车按钮

【英文标题】：Enable Ajax add to cart button on products custom loop in Woocommerce

【发布时间】：2019-03-31 14:28:04

【问题描述】：

这是我为产品存档页面的自定义循环代码编写的代码。我想使用 ajax 将产品添加到购物车。我该怎么做？ 我还想知道哪个 woocommerce 功能向客户显示 woocommerce 通知。就像我点击添加到购物车时一样，应该向客户显示产品已添加的通知。

$args = array(
    'post_type' => 'product',
    'posts_per_page' => 12,
);
$loop = new WP_Query($args);
if ($loop->have_posts()) 
    while ($loop->have_posts()): $loop->the_post();
      ?>
        <!-- tab product -->
        <li class="col-sx-12 col-sm-4">
          <div class="product-container">
            <div class="left-block">
              <a href="<?php echo get_permalink(); ?>" target="_blank">
                <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($loop->post->ID), 'single-post-thumbnail');?>
                <img   class="img-responsive"  src="<?php echo $image[0]; ?>">
              </a>
              <div class="quick-view">

              </div>
              <div class="add-to-cart ">
                <a href="<?php echo $product->add_to_cart_url(); ?>" class="cart">
                  <span>
                    <span class="add-to-cart-content">Add To Cart
                    </span>
                  </span>
                </a>
              </div>
            </div>
            <div class="right-block">
              <h5 class="product-name">
                <a href="<?php echo get_permalink(); ?>" target="_blank" class="product-block-click">
                  <?php echo $product->get_title(); ?>
                </a>
              </h5>
              <div class="content_price">
                <span class="price product-price">
                  <i class="fa fa-inr" aria-hidden="true">
                  </i>
                  <?php echo $product->get_regular_price(); ?>
                </span>
                <span class="price old-price">
                  <i class="fa fa-inr" aria-hidden="true">
                  </i>
                  <?php echo $product->get_sale_price(); ?>
                </span>
                <span class="discount-block">50 % OFF
                </span>
              </div>
            </div>
          </div>
        </li>
      <?php
    endwhile;

echo "</ul>";
wp_reset_postdata();
?>

【问题讨论】：

网上有不少关于通过 AJAX 将 WooCommerce 产品添加到购物车的教程。你试过吗？

我经历了它们，但在这个循环中，我很困惑。

谢谢，我会看的，然后会回复。

关于@LoicTheAztec 点的更多信息，如果您尚未启用，您应该从 WooCommerce 设置 -> 产品中启用启用 Ajax 的购物车按钮。

【参考方案1】：

对于您的 Ajax 添加到购物车按钮，您只需要使用与模板中相同的代码 loop/add-to-cart.php （如果您不习惯 Woocommerce，这并不是那么简单）。

没有关于 Ajax 添加到购物车操作的通知，而是在执行该操作的添加到购物车按钮的右侧出现一个“查看购物车”按钮。

注意：

Ajax 添加到购物车按钮不适用于可变或分组产品。 需要在 Woocommerce > 设置 > 产品中启用 Ajax 添加到购物车：

您使用功能性 Ajax 添加到购物车按钮重新访问的代码：

$loop = new WP_Query( array(
    'post_type' => 'product',
    'posts_per_page' => 12,
) );

if ($loop->have_posts()) 
    while ($loop->have_posts()): $loop->the_post();
      $product = wc_get_product($loop->post->ID);
      ?>
        <!-- tab product -->
        <li class="col-sx-12 col-sm-4">
          <div class="product-container">
            <div class="left-block">
              <a href="<?php echo get_permalink(); ?>" target="_blank">
                <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($loop->post->ID), 'single-post-thumbnail');?>
                <img   class="img-responsive"  src="<?php echo $image[0]; ?>">
              </a>
              <div class="quick-view">

              </div>
              <div class="add-to-cart "><?php
                echo sprintf( '<a href="%s" data-quantity="1" class="%s" %s>%s</a>',
                    esc_url( $product->add_to_cart_url() ),
                    esc_attr( implode( ' ', array_filter( array(
                        'button', 'product_type_' . $product->get_type(),
                        $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
                        $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
                    ) ) ) ),
                    wc_implode_html_attributes( array(
                        'data-product_id'  => $product->get_id(),
                        'data-product_sku' => $product->get_sku(),
                        'aria-label'       => $product->add_to_cart_description(),
                        'rel'              => 'nofollow',
                    ) ),
                    esc_html( $product->add_to_cart_text() )
                );
              ?></div>
            </div>
            <div class="right-block">
              <h5 class="product-name">
                <a href="<?php echo get_permalink(); ?>" target="_blank" class="product-block-click">
                  <?php echo $product->get_title(); ?>
                </a>
              </h5>
              <div class="content_price">
                <span class="price product-price">
                  <i class="fa fa-inr" aria-hidden="true">
                  </i>
                  <?php echo $product->get_regular_price(); ?>
                </span>
                <span class="price old-price">
                  <i class="fa fa-inr" aria-hidden="true">
                  </i>
                  <?php echo $product->get_sale_price(); ?>
                </span>
                <span class="discount-block">50 % OFF
                </span>
              </div>
            </div>
          </div>
        </li>
      <?php
    endwhile;

echo "</ul>";
wp_reset_postdata();
?>

经过测试并且有效。

【讨论】：

确认工作良好。非常优质的答案。继续努力。