Woocommerce添加到购物车链接在其他帖子或页面中启用了Ajax [英] Woocommerce Add to cart link Ajax enabled in other post or pages
问题描述
在Woocommerce中,我想在WordPress网站(而非产品页面)的简单页面上共同创建添加到购物车"链接.
In Woocommerce, I Would like co create add to cart link on a simple page of WordPress website (not product page).
因此,我尝试了此代码(其中123是产品ID):
So I have tried this code (Where 123 is the product ID):
<a href="http://example.com/cart/?add-to-cart=123">Buy</a>
我已在存档页面Woocommerce选项设置中启用了AJAX添加到购物车的功能.
I have enabled AJAX add to cart on archives pages Woocommerce option setting.
但是它不起作用,并且在我的自定义购物车链接上未启用Ajax功能.
But It doesn't work and Ajax functionality is not enabled on my custom Add-to-cart link.
如何在自定义链接(除woocommerce之外的其他页面上)上启用ajax添加到购物车?
How to enable ajax add-to-cart on a custom link (in other pages than woocommerce ones)?
推荐答案
要在自定义添加到购物车"按钮中启用ajax,至少有3种方法:
To enable ajax in a custom add to cart button, there is 3 ways at least:
-
一个简单的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>
使用Woocommerce现有的 [add_to_cart id ='123']
短代码 (与上述用法相同)
Using Woocommerce existing [add_to_cart id='123']
shortcode (same usage than above)
最可定制的:不包含价格的自定义简码 (可定制的按钮文本,其他类别,数量以及许多其他可能性)
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文件上.经过测试并可以使用.
用法:
在帖子和页面的文本编辑器中:
This code goes on function.php file of your active child theme (or theme). Tested and works.
USAGE:
In posts and pages text editor:
[ajax_add_to_cart id='123' text='Buy']
在PHP文件或模板中:
In PHP files or templates:
echo do_shortcode( "[ajax_add_to_cart id='123' text='Buy']" );
在php页面上以HTML代码插入:
Inserted in HTML code on a php page:
<?php echo do_shortcode( "[ajax_add_to_cart id='123' text='Buy']" ); ?>
隐藏Ajax查看购物车"
对于自定义的简码,要隐藏Ajax的查看购物车"行为,您可以先添加代码,然后返回$ 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 ;
这篇关于Woocommerce添加到购物车链接在其他帖子或页面中启用了Ajax的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!