我的產品最大數量為10個。客戶經常選擇同時購買多種型別。因此，我想在商店頁面上有一個無線電數量選擇器（1 - 10）。
我已經知道如何在商店頁面顯示數量選擇器以及如何使用 WooCommerce 廣播表單。但我不知道如何制作數量無線電選擇器。
基于在WooCommerce 商店頁面答案代碼上向 Ajax 添加數量欄位添加到購物車按鈕，這是我的代碼嘗試：
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_loop_ajax_add_to_cart', 99, 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' : '',
) ) );
$args = array(
'type' => 'radio',
'class' => array( 'form-row-wide', 'update_totals_on_change' ),
'options' => array(
'0' => '0',
'1' => '1',
'2' => '2',
'3' => '3',
'4' => '4',
'5' => '5',
'6' => '6',
'7' => '7',
'8' => '8',
'9' => '9',
'10' => '10'
),
'default' => '0'
);
// 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" >%s</a>',
woocommerce_form_field( 'radio_choice', $args, '0' ),
// 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;
}
有什么建議可以讓代碼正常作業嗎？
uj5u.com熱心網友回復：
看起來您缺少完成這項作業所需的額外 jQuery。我知道您要求使用收音機選擇來完成這項作業，但也許是為了節省空間，您想考慮使用select?
下面的代碼就是這樣做的。
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' : '',
) ) );
$args = array(
'type' => 'select',
'class' => array( 'form-row-wide', 'quantity-select' ),
'options' => array(
'0' => '0',
'1' => '1',
'2' => '2',
'3' => '3',
'4' => '4',
'5' => '5',
'6' => '6',
'7' => '7',
'8' => '8',
'9' => '9',
'10' => '10'
),
'default' => '0'
);
// 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" >%s</a>',
woocommerce_form_field( '', $args ),
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('change', '.quantity-select select', function() {
let selected_quantity = $(this).find(":selected").text();
$(this).closest('li.product').find('a.ajax_add_to_cart').attr('data-quantity', selected_quantity);
$(".added_to_cart").remove(); // Optional: Removing other previous "view cart" buttons
}).on('click', '.add_to_cart_button', function(){
var button = $(this);
setTimeout(function(){
console.log( button.siblings('.quantity-select').find('select option[value="0"]') );
button.siblings('.quantity-select').find('select').val('0'); // reset quantity to 0
}, 1000); // After 1 second
});
});
</script>
<?php
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/461805.html
標籤：php WordPress woocommerce 单选按钮 产品数量