如何从自制模式添加到购物车,而不重定向到产品页面?

时间:2021-07-29 21:00:12

标签: jquery ajax wordpress woocommerce

我使用 ajax quick-view-modal,它不是插件,我想完全修复它,并了解错误在哪里。 问题是 - 当我选择正确的产品变体时 - 选择所需的颜色和尺寸,然后单击添加到购物车按钮,产品没有添加到购物车,但正在重定向到该产品的页面。 模态本身

add_action( 'wp_ajax_ajax_quick_view', 'themename_quick_view_product_callback' );
add_action( 'wp_ajax_nopriv_ajax_quick_view', 'themename_quick_view_product_callback' );
function themename_quick_view_product_callback(){
  if ( ! wp_verify_nonce( $_POST['nonce'], 'quick-nonce' ) ) {
    wp_die( 'Error' );
  }
  global $post, $woocommerce, $product;
  $product = wc_get_product(esc_attr($_POST['id']));
  ob_start();   
  ?>
  <div class="modal-body row">
    <div class="modal-body-left col-md-5">
      <?php 
      $attachment_id = get_post_thumbnail_id( $product->get_id() );
      $product_thub = wp_get_attachment_image_url($attachment_id, 'shop_single'); ?>
      <img src="<?php echo $product_thub;?>" >

      <div class="modal-gal d-flex">
        <?php 
        $attachment_ids = $product->get_gallery_attachment_ids();
          
        foreach( $attachment_ids as $attachment_id ) {
          echo wp_get_attachment_image( $attachment_id, 'woocommerce_gallery_thumbnail' );
        }
                ?>
      </div>

    </div>
    <div class="modal-body-right col-md-7">
      <h2><?php echo $product->get_name();?></h2>           
      <p><?php $rating  = $product->get_average_rating();
          $count   = $product->get_rating_count();
          echo wc_get_rating_html( $rating, $count ); ?></p>    
      <div class="modal-price mb-20">
        <?php echo $product->get_price_html();?></div>
      <p class="mb-20"><?php echo $product->get_short_description(); ?></p> 
      <p class="mb-20 cat-popup"><?php echo $product->get_categories($separator = ' '); ?></p>
      <div class="modal-buttons">
        <?php
        if ( $product->is_type( 'variation' ) ) {
        ?>
              <form class="cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data'>
                <?php woocommerce_single_variation_add_to_cart_button(); ?>
             </form>
              <?php
            } else {
              woocommerce_template_single_add_to_cart();
            }?>             
      </div>            
    </div>
  </div>
  <?php  
  $data['product'] = ob_get_clean();
  wp_send_json( $data);
  wp_die();
}

JS部分

jQuery(document).ready(function ($) {
    $(document).on('click', 'a.modal-product-link', function () {
        var productId = $(this).attr('data-product-id');
        console.log(productId);
        var data = {
            id:productId,
            action:'ajax_quick_view',
            nonce: ajax_quick.nonce
        };
        $.ajax({
            url:ajax_quick.url,
            data:data,
            type: 'POST',
            dataType: 'json',
            beforeSend:function(xhr){
               $('#modal-product .modal-body').text('Loading');
            },
            success:function(data){
                console.log(data);
                $('#modal-product .modal-content section').html(data.product);
            }
        });
    })
});

我认为这是关于 [过滤器 woocommerce_add_to_cart_redirect()][1]

[1]:http://hookr.io/filters/woocommerce_add_to_cart_redirect/,但是如何正确使用呢?

请帮助我理解,我喜欢那个模态,我想改进它,并找出我失败的地方。

P.S 这不仅仅是我的模态。相同的功能是,如果在商店页面中替换循环添加到购物车按钮 t 单个添加到购物车按钮。也重定向。

0 个答案:

没有答案