Я хочу, чтобы кнопка «Добавить в корзину» на странице продукта работала AJAX. Как мне это сделать? теперь, когда я добавляю в корзину на странице продукта – она обновляет страницу, как я могу заставить ее работать AJAX?
Кнопка «Добавить в корзину» на «Быстрый просмотр» в архиве работает ajax – и это здорово, но как я могу сделать то же самое на странице продукта?
Вы можете увидеть это здесь: вот архив (перейдите на быстрый просмотр, когда вы наведите указатель мыши на продукт): http://www.tomluz.co.il/bleeckerprince/bleecker/ и вот страница продукта: http: / /www.tomluz.co.il/bleeckerprince/bleecker/product-four-copy/
(«Take Me Home» = «Добавить в корзину»). может кто-то мне помогает? Я просто хочу, чтобы, когда я нажимаю на «Take me Home» на странице продукта: он добавит продукт с выбранными атрибутами в мою корзину с помощью ajax и откроет эту тележку (например, вы наведите курсор мыши на изображение в сумке) и встряхните сумка изображение.
Спасибо, Том.
Мы можем использовать ajax со страницы архива. это просто –
Удалите старую кнопку, которая представляет форму:
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 ); Добавьте ajax-ссылку с страницы архива на страницу одного продукта:
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_loop_add_to_cart', 30 );
PS JS Обратный звонок. Например, вы можете отображать всплывающие окна со ссылками «Назад в магазин» и «Корзина» или «Оформить заказ»,
$('body').on('added_to_cart',function(){ // Callback -> product added //$('.popup').show(); });
Пожалуйста, начните с чтения этой страницы:
http://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)
Сначала вам нужно добавить код к вашим функциям.php, например:
add_action( 'wp_ajax_add_foobar', 'prefix_ajax_add_foobar' ); add_action( 'wp_ajax_nopriv_add_foobar', 'prefix_ajax_add_foobar' ); function prefix_ajax_add_foobar() { $product_id = intval( $_POST['product_id'] ); // add code the add the product to your cart die(); }
Затем вам нужно добавить код javascript, который запускает добавление в корзину и вызывает вызов функции:
jQuery( ".add-to-cart" ).each(function() { var product_id = jQuery(this).attr('rel'); var el = jQuery(this); el.click(function() { var data = { action: 'add_foobar', product_id: product_id }; jQuery.post('/wp-admin/admin-ajax.php' , data, function(response) { if(response != 0) { // do something } else { // do something else } }); return false; }); });
Это всего лишь пример того, как это можно сделать. Хотя его очень простой. Этот javascript проверяет ссылки с именем класса .add-to-cart и проверяет атрибут rel для соответствующего продукта. Затем он отправляет идентификатор продукта в класс php. Там вам нужно добавить код, чтобы добавить соответствующий товар в корзину.
Я предлагаю вам найти дополнительную информацию о теме, чтобы она соответствовала вашим потребностям. Удачи.
info: Протестировано с WooCommerce 2.4.10.
Хм, хорошо, я сделал это по-другому, использовал петлю woocommerce из добавления в корзину (woocommerce / templates / loop / add-to-cart.php)
global $product; echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" data-quantity="%s" class="button %s product_type_%s">%s</a>', esc_url( $product->add_to_cart_url() ), esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( isset( $quantity ) ? $quantity : 1 ), $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '', esc_attr( $product->product_type ), esc_html( $product->add_to_cart_text() ) ), $product );
НО проблема заключалась в том, что она добавляла только 1 количество, по сути, вы можете видеть в коде, который указан в количестве: 1, поэтому у меня были проблемы, пока я не столкнулся с этими парнями, которые спасли меня
пс. оставив 1-ю часть, где он добавляет только 1 продукт для людей, которым не нужно больше 1 продукта в корзине, но я добавил решение для тех, кому нужно больше, чем один продукт, добавленный в корзину.
добавить к cart.js
jQuery( document ).on( 'click', '.product_type_simple', function() { var post_id = jQuery(this).data('product_id');//store product id in post id variable var qty = jQuery(this).data('quantity');//store quantity in qty variable jQuery.ajax({ url : addtocart.ajax_url, //ajax object of localization type : 'post', //post method to access data data : { action : 'prefix_ajax_add_foobar', //action on prefix_ajax_add_foobar function post_id : post_id, quantity: qty }, success : function(response){ jQuery('.site-header .quantity').html(response.qty);//get quantity jQuery('.site-header .total').html(response.total);//get total //loaderContainer.remove(); alert("Product Added successfully.."); } }); return false; });