![](/img/trans.png)
[英]Add a quantity radio selector field to Ajax add to cart button on WooCommerce shop page
[英]Add a quantity field to Ajax add to cart button on WooCommerce shop page
我是 Woocommerce 的新手。 我試圖在商店頁面中顯示數量框。 我使用了下面的代碼,它按預期工作:
add_action( 'woocommerce_before_shop_loop', 'handsome_bearded_guy_select_variations' );
function handsome_bearded_guy_select_variations() {
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_add_to_cart', 30 );
}
但問題是 ajax 添加到購物車按鈕被默認按鈕替換了。
如何在 Woocommerce 檔案頁面的帶有數量字段的添加到購物車按鈕上啟用 ajax 功能?
2021 年更新
對於從 3.2 到 5+ 的 WooCommerce 版本,優化了 jQuery 代碼並刪除了數量錯誤。 添加到購物車后添加數量重置。
以下自定義函數掛鈎在woocommerce_loop_add_to_cart_link
過濾器掛鈎中,並為 WooCommerce 存檔頁面和其他產品循環上的每個產品添加數量輸入字段。 我們在這里主要使用原始的 WooCommerce 代碼。
當客戶更改數量時,需要一些 jQuery 代碼來更新添加到購物車按鈕上的data-quantity
屬性。 可能需要一些樣式,這取決於您的客戶希望(和您的主題) 。
隱藏“查看購物車”按鈕的附加部分位於末尾。
代碼:
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_loop_ajax_add_to_cart', 10, 2 );
function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) {
if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
// Get the necessary classes
$class = 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' : '',
) ) );
// Embedding the quantity field to Ajax add to cart button
$html = sprintf( '%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
woocommerce_quantity_input( array(), $product, false ),
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
esc_html( $product->add_to_cart_text() )
);
}
return $html;
}
add_action( 'wp_footer' , 'archives_quantity_fields_script' );
function archives_quantity_fields_script(){
?>
<script type='text/javascript'>
jQuery(function($){
// Update data-quantity
$(document.body).on('click input', 'input.qty', function() {
$(this).parent().parent().find('a.ajax_add_to_cart').attr('data-quantity', $(this).val());
$(".added_to_cart").remove(); // Optional: Removing other previous "view cart" buttons
}).on('click', '.add_to_cart_button', function(){
var button = $(this);
setTimeout(function(){
button.parent().find('.quantity > input.qty').val(1); // reset quantity to 1
}, 1000); // After 1 second
});
});
</script>
<?php
}
代碼位於您的活動子主題(活動主題)的 functions.php 文件中。
在店面主題的 WooCommerce 版本 4.1.1 和 WordPress 4.5.1 上測試並運行。
隱藏“查看購物車”按鈕(使用 Ajax 添加到購物車時) :
1)。 您可以將此 CSS 規則添加到活動主題中的 styles.css 文件中:
a.added_to_cart.wc-forward {
display:none;
}
2)。 您可以使用以下掛鈎函數(第一個選項是最好的方法) :
add_action( 'wp_head' , 'hide_ajax_view_cart_button' );
function hide_ajax_view_cart_button(){
if( is_shop() || is_product_category() || is_product_tag() ): ?>
<style>
a.added_to_cart.wc-forward {
display:none;
}
</style>
<?php endif;
}
代碼位於活動子主題(活動主題)的 function.php 文件中。
執行上述所有操作,沒有“數量錯誤”。
代碼:
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_loop_ajax_add_to_cart', 10, 2 );
function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) {
if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
// Get the necessary classes
$class = 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' : '',
) ) );
// Adding embeding <form> tag and the quantity field
$html = sprintf( '%s%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>%s',
'<form class="cart">',
woocommerce_quantity_input( array(), $product, false ),
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
esc_html( $product->add_to_cart_text() ),
'</form>'
);
}
return $html;
}
add_action( 'wp_footer' , 'archives_quantity_fields_script' );
function archives_quantity_fields_script(){
//if( is_shop() || is_product_category() || is_product_tag() ): ?>
<script type='text/javascript'>
jQuery(function($){
// Update quantity on 'a.button' in 'data-quantity' attribute (for ajax)
$(".add_to_cart_button.product_type_simple").on('click', function() { var $button = $(this); $button.data('quantity', $button.parent().find('input.qty').val()); });
// remove old "view cart" text, only need latest one thanks!
$(document.body).on("adding_to_cart", function() {
$("a.added_to_cart").remove();
});
});
</script>
<?php //endif;
}
參考資料:
@LoicTheAztec 於 2018 年 2 月 11 日以上的條目。
@braciawrite 和 @andrewmclagan 的 GitHub 條目分別於 2015 年 12 月 11 日和 2018 年 3 月 15 日。
https://gist.github.com/webaware/6260326
注意:
代碼應該在按下“add_to_cart”按鈕時執行檢查,而不是數量變化。
我在帶有 WooCommerce 產品的自定義頁面上運行此代碼時,已注釋掉函數“archives_quantity_fields_script”下的 if 和 endif 語句。
希望這有幫助!
這是一種在 Woo 3+ 中似乎運行良好的替代方法
<?php
/**
* Add quantity field on the archive page.
*/
function custom_quantity_field_archive() {
$product = wc_get_product( get_the_ID() );
if ( ! $product->is_sold_individually() && 'variable' != $product->get_type() && $product->is_purchasable() ) {
woocommerce_quantity_input( array( 'min_value' => 1, 'max_value' => $product->backorders_allowed() ? '' : $product->get_stock_quantity() ) );
}
}
add_action( 'woocommerce_after_shop_loop_item', 'custom_quantity_field_archive', 0, 9 );
/**
* Enqueue the JavaScript.
*/
function custom_add_to_cart_quantity_handler() {
wc_enqueue_js( '
jQuery( ".post-type-archive-product" ).on( "click", ".quantity input", function() {
return false;
});
jQuery( ".post-type-archive-product" ).on( "change input", ".quantity .qty", function() {
var add_to_cart_button = jQuery( this ).parents( ".product" ).find( ".add_to_cart_button" );
// For AJAX add-to-cart actions
add_to_cart_button.attr( "data-quantity", jQuery( this ).val() );
// For non-AJAX add-to-cart actions
add_to_cart_button.attr( "href", "?add-to-cart=" + add_to_cart_button.attr( "data-product_id" ) + "&quantity=" + jQuery( this ).val() );
});
' );
}
add_action( 'init', 'custom_add_to_cart_quantity_handler' );
jQuery 可能有多個選項,具體取決於頁面上的 Ajax 操作。
我花了一整天才完成這項工作 - 但這是對我有用的代碼。 添加到您的functions.php - 它改編自上述內容,我在 WooCommerce 5.0.0
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_loop_ajax_add_to_cart', 10, 2 );
function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) {
if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
// Get the necessary classes
$class = 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' : '',
) ) );
// Adding embeding <form> tag and the quantity field
$html = sprintf( '%s%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>%s',
'<form class="cart">',
woocommerce_quantity_input( array(), $product, false ),
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
esc_html( $product->add_to_cart_text() ),
'</form>'
);
}
return $html;
}
add_action( 'wp_footer' , 'archives_quantity_fields_script' );
function archives_quantity_fields_script(){
//if( is_shop() || is_product_category() || is_product_tag() ): ?>
<script type='text/javascript'>
jQuery( document ).ready( function( $ ) {
$( document ).on( 'change', '.quantity .qty', function() {
$( this ).parent( '.quantity' ).next( '.add_to_cart_button' ).attr( 'data-quantity', $( this ).val() );
//alert("Changed");
});
});
jQuery(function($) {
// Update quantity on 'a.button' in 'data-quantity' attribute (for ajax)
$(".add_to_cart_button.product_type_simple").on('click', function() {
var $button = $(this);
$button.data('quantity', $button.parent().find('input.qty').val());
});
// remove old "view cart" text, only need latest one thanks!
$(document.body).on("adding_to_cart", function() {
$("a.added_to_cart").remove();
});
});
</script>
<?php //endif;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.