Как сделать, чтобы при добавлении в корзину товара страница не перезагружалась?

Question

[Артем Иванов]

Использую на сайте фильтр для выбора количества товара:

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
    if ( $product && ! $product->is_sold_individually() ) {
        $html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data"><td class="ten">';
        $html .= woocommerce_quantity_input( array(), $product, false );
        $html .= '</td><td class="twenty"><button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
        $html .= '</form>';
    }
    return $html;
}

Но после добавления этого фильтра при нажатии "в корзину" страница обновляется. Как решить проблему, если можно, поподробнее?
Сайт: https://furnitura-ricom.ru/shop/

Comments

[Антон Литвиненко]

очевидно, что аякс не работает, вы заменили вот такую крутую кнопку

на вот такую

<button type="submit" class="button alt">В корзину</button>

хорошо, что вообще как-то работает

Answer 1

[Антон Литвиненко]

Нагуглил вам рабочий код с аяксом

/**
 * Add quantity field on the shop page.
 */
function ace_shop_page_add_quantity_field() {

	/** @var WC_Product $product */
	$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', 'ace_shop_page_add_quantity_field', 12 );


/**
 * Add required JavaScript.
 */
function ace_shop_page_quantity_add_to_cart_handler() {

	wc_enqueue_js( '
		$(".woocommerce .products").on("click", ".quantity input", function() {
			return false;
		});
		$(".woocommerce .products").on("change input", ".quantity .qty", function() {
			var add_to_cart_button = $(this).parents( ".product" ).find(".add_to_cart_button");
			// For AJAX add-to-cart actions
			add_to_cart_button.attr("data-quantity", $(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=" + $(this).val());
		});
		// Trigger on Enter press
		$(".woocommerce .products").on("keypress", ".quantity .qty", function(e) {
			if ((e.which||e.keyCode) === 13) {
				$( this ).parents(".product").find(".add_to_cart_button").trigger("click");
			}
		});
	' );

}
add_action( 'init', 'ace_shop_page_quantity_add_to_cart_handler' );

Answer 2

[Артем Иванов]

Тут проблема в том что AJAX будет работать, но не будет добавлять нужное кол-во товара, только по 1 шт.

Comments

[Антон Литвиненко]

Все нормально работает, я проверял

[Артем Иванов]

А на какой теме вы проверяли, просто я столько тем перепробовал и добавляется только 1шт.

[Антон Литвиненко]

artklu, боюсь вы правы, добавляет по одному. надо или ковырять или еще искать

[Антон Литвиненко]

artklu, поправил, теперь работает

[Артем Иванов]

Да,работает,только жаль,что не с моей темой.
Я установил плагин, который делает добавление товара AJAX, на странице single product.
И изменил функцию:

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
    if ( $product && ! $product->is_sold_individually() ) {
        $html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data"><td class="ten">';
        $html .= woocommerce_quantity_input( array(), $product, false );
        $html .= '</form>';
        $html .= '</td><td class="twenty">'. wc_get_template_html( 'single-product/add-to-cart/simple.php' );
    }
    return $html;
}

[Артем Иванов]

Но у меня выводится все это в одном месте : prnt.sc/135uj3h
Можно ли как то счетчик перенести левее: prnt.sc/135umt4
Чтобы все было вот так: prnt.sc/135uoj5

[Антон Литвиненко]

artklu, както наверно можно, может стилями, но в вашей теме никто вам не поможет, все нужно пробовать и проверять и за вас это никто не сделает

[Артем Иванов]

Антон Литвиненко, Понял, все равно спасибо большое за помощь, буду учиться ,разбираться )