在 Woocommerce 中的產品自定義循環上啟用 Ajax 添加到購物車按鈕

Question

這是我為產品存檔頁面的自定義循環代碼編寫的代碼。 我想使用 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 height="300px" width="300px" class="img-responsive" alt="product" 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();
?>

Answer 1

對於您的 Ajax 添加到購物車按鈕，您只需要使用與模板loop/add-to-cart.php相同的代碼（如果您loop/add-to-cart.php ，這不是那么簡單） 。

沒有關於 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 height="300px" width="300px" class="img-responsive" alt="product" 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();
?>

測試和工作。