Woocommerce添加到购物车链接在其他帖子或页面中启用了Ajax

Question

在Woocommerce中，我想在WordPress网站的一个简单页面（而非产品页面）上共同创建“添加到购物车”链接。

因此，我尝试了以下代码（此处的产品ID为123）：

<a href="http://example.com/cart/?add-to-cart=123">Buy</a>

我已启用AJAX添加到购物车的存档页面Woocommerce选项设置。

但是它不起作用，并且我的自定义购物车链接上未启用Ajax功能。

如何在自定义链接（除woocommerce之外的其他页面）上启用ajax添加到购物车？

Answer 1

要在自定义添加到购物车按钮中启用ajax，至少有3种方法：

1. 一个简单的HTML Ajax添加到购物车链接：

   <a rel="nofollow" href="/?add-to-cart=37" data-quantity="1" data-product_id="123" data-product_sku="" class="add_to_cart_button ajax_add_to_cart">Add to cart</a>
   

2. 使用Woocommerce现有的[add_to_cart id='123']简码 （与上面的用法相同）
   

3. 最可定制的：不包含价格的自定义简码 （可定制的按钮文本，其他类别，数量和许多其他可能性）

   if( ! function_exists('custom_ajax_add_to_cart_button') && class_exists('WooCommerce') ) {
       function custom_ajax_add_to_cart_button( $atts ) {
           // Shortcode attributes
           $atts = shortcode_atts( array(
               'id' => '0', // Product ID
               'qty' => '1', // Product quantity
               'text' => '', // Text of the button
               'class' => '', // Additional classes
           ), $atts, 'ajax_add_to_cart' );
   
           if( esc_attr( $atts['id'] ) == 0 ) return; // Exit when no Product ID
   
           if( get_post_type( esc_attr( $atts['id'] ) ) != 'product' ) return; // Exit if not a Product
   
           $product = wc_get_product( esc_attr( $atts['id'] ) );
   
           if ( ! $product ) return; // Exit when if not a valid Product
   
           $classes = 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' : '',
           ) ) ).' '.$atts['class'];
   
           $add_to_cart_button = sprintf( '<a rel="nofollow" href="%s" %s %s %s class="%s">%s</a>',
               esc_url( $product->add_to_cart_url() ),
               'data-quantity="' . esc_attr( $atts['qty'] ) .'"',
               'data-product_id="' . esc_attr( $atts['id'] ) .'"',
               'data-product_sku="' . esc_attr( $product->get_sku() ) .'"',
               esc_attr( isset( $classes ) ? $classes : 'button' ),
               esc_html( empty( esc_attr( $atts['text'] ) ) ? $product->add_to_cart_text() : esc_attr( $atts['text'] ) )
           );
   
           return $add_to_cart_button;
       }
       add_shortcode('ajax_add_to_cart', 'custom_ajax_add_to_cart_button');
   }
   

   这段代码将放在您活动的子主题（或主题）的function.php文件中。经过测试和工作。
   
   用法：
   
   在帖子和页面文本编辑器中：

   [ajax_add_to_cart id='123' text='Buy']
   

   在PHP文件或模板中：

   echo do_shortcode( "[ajax_add_to_cart id='123' text='Buy']" );
   

   在php页面的HTML代码中插入：

   <?php echo do_shortcode( "[ajax_add_to_cart id='123' text='Buy']" ); ?>
   

   

   隐藏Ajax“查看购物车”
   
   对于自定义短代码，要隐藏Ajax“查看购物车”行为，可以在以下代码之前添加代码 return $add_to_cart_button;：

   $style = '<style>a.added_to_cart.wc-forward { display:none !important; }</style>';
   
   $add_to_cart_button = $style . $add_to_cart_button ;